Abd959a95ecd21f2eb889a3c061ba487
leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)

前言

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-geoman
  • 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 图形
top Created with Sketch.