<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. 2016年团体程序设计天梯赛-决赛 L1-1. 正整数A+B（15）
			
    本题的目标很简单,就是求两个正整数A和B的和,其中A和B都在区间[1,1000].稍微有点麻烦的是,输入并不保证是两个正整数. 输入格式: 输入在一行给出A和B,其间以空格分开.问题是A和B不一定是满 ...
    
			
    2. 
						
  2. ZOJ Martian Addition
			
    Description In the 22nd Century, scientists have discovered intelligent residents live on the Mars.  ...
    
			
    3. 
						
  3. Java IO 转换流 字节转字符流
			
    Java IO 转换流 字节转字符流 @author ixenos 字节流 输入字节流:---------| InputStream 所有输入字节流的基类. 抽象类.------------| Fil ...
    
			
    4. 
						
  4. openwrt生成备份文件
			
    生成备份文件时所使用的脚本中调用的命令为sysgrade local image_tmp   = "/tmp/firmware.img" local backup_cmd  = & ...
    
			
    5. 
						
  5. ffmpeg编译
			
    CFLAGS=-g ./configure --enable-opengl  --disable-yasm  --enable-shared --enable-pic
    
			
    6. 
						
  6. tomcat容器启动的启动过程(三)
			
    Catalina的start方法 /** * Start a new server instance. */ public void start() { if (server == null) { l ...
    
			
    7. 
						
  7. 安装cocoapods遇到的一些问题
			
    其实可以直接到https://github.com/CocoaPods/Specs上把所需的文件夹下载下来 解压后命名为master放在本地的 ~/.cocoapods/repos  下面就行 但是使 ...
    
			
    8. 
						
  8. pt-heartbeat监控延时
			
    测试国内主机到国外主机mysql的延时 主机 perl /usr/bin/pt-heartbeat -uroot --ask-pass  -D uk --create-table --update   ...
    
			
    9. 
						
  9. Oracle Day01 数据库基础
			
    1.数据库 它是一种软件产品,是用于存放数据.管理数据的存储仓库,是有效组织在一起的数据集合. 2.数据库和数据库对象的概念 数据库:指的是物理磁盘上的文件 数据库对象:存在于内存中用于跟数据库文件进 ...
    
			
    10. 
						
  10. json处理三部曲之第三曲：利用Gson处理json
			
    需要导入gson-xxx.jar包 <dependency> <groupId>com.google.code.gson</groupId> <artifac ...
    
			
    11.