（转）openlayers实现在线编辑

http://blog.csdn.net/gisshixisheng/article/details/46054949

概述：

在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能，在本文讲述如何在openlayers实现类似的功能。上一篇博文的地址为：

http://blog.csdn.net/gisshixisheng/article/details/44310765

 

思路：

前后台的数据交互以wkt的形式，加载已完成对象用wkt，对象更新完成之后将geometry转换为wkt传给后台，将信息保存到数据库中。实现在线编辑主要为OpenLayers.Control.ModifyFeature。

 

实现：

1、新建vector图层

 

[javascript] view plain copy
 
 print?
  1. var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;  
  2. renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;  
  3. vectors = new OpenLayers.Layer.Vector("Vector Layer", {  
  4.     renderers: renderer  
  5. });  
  6. map1.addLayer(vectors);  


2、添加wkt对象

 

 

[javascript] view plain copy
 
 print?
  1.     var wkts = [  
  2.         "POINT(107.5758285931443 29.7822116459692)",  
  3.         "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",  
  4.         "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"  
  5.     ];  
  6.     var wktFormat = new OpenLayers.Format.WKT();  
  7.     for(var i= 0,dl=wkts.length;i<dl;i++){  
  8.         var geometry = wktFormat.read(wkts[i]);  
  9.         vectors.addFeatures(geometry);  
  10.     }  
  11. }  

3、添加编辑控件

 

 

[javascript] view plain copy
 
 print?
  1. var editor = new OpenLayers.Control.ModifyFeature(vectors);  
  2. map1.addControl(editor);  
  3. editor.activate();  


4、给vector添加编辑完成事件

 

 

[javascript] view plain copy
 
 print?
  1. vectors.events.on({  
  2.     "afterfeaturemodified":editEnd  
  3. });  
  4. function editEnd(evt){  
  5.     if(evt.modified){  
  6.         console.log("发生变化");  
  7.         var geom = evt.feature.geometry;  
  8.         var wkt = new OpenLayers.Format.WKT(geom);  
  9.         console.log(wkt.toString());  
  10.     }  
  11.     else{  
  12.         console.log("未发生变化");  
  13.     }  
  14. }  



实现完整代码如下：

 

 

[html] view plain copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head lang="en">  
  4.     <meta charset="UTF-8">  
  5.     <title>openlayers map</title>  
  6.     <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">  
  7.     <style>  
  8.         html, body{  
  9.             padding:0;  
  10.             margin:0;  
  11.             height:100%;  
  12.             width:100%;  
  13.             overflow: hidden;  
  14.             font-size: 12px;  
  15.         }  
  16.         #map1{  
  17.             width: 100%;  
  18.             height: 100%;  
  19.             float: left;  
  20.             border-right: 1px solid #000000;  
  21.         }  
  22.     </style>  
  23.     <script src="http://localhost/olapi/OpenLayers.js"></script>  
  24.     <script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>  
  25.     <script src="http://localhost/jquery/jquery-1.8.3.js"></script>  
  26.     <script>  
  27.         var map1, vectors;  
  28.         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';  
  29.         $(function(){  
  30.             var bounds = new OpenLayers.Bounds(  
  31.                     73.45100463562233, 18.16324718764174,  
  32.                     134.97679764650596, 53.531943152223576  
  33.             );  
  34.             var options = {  
  35.                 controls: [],  
  36.                 maxExtent: bounds,  
  37.                 maxResolution: 0.2403351289487642,  
  38.                 projection: "EPSG:4326",  
  39.                 units: 'degrees'  
  40.             };  
  41.             map1 = new OpenLayers.Map('map1', options);  
  42.   
  43.             map1.addLayer(getWms("china"));  
  44.             map1.addControl(new OpenLayers.Control.Zoom());  
  45.             map1.addControl(new OpenLayers.Control.Navigation());  
  46.             map1.zoomToExtent(bounds);  
  47.             addVectors();  
  48.             addEditor();  
  49.         });  
  50.   
  51.         function getWms(layer){  
  52.             return new OpenLayers.Layer.WMS(  
  53.                     "Geoserver layers - Tiled",  
  54.                     "http://localhost:8081/geoserver/lzugis/wms",  
  55.                     {  
  56.                         "LAYERS": layer,  
  57.                         "STYLES": '',  
  58.                         format: 'image/png'  
  59.                     },  
  60.                     {  
  61.                         buffer: 0,  
  62.                         displayOutsideMaxExtent: true,  
  63.                         isBaseLayer: true,  
  64.                         yx : {'EPSG:4326' : true}  
  65.                     }  
  66.             );  
  67.         }  
  68.   
  69.         function addVectors(){  
  70.             var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;  
  71.             renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;  
  72.             vectors = new OpenLayers.Layer.Vector("Vector Layer", {  
  73.                 renderers: renderer  
  74.             });  
  75.             map1.addLayer(vectors);  
  76.             vectors.events.on({  
  77.                 "afterfeaturemodified":editEnd  
  78.             });  
  79.             var wkts = [  
  80.                 "POINT(107.5758285931443 29.7822116459692)",  
  81.                 "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",  
  82.                 "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"  
  83.             ];  
  84.             var wktFormat = new OpenLayers.Format.WKT();  
  85.             for(var i= 0,dl=wkts.length;i<dl;i++){  
  86.                 var geometry = wktFormat.read(wkts[i]);  
  87.                 vectors.addFeatures(geometry);  
  88.             }  
  89.         }  
  90.   
  91.         function addEditor(){  
  92.             var editor = new OpenLayers.Control.ModifyFeature(vectors);  
  93.             map1.addControl(editor);  
  94.             editor.activate();  
  95.         }  
  96.   
  97.         function editEnd(evt){  
  98.             if(evt.modified){  
  99.                 console.log("发生变化");  
  100.                 var geom = evt.feature.geometry;  
  101.                 var wkt = new OpenLayers.Format.WKT(geom);  
  102.                 console.log(wkt.toString());  
  103.             }  
  104.             else{  
  105.                 console.log("未发生变化");  
  106.             }  
  107.         }  
  108.   
  109.     </script>  
  110. </head>  
  111. <body>  
  112.     <div id="map1"></div>  
  113. </body>  
  114. </html>  


实现效果：

 

 

编辑状态
编辑完成
posted @ 2017-06-09 17:03  疯子110  阅读(538)  评论(0)  编辑  收藏  举报