OpenLayers学习笔记高级篇（一、openlayers画点线面）

话不多说直接上代码：

<!doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>                  <meta http-equiv=Content-Type content="text/html;charset=utf-8"><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><meta content=always name=referrer><title>点线面圆的绘制</title><link href="css/ol.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="js/ol.js" charset="utf-8"></script>
</head><body><label>Geometry type &nbsp;</label><select id="type"><option value="Point">Point</option><option value="LineString">LineString</option><option value="Polygon">Polygon</option><option value="Circle">Circle</option><option value="None">None</option></select><div id="map" style="width: 100%"></div>
<script type="text/javascript">var map = new ol.Map({//底图layers: [new ol.layer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({center: ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),zoom: 12})});// 添加一个绘制的线使用的layervar drawLayer = new ol.layer.Vector({//layer所对应的sourcesource: new ol.source.Vector(),})//把layer加入到地图中map.addLayer(drawLayer);//先看看选中的画什么，点？线？面？。。var typeSelect = document.getElementById('type');var draw; // 在这儿定义一个全局的绘制变量，方便一会去除它function addInteraction() {var value = typeSelect.value;if (value !== 'None') {draw = new ol.interaction.Draw({source: drawLayer.getSource(),type: typeSelect.value});map.addInteraction(draw);}}/*** 处理选中不同的绘制方式的方法，通过监听typeSelect值的变化*/typeSelect.onchange = function() {//先移除上一个Interactionmap.removeInteraction(draw);//再根据typeSelect的值绘制新的InteractionaddInteraction();};addInteraction();
</script>
</body></html>

先看一下效果：

我们点击下拉框下面不同的绘制方式就可以绘制不同的图形！下面来进行代码的解释：

首先添加一个绘制使用的layer，并把layer添加到地图中：

然后根据下拉框的值做地图的交互：

最后再监听下拉框值的变化，然后进行对应的地图交互：

好了，关于地图点线面圆的绘制就介绍到这儿了，下一节我们将学习openlayers中控件的知识！大家加油！

OpenLayers学习笔记高级篇（一、openlayers画点线面）相关推荐

OpenLayers学习笔记高级篇（二、地图控件）
在OpenLayers 3中,地图控件指的是下图标注的这些,包括缩放按钮,标尺,版权说明,指北针等等. 他们不会随着地图的移动而移动,一直处于一个固定的位置. 在实现上,并不是在画布上绘制的,而是使用 ...
OpenLayers学习笔记高级篇（四、地图开发实战之地图要素的增删改查）
一切都准备好了,现在终于可以通过ol3加载配置好的数据了.上一节中最后的预览结果,大家已经看到了,此处我们自己通过ol来实现这个预览页面,直接上代码如下: 1.加载Geoserver发布的wfs地图服 ...
R语言学习笔记——高级篇：第十四章-主成分分析和因子分析
R语言 R语言学习笔记--高级篇:第十四章-主成分分析和因子分析文章目录 R语言前言一.R中的主成分和因子分析二.主成分分析 2.1.判断主成分的个数 2.2.提取主成分 2.3.主成分旋转 ...
数据库MySQL学习笔记高级篇(周阳）
数据库MySQL学习笔记高级篇 1. mysql的架构介绍 mysql简介高级Mysql mysqlLinux版的安装 mysql配置文件 mysql逻辑架构介绍 mysql存储引擎 2. 索引优化 ...
OpenLayers学习笔记中级篇（一、各种地图的加载）
学习了前面的初级篇,相信大家对OplenLayers已经有了一个初步的认识,下面我们再继续深入学习OpenLayers的相关功能! 我们这节主要是加载各种各样的地图,包括在线服务的地图,比如天地图.高 ...
Redis学习笔记①基础篇_Redis快速入门
若文章内容或图片失效,请留言反馈.部分素材来自网络,若不小心影响到您的利益,请联系博主删除. 资料链接:https://pan.baidu.com/s/1189u6u4icQYHg_9_7ovWmA( ...
Postgresql学习笔记-高级语法篇
Postgresql学习笔记-高级语法篇 Postgresql 约束 Postgresql约束用于规定表中的数据规则. 如果存在违反约束的数据行为,行为会被约束终止. 约束可以在创建表的时候就规定(通 ...
C# 学习笔记入门篇（上）
文章目录 C# 学习笔记入门篇〇.写在前面 Hello World! 这篇学习笔记适合什么人这篇学习笔记到底想记什么附加说明一.命名空间 "进入"命名空间嵌套的命名空间. ...
R语言学习笔记——入门篇：第三章-图形初阶
R语言 R语言学习笔记--入门篇:第三章-图形初阶文章目录 R语言一.使用图形 1.1.基础绘图函数:plot( ) 1.2.图形控制函数:dev( ) 补充--直方图函数:hist( ) 补充- ...

OpenLayers学习笔记高级篇（一、openlayers画点线面）

OpenLayers学习笔记高级篇（一、openlayers画点线面）相关推荐

最新文章

热门文章