<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. POJ 3259 Wormholes（SPFA+邻接表）
			
    (￣▽￣)" #include<iostream> #include<cstdio> #include<queue> #include<vector ...
    
			
    2. 
						
  2. 对低、高频系数直接重构upcoef2
			
    此函数可对原图低.高频系数(或处理后的系数)进行重构 clear all;close all;clc; I=imread('C:\Users\Jv\Desktop\wenli.jpg'); gray= ...
    
			
    3. 
						
  3. MC-设置 止盈
			
    using System; using System.Drawing; using System.Linq; using PowerLanguage.Function; using ATCenterP ...
    
			
    4. 
						
  4. webservice整合spring cxf
			
    下载cxf包,把他里面的包都添加进lib文件夹中. 创建一个接口.添加@WebService注解 @WebService public interface HelloWorld { String sa ...
    
			
    5. 
						
  5. shell笔记-local、export用法
			
    local一般用于局部变量声明,多在在函数内部使用.    1.    Shell脚本中定义的变量是global的,其作用域从被定义的地方开始,到shell结束或被显示删除的地方为止.    2.   ...
    
			
    6. 
						
  6. Raft协议详解-leader发送心跳代码go
			
    如果已经把最新的log更新了,那就多等一会,反之,很快就广播AppendEntries(也就是心跳消息) func (rf *Raft) LeaderState() { time.Sleep(10 * ...
    
			
    7. 
						
  7. js函数大全（2）
			
    原文地址:http://phperbar.blog.163.com/blog/static/162596182201032935815391/ 1.常规函数 javascript常规函数包括以下9个函 ...
    
			
    8. 
						
  8. css3-多列显示文字
			
    -------------------------- <style>            #demo{                margin: 20px auto;         ...
    
			
    9. 
						
  9. JavaScript高级程序设计：第一章
			
    JavaScript简介: 1.JavaScript实现应该由以下三部分组成: (1)核心:ECMAScript (2)文档对象模型:DOM (3)浏览器对象模型:BOM 2.什么是ECMAScrip ...
    
			
    10. 
						
  10. hdu_4824_Disk Schedule(dp)
			
    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4824 题意:中文,不解释 题解:双调欧几里德旅行商问题,具体可看dp双调欧几里德旅行商,这里注意的是起 ...
    
			
    11.