B50af84ec57a1d076f088d0329491619
cesium结合geoserver利用WFS服务实现图层删除(附源码下载)

前言

cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材。

内容概览

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 += ''; filter += '' + point + ''; filter += ''; filter += ''; filter += '';
    var urlString = geoserverUrl + '/ows';
    var param = {
    service: 'WFS',
    version: '1.0.0',
    request: 'GetFeature',
    typeName: typeName,

top Created with Sketch.