geoserver三维_cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)

//绘制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 = newCesium.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 = newCesium.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 = newCesium.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*/

functionqueryByPoint(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,

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);

}

})

}functiongetParamString(obj, existingUrl, uppercase){var params =[];for (var i inobj) {

params.push(encodeURIComponent(uppercase? i.toUpperCase() : i) + '=' +encodeURIComponent(obj[i]));

}return ((!existingUrl || existingUrl.indexOf('?') === -1) ? '?' : '&') + params.join('&');

}/** 点查图层回调函数*/

functioncallbackLastQueryWFSService(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

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();

}

}/** 绘制图形函数*/

functionloadGeojsonLayer(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);

});

}/** 清空绘制图形函数*/

functionclearGeojsonLayer(){

viewer.dataSources.removeAll();

}functionclearMap(){if(drawTool) {

drawTool.destroy();

}

clearGeojsonLayer();

}/*图层编辑

*@method editLayers

*@param polygon 图形

*@param fid 记录fid值

*@param fieldValue1 字段1值

*@param fieldValue2 字段2值

*@return callback*/

functioneditLayers(fid,polygon,fieldValue1,fieldValue2, callback){var xml = '';

xml+= '';

xml+= '';

xml+= 'the_geom';……

……}