本文介绍使用OpenLayers.Control.DrawFeature和OpenLayers.Handler.Polygon来绘制Polygon图元。绘制Point和Line与此类似。
1. 创建Vector图层
1 var vlayer = new OpenLayers.Layer.Vector("dv_layer" ); 2 map.addLayer(vlayer);
2. 创建Draw Polygon Control
1 var draw_polygon_control = new OpenLayers.Control.DrawFeature( 2 vlayer, //DrawControl所作用的图层 3 OpenLayers.Handler.Polygon);// Polgyon类型DrawControl 4 // 添加到map上 5 map.addControl(draw_polygon_control); 6 // 激活Draw Control 7 draw_polygon_control.activate();
OpenLayers.Control.DrawFeature有两个参数：
- 第一个参数指定绘制的图元存储在哪个图层上
- 第二个参数是一个绘制Polygon的Handler
创建完draw_polygon_control，将其添加到map对象上，并激活控件。
3. 定义Draw完成后的添加Feature事件
1 function onAddFeature(feature){ 2 document.getElementById("result").innerHTML= feature.geometry; 3 }
Draw完成后，触发该事件响应函数。该函数的参数返回绘制的feature数据。这里将新绘制的feature的geometry数据显示到一个div容器中。
然后将事件响应函数绑定到draw_polygon_control的featureAdded事件上。draw_polygon_control会自动触发该事件。
1 draw_polygon_control.featureAdded = onAddFeature;
]
完整代码如下
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 2 <HTML> 3 <HEAD> 4 <TITLE> OpenLayers : Draw Feature </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 <script src="./OpenLayers-2.10/lib/OpenLayers.js"></script> 8 <script type="text/javascript"> 9 10 var map = null; 11 var wms_url = "http://192.168.111.156:8080/geoserver/wms?"; 12 var wms_version = "1.3.0"; 13 14 var vlayer = null; 15 16 function init() 17 { 18 //创建map对象， 19 map = new OpenLayers.Map("map"); 20 var layer = new OpenLayers.Layer.WMS("OpenLayers WMS", 21 wms_url, 22 {layers: 'country'}, 23 {singleTile: true}); 24 25 vlayer = new OpenLayers.Layer.Vector("Polygon Layer"); 26 27 // 添加图层 28 map.addLayers([layer,vlayer]); 29 map.addControl(new OpenLayers.Control.LayerSwitcher()); 30 31 var draw_polygon_control = new OpenLayers.Control.DrawFeature(vlayer, 32 OpenLayers.Handler.Polygon); 33 map.addControl(draw_polygon_control); 34 // 注册Draw完成后的事件，在Draw一个Geometry完成以后，调用该函数,有两种方法 35 // 1) 注册到OpenLayers.Control.DrawFeature上 36 draw_polygon_control.featureAdded = onAddFeature; 37 // 2) 注册到Vector Layer 上 38 //vlayer.events.register('featureadded', vlayer, onAddFeature); 39 40 draw_polygon_control.activate(); 41 // 放大到全屏 42 map.zoomToMaxExtent(); 43 } 44 45 // Draw完成后的回调函数 46 function onAddFeature(feature){ 47 document.getElementById("result").innerHTML=feature.geometry; 48 49 } 50 51 </script> 52 53 </HEAD> 54 55 <BODY onload="init()"> 56 <div> 57 <div><input type="text" id="geomtext" value="POINT(0 0)"></div>--> 58 <div id="map" class="smallmap"></div> 59 <div id="result"></div> 60 </div> 61 </BODY> 62 </HTML>