zoukankan      html  css  js  c++  java

  • （转）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.             100%;  
    13.             overflow: hidden;  
    14.             font-size: 12px;  
    15.         }  
    16.         #map1{  
    17.              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>  


    实现效果：

    编辑状态
    编辑完成
  • 相关阅读:
    JS 正则查找与替换
    MySQL 批量插入值
    Python/Django 批量下载Excel
    Python/Django 下载Excel2007
    Python/Django 下载Excel2003
    Python3安装Scrapy
    服务器响应状态码
    细说同域-同父域-跨域
    细说Ajax跨域
    PostgreSQL学习
  • 原文地址：https://www.cnblogs.com/telwanggs/p/6972787.html
Copyright © 2011-2022 走看看