OpenLayers 學習（三）向量圖層上新增點繪製點、線、多邊形
阿新 • • 發佈：2019-01-04
建立向量圖層，新增EditingToolbar類物件，該物件可以在向量圖層上新增點繪製點、線、多邊形等。
原始碼為：
<!DOCTYPE html> <html> <head> <title> 向量圖層上新增點繪製點、線、多邊形 </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <!-- 載入OpenLayers 類庫 --> <script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js"> </script> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } </style> <!-- 關鍵程式碼在這裡了 --> <script type="text/javascript"> function init() { //建立Control物件填充Controls陣列 var navigation_control = new OpenLayers.Control.Navigation({}); var controls_array = [ navigation_control, new OpenLayers.Control.PanZoomBar({}), new OpenLayers.Control.LayerSwitcher({}), new OpenLayers.Control.Permalink(), new OpenLayers.Control.MousePosition({}) ]; var map=new OpenLayers.Map('test_map',{controls: controls_array}); var wms_layer = new OpenLayers.Layer.WMS( 'WMS Layer Title', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'}, {} ); //建立向量圖層 var vector_layer=new OpenLayers.Layer.Vector("test_vector"); map.addLayers([wms_layer,vector_layer]); //.新增EditingToolbar類物件，該物件可以在向量圖層上新增點繪製多邊形， map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));//這時可以在地圖上新增點線面。 } </script> </head> <body onload="init()"> <div id="test_map" style="width: 100%; height: 100%;"> </div> </body> </html>
效果如下：
