513dd1b1a897396c30b4650e94d41950
leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)

前言

leaflet 入门开发系列环境知识点了解:

内容概览

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

效果图如下:

本篇主要是在上一篇leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)基础上实现的,leaflet通过调用geoserver发布的地图服务WFS来达到图层删除记录的目的。与GeoServer的WFS进行基于Rest交互关键就在于请求参数,值得注意的是这些请求最好采用POST方法发送。查询可以采用json,但增加,删除,修改都只能采用XML形式Transaction

  • 部分核心代码,完整的见源码demo下载
    ```
    var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';
    /*图层删除记录
    *@method deleteLayerRecord
    *@param fid 记录fid值
    *@return callback
    / function deleteLayerRecord(fid, callback){ var xml = 'http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">'; xml += ''; xml += ''; xml += ''; xml += ''; xml += ''; xml += ''; $.ajax({ url: geoserverUrl+'/wfs', async: true, data:xml, type:'Post', contentType: 'text/xml', success(result) { callback(result); }, error(err) { console.log(err); } }) } /

    • 图层删除回调函数
      / function callbackDeleteLayersWFSService(data){ console.log('data',data); //刷新图层 map.closePopup(); wmsLayer.setParams({ layers: 'WebGIS:testLayer', transparent: true, maxZoom: 20, format: 'image/png' }); } /
    • 地图点击事件
      */
      function onClickMap(e){
      //console.log('地图点击事件',e);
      latlng = e.latlng;
      var point = e.latlng.lng+','+e.latlng.lat;
      queryByPoint(point,'testLayer',callbackLastQueryWFSService);
      }

    /*点查图层
    *@method queryByPoint

top Created with Sketch.