cesium结合geoserver利用WFS服务实现图层删除

内容概览

1.cesium结合geoserver利用WFS服务实现图层删除功能
2.源代码demo下载

效果图如下：

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

• 部分核心代码，完整的见源码demo下载

  var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';
  var image_Source = new Cesium.UrlTemplateImageryProvider({
      //url: 'http://mt0.google.cn/vt/lyrs=t,r&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}',
      //url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
      url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      //tilingScheme : new Cesium.GeographicTilingScheme(),
      credit: ''
  });
  var viewer = new Cesium.Viewer('map', {
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      fullscreenButton: false,
      vrButton: false,
      baseLayerPicker: false,
      infoBox: false,
      selectionIndicator: false,
      animation: false,
      timeline: false,
      shouldAnimate: true,
      navigationHelpButton: false,
      navigationInstructionsInitiallyVisible: false,
      imageryProvider: image_Source
  });
  
  //加载geoserver wms服务
  var wms = new Cesium.WebMapServiceImageryProvider({
            url: geoserverUrl+'/wms',
            layers: 'WebGIS:testLayer',
            parameters: {
                   service : 'WMS',
                format: 'image/png',
                transparent: true,
            }
   });
   viewer.imageryLayers.addImageryProvider(wms);
  
  
  viewer._cesiumWidget._creditContainer.style.display = "none";
  viewer.scene.globe.enableLighting = false;
  //viewer.scene.globe.depthTestAgainstTerrain = true;
  viewer.scene.globe.showGroundAtmosphere = false;
  
  viewer.camera.flyTo({
      destination : Cesium.Cartesian3.fromDegrees(113.90271877, 22.95186415,30000.0)
  });
  
  
   var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
   var ellipsoid = viewer.scene.globe.ellipsoid;
   handler.setInputAction(function (movement) {
          //通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
          cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
          if (cartesian) {
              //将笛卡尔坐标转换为地理坐标
              var cartographic = ellipsoid.cartesianToCartographic(cartesian);
              //将弧度转为度的十进制度表示
              var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
              var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
              var point = longitudeString + ',' + latitudeString;
              queryByPoint(point,'testLayer',callbackLastQueryWFSService);
          }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  

  /*点查图层 *@method queryByPoint *@param point 点查 *@param typeName 图层名称 *@return null */ function queryByPoint(point, typeName, callback){ var filter = ''; filter += ''; filter += 'the_geom'; filter += 'gml:Point'; filter += 'gml:coordinates' + point + '</gml:coordinates>'; filter += '</gml:Point>'; filter += ''; filter += ''; var urlString = geoserverUrl + '/ows'; var param = { service: 'WFS', version: '1.0.0', request: 'GetFeature', typeName: typeName, outputFormat: 'application/json', filter: filter }; var geojsonUrl = urlString + getParamString(param, urlString); $.ajax({ url: geojsonUrl, async: true, type:'GET', dataType: 'json', success(result) { callback(result); }, error(err) { console.log(err); } }) }

  function getParamString(obj, existingUrl, uppercase){ var params = []; for (var i in obj) { params.push(encodeURIComponent(uppercase ? i.toUpperCase() : i) + '=' + encodeURIComponent(obj[i])); } return ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');
  }

  /*

  • 点查图层回调函数 */ function callbackLastQueryWFSService(data){ console.log('data',data); if(data && data.features.length>0){ clearGeojsonLayer(); loadGeojsonLayer(data); //气泡窗口显示 var properties = data.features[0].properties; var id = data.features[0].id; var content = '名称:'+properties.estate_num+'
    备注:'+properties.holder_nam+'删除'; ("#infowindow").show(); ("#infowindow").empty(); ("#infowindow").append(content); ("#deleteBtn").click(function(){ //console.log('删除按钮点击事件'); if(id) { deleteLayerRecord(id,callbackDeleteLayersWFSService); } }); } else{ clearMap(); $("#infowindow").hide(); } }

  /*图层删除记录 *@method deleteLayerRecord *@param fid 记录fid值 *@return callback */ function deleteLayerRecord(fid, callback){ var xml = ''; 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); //暂时刷新页面形式刷新图层 window.location.reload(); }

几点说明：
1.WebGIS，geoserver工作区；
2.testLayer，操作图层名称；
3.fid，操作图层的默认固有属性字段。
图层删除回调函数，操作成功或者失败，可以在网页的控制台网络看请求结果