<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. 【Python】生成器、回溯和八皇后问题
			
    八皇后问题: 把N个皇后,放在N*N的棋盘上面,从第一行往下放,每个皇后占一行,同时,每个皇后不能处在同一列,对角线上,有多少种放置方法. 思路: 典型的回溯问题: 1.当要放置最后一个皇后时候,默认 ...
    
			
    2. 
						
  2. php观察者模式
			
    观察者模式(有时又被称为发布/订阅模式)是软件设计模式的一种.在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知.这通常透过呼叫各观察者所提供的方法来实现.此 ...
    
			
    3. 
						
  3. Openjudge-计算概论（A）-简单算术表达式求值
			
    描述: 两位正整数的简单算术运算(只考虑整数运算),算术运算为: +,加法运算:-,减法运算:*,乘法运算:/,整除运算:%,取余运算. 算术表达式的格式为(运算符前后可能有空格):运算数 运算符 运 ...
    
			
    4. 
						
  4. Openjudge-计算概论（A）-完美立方
			
    描述: a的立方 = b的立方 + c的立方 + d的立方为完美立方等式.例如12的立方 = 6的立方 + 8的立方 + 10的立方 .编写一个程序,对任给的正整数N (N≤100),寻找所有的四元组 ...
    
			
    5. 
						
  5. 在windows上部署使用Redis（摘录）
			
    下载Redis 在Redis的官网下载页上有各种各样的版本,我这次是在windows上部署的,要去GitHub上下载.目前的是2.8.12版的,直接解压,在\bin\release 目录下有个压缩包, ...
    
			
    6. 
						
  6. SASL - 简单认证和安全层
			
    转自:http://blog.csdn.net/id19870510/article/details/8232509 SASL - 简单认证和安全层 SASL是一种用来扩充C/S模式验证能力的机制认证 ...
    
			
    7. 
						
  7. BOOTICE(引导扇区维护工具) V1.3.3 中文免费绿色版
			
    软件名称: BOOTICE(引导扇区维护工具)软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 357KB图片预览: 软件简 ...
    
			
    8. 
						
  8. 2015 Multi-University Training Contest 3
			
    1001 Magician 线段树.根据奇偶性分成4个区间.维护子列和最大值. 想法很简单.但是并不好写. 首先初始化的时候对于不存在的点要写成-INF. 然后pushup的时候.对于每个区间要考虑四 ...
    
			
    9. 
						
  9. Python基础篇-day3
			
    主要内容:字典 集合 文件处理 字符编码 1.字典dict简介dict就是key value值,索引有意义,数据无序 key定义规则:a:不可变--数字.字符串.元组(可变--列表.字典)b:不能重复 ...
    
			
    10. 
						
  10. ios 基础数据类型
			
    1:NSString http://blog.csdn.net/likendsl/article/details/7417878 http://xys289187120.blog.51cto.com/ ...
    
			
    11.