<body>
    <div id="menu">
        <label>几何图形类型：</label>
        <select id="type">
            <option value="None">无</option>
            <option value="Point">点</option>
            <option value="LineString">线</option>
            <option value="Polygon">多边形</option>
            <option value="Circle">圆</option>
            <option value="Square">正方形</option>
            <option value="Box">长方形</option>
        </select>
    </div>
    <div id="map"></div>
    <script>
        var map=new ol.Map({
            target:'map',
            layer:[],
            view:new ol.View({
                center:[0,0],
                zoom:2
            })
        });//初始化地图
        var OSM=new ol.layer.Tile({
            source:new ol.source.OSM()
        });
        map.addLayer(OSM);//添加地图数据
        var selectedType=document.getElementById("type");
        var draw;//绘制对象
        //绘制绘制层
        var source=new ol.source.Vector({wrapX:false});
        var vector=new ol.layer.Vector({
            source:source,
            style:new ol.style.Style({
                fill:new ol.style.Fill({
                    color:'rgba(255,255,255,.2)'
                }),
                stroke:({
                    stroke:new ol.style.Stroke({
                        color:'#ffcc33',
                        width:2
                    })
                }),
                image:new ol.style.Circle({
                    radius:7,
                    fill:new ol.style.Fill({
                        color:'#ffcc33'
                    })
                })
            })
        });
        map.addLayer(vector);
        selectedType.onchange=function(e){
            map.removeInteraction(draw);//移除绘制图形
            addInteraction();
        };
        addInteraction();//添加交互绘制功能控件
        function addInteraction(){
            var value=selectedType.value;
            if(value!=="None"){
                if(source==null){
                    source=new ol.source.Vector({
                        wrapX:false
                    });
                    vector.setSource(source);
                }
                var geometryFunction,maxPoints;
                if(value==="Square"){
                    value='Circle';
                    geometryFunction=ol.interaction.Draw.createRegularPolygon(4);
                }else if(value==="Box"){
                    value='LineString';
                    maxPoints=2;
                    geometryFunction=function(coordinates,geometry){
                        if(!geometry){
                            geometry=new ol.geom.Polygon(null);
                        }
                        var start=coordinates[0];
                        var end=coordinates[1];
                        geometry.setCoordinates([
                                [start,[start[0],end[1]],end,[end[0],start[1]],start]
                        ]);
                        return geometry;
                    };
                }
                draw= new ol.interaction.Draw({
                    source:source,
                    type:/**@type {ol,geom.GeometryType}*/(value),
                    geometryFunction:geometryFunction,
                    maxPoints:maxPoints
                });
                map.addInteraction(draw);
            }else{
                source=null;
                vector.setSource(source);
            }
        }
    </script>
</body>

												


											
Openlays  3 绘制基本图形的更多相关文章
	

    
								
  1. 学习笔记：HTML5 Canvas绘制简单图形
		
    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...
    
		
    2. 
						
  2. css绘制特殊图形，meida查询，display inline-box间隙问题以及calc(）函数
		
    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...
    
		
    3. 
						
  3. 摘记  史上最强大的40多个纯CSS绘制的图形（一）
		
    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
    
		
    4. 
						
  4. 40多个纯CSS绘制的图形
		
    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
    
		
    5. 
						
  5. CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
		
    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
    
		
    6. 
						
  6. CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
		
    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
    
		
    7. 
						
  7. CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
		
    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
    
		
    8. 
						
  8. [ javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中 ] javascript canvas isPointInPath(x,y) 判断点是否在最后绘制的图形中方法演示 效果之三
		
    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...
    
		
    9. 
						
  9. iOS开发UI篇—Quartz2D使用（绘制基本图形）
		
    iOS开发UI篇—Quartz2D使用(绘制基本图形) 一.简单说明 图形上下文(Graphics Context):是一个CGContextRef类型的数据 图形上下文的作用:保存绘图信息.绘图状态 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SBT详解
			
    文章转载自http://beike.iteye.com/blog/1575296 SBT = (not so) Simple Build Tool,是scala的构建工具,与java的maven地位相 ...
    
			
    2. 
						
  2. input美化上传按钮美化
			
    今天工作需求碰到 样式改变上传按钮 效果: <a href="javascript:;" class="a-upload"> <input t ...
    
			
    3. 
						
  3. HDU 1242 Rescue(BFS)，ZOJ 1649
			
    题目链接 ZOJ链接 Problem Description Angel was caught by the MOLIGPY! He was put in prison by Moligpy. The ...
    
			
    4. 
						
  4. C#正则分组实例
			
    static void Main(string[] args) { string str = "大家家家家家家家明天天天天天天天天玩得得得得得得得开心"; Regex reg =  ...
    
			
    5. 
						
  5. LeetCode OJ 53. Maximum Subarray
			
    Find the contiguous subarray within an array (containing at least one number) which has the largest  ...
    
			
    6. 
						
  6. 小心DLL链接静态库时的内存错误
			
    本文转自http://www.bennychen.cn/2010/09/%E5%B0%8F%E5%BF%83dll%E9%93%BE%E6%8E%A5%E9%9D%99%E6%80%81%E5%BA% ...
    
			
    7. 
						
  7. Spring 中，对象销毁前执行某些处理的方法
			
    通过 @PreDestroy 和 bean 中配置 destroy-method 实现该功能 java 代码中: 1: public class TestClass { 2: private Sche ...
    
			
    8. 
						
  8. 将数据库的数据导入solr索引库中
			
    在solr与tomcat整合文章中,我用的索引库是mycore,现在就以这个为例. 首先要准备jar包:solr-dataimporthandler-4.8.1.jar.solr-dataimport ...
    
			
    9. 
						
  9. Notepad++ V6.9.0 中文绿色便携版
			
    软件名称: Notepad++软件语言: 简体中文授权方式: 免费软件运行环境: Win 32位/64位软件大小: 3.4MB图片预览: 软件简介:Notepad中文版是一款非常有特色的编辑器,是开源 ...
    
			
    10. 
						
  10. localStorage请使用getItem 和setITem
			
    最近看别人的代码,发现他们在从localStorage里面的时候喜欢用dot来操作,而不是get setItem,记得以前说过这个事.下面再说一次吧. 用dot方式来操作(   每次以'hello'= ...
    
			
    11.