<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. javascript表单操作
			
    通过遍历获得列表中被勾选的元素 $("#singcms-push").click(function(){ var id = $("#select-push"). ...
    
			
    2. 
						
  2. HDU 2461 Rectangles#容斥原理
			
    http://acm.hdu.edu.cn/showproblem.php?pid=2461 题目很简单,但是由于询问数M可以很大,所以容易超时,这道题学到了在结构体里面写函数的方法,这样子效率更高, ...
    
			
    3. 
						
  3. Codeforces Round #366 (Div. 2)_C. Thor
			
    C. Thor time limit per test 2 seconds memory limit per test 256 megabytes input standard input outpu ...
    
			
    4. 
						
  4. IOS CrackMe 破解学习
			
    一直在看别人如何破解一个app,下面自己也尝试着学习怎么去破解一个app的密码,下面是完整的过程. 准备工作: 一台mac或者pc安装了ssh客户端 一台越狱的iphone iphone上安装了ope ...
    
			
    5. 
						
  5. 聊天系统Demo，增加Silverlight客户端（附源码）－－ ESFramework 4.0 快速上手（09）
			
    在ESFramework 4.0 快速上手 -- 入门Demo,一个简单的IM系统(附源码)一文中,我们介绍了使用ESFramework的Rapid引擎开发的winform聊天程序,本文我们将在之前d ...
    
			
    6. 
						
  6. LeetCode OJ 153. Find Minimum in Rotated Sorted Array
			
    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...
    
			
    7. 
						
  7. 洛谷-陶陶摘苹果（升级版）-BOSS战-入门综合练习1
			
    题目描述 Description 又是一年秋季时,陶陶家的苹果树结了n个果子.陶陶又跑去摘苹果,这次她有一个a公分的椅子.当他手够不着时,他会站到椅子上再试试. 这次与NOIp2005普及组第一题不同 ...
    
			
    8. 
						
  8. 杭电1002 Etaoin Shrdlu
			
    Problem Description The relative frequency of characters in natural language texts is very important ...
    
			
    9. 
						
  9. C#第七天
			
    一 1.继承:我们可能会在一些类中,写一些重要的成员,将这些重复的成员单独的封装到一个类中,作为这些类的父类. Student    Teacher     Driver                ...
    
			
    10. 
						
  10. Quartz 2D中的基本图形绘制
			
    在iOS中绘图一般分为以下几个步骤: 1.获取绘图上下文 2.创建并设置路径 3.将路径添加到上下文 4.设置上下文状态 5.绘制路径 6.释放路径 在UIKit中默认已经为我们准备好了一个图形上下文 ...
    
			
    11.