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 </