OpenLayers-Editbar控件

利用Editbar控件，可以在OpenLayers地图上绘制点、线、面图元。

1. 创建OpenLayers地图对象，并添加一个WMS图层作为底图。

2. 创建OpenLayers的Vector Layer

绘制的点、线、面图元需要有一个Vector图层进行存储。

1 var vlayer = new OpenLayers.Layer.Vector( "Editable" );

Vector图层的图层名为"Editable"

3. 将WMS图层和”Editable”图层添加到地图上

map.addLayers([layer,vlayer]);

4. Map上添加Edit Tool Bar控件

//创建edit tool bar控件，并制定edit tool bar控件作用于vlayer图层
var editbar = new OpenLayers.Control.EditingToolbar(vlayer)
map.addControl(editbar);

5. 设置html的onload函数

完成后的就可以在vlayer上添加图元了。效果如下图所示

完整的代码

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 2 <HTML>  3 <HEAD>  4 <TITLE> OpenLayers : Map Edit </TITLE>  5 <link rel="stylesheet" href="./OpenLayers-2.10/theme/default/style.css" type="text/css" />  6 <link rel="stylesheet" href="css/style.css" type="text/css" />  7 <style type="text/css">  8  #wrapper  9 { 10  width: 800px; 11 } 12  #location { 13  float: right; 14 } 15  #scale { 16  float: left; 17 } 18 </style> 19 <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script> 20 <script type="text/javascript"> 21 22 var map = null; 23 var wms_url = "http://127.0.0.1:8080/geoserver/wms?"; 24 var wms_layer = "world:country"; 25 var wms_format = 'image/png'; 26 var wms_version = "1.3.0"; 27 28 function init() 29  { 30 //创建map对象， 31  map = new OpenLayers.Map("map"); 32 var layer = new OpenLayers.Layer.WMS("OpenLayers WMS", 33  wms_url, 34  { 35  layers: wms_layer, 36  format: wms_format, 37  singleTile: true 38  }); 39 //创建Vector 图层 40 var vlayer = new OpenLayers.Layer.Vector( "Editable" ); 41 //添加Edit Tool Bar 42 var editbar = new OpenLayers.Control.EditingToolbar(vlayer); 43  map.addControl(editbar); 44 // 添加图层 45  map.addLayers([layer,vlayer]); 46 47  map.addControl( new OpenLayers.Control.LayerSwitcher() ); 48  map.zoomToMaxExtent(); 49  } 50 </script> 51 52 </HEAD> 53 54 <BODY onload="init()"> 55 <div> 56 <div id="map" class="smallmap"></div> 57 </div> 58 </BODY> 59 </HTML

OpenLayers-Editbar控件相关推荐

Vue+Openlayers显示TileWMS时不显示默认控件放大缩小旋转等组件
场景 Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客-CSDN博客在上面 ...
openlayers添加按钮_OpenLayers3加载常用控件使用方法详解
本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下 1. 前言地图控件就是对地图的缩放.全屏.坐标显示控件等,方便我们对地图进行操作.OpenLayers ...
OpenLayers基础教程——常规的地图控件
1.前言熟悉GIS的同志对地图控件应该不会陌生,ArcMap中就有很多地图控件,比如放大.缩小.全图等.其实在OpenLayers中也有很多地图控件,它们都继承了ol.control.Control ...
OpenLayers学习笔记高级篇（二、地图控件）
在OpenLayers 3中,地图控件指的是下图标注的这些,包括缩放按钮,标尺,版权说明,指北针等等. 他们不会随着地图的移动而移动,一直处于一个固定的位置. 在实现上,并不是在画布上绘制的,而是使用 ...
openlayer右键菜单_让OpenLayers的SelectFeature控件支持鼠标右键事件
OpenLayers上的一个Feature对象单击出现一个气泡很容易实现,但是右键出现点菜单什么的就不容易了,关键在于SelectFeature控件不支持右键事件,所以我就改之.. 修改的源文件是基于 ...
openlayers图层开关控件
openlayers2自带图层开关控件,但是自openlayers3后,不再有这个控件.但是,当了解了openlayers控件开发后,我们可以自己实现这个控件,实现起来也非常之简单.不多说,先看下结果 ...
Openlayers之地图比例尺控件
1.新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和比例尺控件的容器: 2.代码实现 <!DOCTYPE html> < ...
openlayer 图层上下_OpenLayers实现图层切换控件
OpenLayers并没有封装图层切换的控件,所以我们需要自己来实现图层控件. 自定义图层切换控件的原理很简单:显示某个图层时,将其他图层隐藏. 完整代码: layerSwitch.html: 图层切 ...
webbrowser控件加载为空白_OpenLayers教程五：地图控件之坐标拾取控件和鹰眼控件...
一.坐标拾取控件很多时候我们想要实时获取鼠标光标指示处对应的坐标,就像高德地图的坐标拾取:控制台 | 高德开放平台 | 高德地图API OpenLayers提供的ol.control.MousePo ...

OpenLayers-Editbar控件

OpenLayers-Editbar控件相关推荐

最新文章

热门文章