cesium结合geoserver利用WFS服务实现图层编辑

yovngfun
240 阅读2分钟

内容概览

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

效果图如下：

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

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

    //绘制geojson图层样式
var geoJsonStyle = {
  stroke: Cesium.Color.YELLOW,
  strokeWidth: 3,
  fill: Cesium.Color.YELLOW.withAlpha(0.1)
};
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 geometry = data.features[0].geometry; //var content = '名称:'+properties.estate_num+'
      备注:'+properties.holder_nam; var content = '名称:
      备注:
      编辑'; ("#infowindow").show(); ("#infowindow").empty(); ("#infowindow").append(content); ("#editBtn").click(function(){ //console.log('编辑按钮点击事件'); if(id) { //构造polygon var polygon = ''; var data = geometry.coordinates[0][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]; //只编辑属性信息，默认图形信息不变，感兴趣的，读者你们可自行编辑图形变化信息，这里预留图形参数传值了的 editLayers(id,polygon,("#estate_num").val(),("#holder_nam").val(),callbackEditLayersWFSService); } }); } else{ //clearMap(); $("#infowindow").hide(); } } /
    • 绘制图形函数 / function loadGeojsonLayer(geojson){ var promise = Cesium.GeoJsonDataSource.load(geojson,geoJsonStyle); promise.then(function(dataSource) { viewer.dataSources.add(dataSource); //viewer.zoomTo(dataSource); }).otherwise(function(error){ window.alert(error); }); } /
    • 清空绘制图形函数 */ function clearGeojsonLayer(){ viewer.dataSources.removeAll(); }

    function clearMap(){ if (drawTool) { drawTool.destroy(); } clearGeojsonLayer(); } /*图层编辑 *@method editLayers *@param polygon 图形 *@param fid 记录fid值 *@param fieldValue1 字段1值 *@param fieldValue2 字段2值 *@return callback */ function editLayers(fid,polygon,fieldValue1,fieldValue2, callback){ var xml = '<wfs:Transaction service="WFS" version="1.0.0" xmlns:opengis="webgis.com" xmlns:wfs="www.opengis.net/wfs" xmlns:ogc="www.opengis.net/ogc" xmlns:gml="www.opengis.net/gml" xmlns:xsi="www.w3.org/2001/XMLSch…" xsi:schemaLocation="www.opengis.net/wfs schemas.opengis.net/wfs/1.0.0/W…'; xml += '<wfs:Update typeName="WebGIS:testLayer">'; xml += 'wfs:Property'; xml += 'wfs:Namethe_geom</wfs:Name>'; xml += 'wfs:Value'; xml += 'gml:LineString'; xml += '<gml:coordinates decimal="." cs="," ts=" ">' + polygon + '</gml:coordinates>'; xml += '</gml:LineString>'; xml += '</wfs:Value>'; xml += '</wfs:Property>'; xml += 'wfs:Property'; xml += 'wfs:Nameestate_num</wfs:Name>'; xml += 'wfs:Value' + fieldValue1 + '</wfs:Value>'; xml += '</wfs:Property>'; xml += 'wfs:Property'; xml += 'wfs:Nameholder_nam</wfs:Name>'; xml += 'wfs:Value' + fieldValue2 + '</wfs:Value>'; xml += '</wfs:Property>'; xml += 'ogc:Filter'; xml += '<ogc:FeatureId fid="' + fid + '"/>'; xml += '</ogc:Filter>'; xml += '</wfs:Update>'; 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);
    }
})

    }

    /*

    • 图层编辑回调函数 */ function callbackEditLayersWFSService(data){ console.log('data',data); //暂时刷新页面形式刷新图层 window.location.reload(); }

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

link==>

avatar
文章
阅读
粉丝