tclientdataset xml 新增字段_leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)...

于 2020-12-10 09:37:40 发布 · 136 阅读

本文介绍如何使用Leaflet结合GeoServer的WFS服务实现地图图层的新增功能。重点讲解了通过POST方法发送请求参数，并采用XML形式进行图层的增加、删除及修改操作的方法。此外还展示了如何利用Leaflet插件绘制图形并获取空间信息。

前言

leaflet 入门开发系列环境知识点了解：
leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等
leaflet 在线例子
leaflet 插件，leaflet 的插件库，非常有用

内容概览

leaflet结合geoserver利用WFS服务实现图层新增
源代码demo下载

效果图如下：

本篇主要是leaflet通过调用geoserver发布的地图服务WFS来达到图层新增记录的目的。与GeoServer的WFS进行基于Rest交互关键就在于请求参数，值得注意的是这些请求最好采用POST方法发送。查询可以采用json，但增加，删除，修改都只能采用XML形式Transaction。最后利用leaflet来叠加显示在地图上展示。

用leaflet插件绘制图形工具draw的新增图形以及回调函数获取绘制图形空间信息，绘制工具的github地址：

https://github.com/geoman-io/leaflet-geomangithub.com

geoserver默认WFS服务是没有编辑操作权限的，所以需要在geoserver设置权限，允许编辑操作才行，截图如下：

部分核心代码：

 //绘制工具draw 
  map.pm.addControls({ 
 position: 'topleft', 
 drawCircle: false, 
 drawMarker:false, 
 drawCircleMarker:false, 
 drawPolyline:false, 
 drawRectangle:false, 
 cutPolygon:false, 
 removalMode:false 
  }); 
 
//绘制图形之前 
  map.on('pm:drawstart', e => { 
 if(geojsonLayer){ 
         map.removeLayer(geojsonLayer); 
         geojsonLayer = null; 
     } 
  }); 
 
  map.on('pm:create', e => { 
 //console.log(e); 
    geojsonLayer = e.layer; 
    geojsonLayer.addTo(map); 
    e.layer.unbindPopup(); 
 var elements = '<span>名称:</span><input type="text" id="estate_num" /></br><span>备注:</span><input type="text" id="holder_nam" /></br><button type="button" id="addBtn">新增</button>'; 
    e.layer.on('popupopen', function(e){ 
        $("#addBtn").click(function(){ 
 if(geojsonLayer){ 
 //构造polygon  
 var polygon = ''; 
 var data = geojsonLayer.toGeoJSON().geometry.coordinates[0]; 
 for(var i=0;i<data.length;i++){ 
 var item = data[i]; 
                  polygon += item[0] + ',' + item[1] + ' ' ; 
              } 
              polygon += data[0][0] + ',' + data[0][1]; 
              addLayers(polygon,$("#estate_num").val(),$("#holder_nam").val(),callbackAddLayersWFSService); 
          } 
        });      
    }); 
    e.layer.bindPopup(elements).openPopup(e.latlng); 
  });

图层新增函数

 /*图层新增 
   *@method addLayers 
   *@param polygon 图形 
   *@param fieldValue1 字段1值 
   *@param fieldValue2 字段2值 
   *@return callback 
   */ 
 function addLayers(polygon,fieldValue1,fieldValue2, callback){ 
 var xml = '<wfs:Transaction service="WFS" version="1.0.0"    xmlns:opengis="http://webgis.com"    xmlns:wfs="http://www.opengis.net/wfs"    xmlns:ogc="http://www.opengis.net/ogc"   xmlns:gml="http://www.opengis.net/gml"   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xsi:schemaLocation="http://www.opengis.net/wfs   http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">'; 
    xml += '<wfs:Insert handle="WebGIS">'; 
    xml += '<opengis:testLayer>'; 
    xml += '<opengis:the_geom>'; 
    xml += '<gml:MultiPolygon srsName="EPSG:4326">'; 
    xml += '<gml:polygonMember>';  
    xml += '<gml:Polygon>'; 
    xml += '<gml:outerBoundaryIs>'; 
    xml += '<gml:LinearRing>'; 
    xml += '<gml:coordinates decimal="." cs="," ts=" ">' + polygon + '</gml:coordinates>'; 
    xml += '</gml:LinearRing>'; 
    xml += '</gml:outerBoundaryIs>'; 
    xml += '</gml:Polygon>'; 
    xml += '</gml:polygonMember>'; 
    xml += '</gml:MultiPolygon>'; 
    xml += '</opengis:the_geom>'; 
    xml += '<opengis:estate_num>' + fieldValue1 + '</opengis:estate_num>'; 
    xml += '<opengis:holder_nam>' + fieldValue2 + '</opengis:holder_nam>'; 
    xml += '</opengis:testLayer>'; 
    xml += '</wfs:Insert>'; 
    xml += '</wfs:Transaction>'; 
 
    $.ajax({ 
        url: geoserverUrl+'/wfs', 
        async: true, 
        data:xml, 
        type:'Post', 
        contentType: 'text/xml', 
        success(result) { 
            callback(result); 
        }, 
        error(err) { 
            console.log(err); 
        } 
    }) 
  }

几点说明：
1.xmlns:opengis="http://webgis.com"，geoserver工作区的url；

更多详情以及源码见下面链接：

leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载) －小专栏xiaozhuanlan.com