cesium結合geoserver利用WFS服務實現圖層編輯(附源碼下載)

時間 2020-05-09

標籤 cesium 結合 geoserver 利用 wfs 服務實現編輯源碼下載简体版

原文原文鏈接

前言

cesium 官網的api文檔介紹地址cesium官網api，裏面詳細的介紹 cesium 各個類的介紹，還有就是在線例子：cesium 官網在線例子，這個也是學習 cesium 的好素材。git

內容概覽

1.cesium結合geoserver利用WFS服務實現圖層編輯功能
2.源代碼demo下載web

效果圖以下：
ajax

本篇主要是在上一篇cesium結合geoserver利用WFS服務實現圖層新增(附源碼下載)基礎上實現的，cesium經過調用geoserver發佈的地圖服務WFS來達到圖層編輯記錄的目的。與GeoServer的WFS進行基於Rest交互關鍵就在於請求參數，值得注意的是這些請求最好採用POST方法發送。查詢能夠採用json，但增長，刪除，修改都只能採用XML形式Transactionjson

部分核心代碼，完整的見源碼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 xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
filter += '<Intersects>';
filter += '<PropertyName>the_geom</PropertyName>';
filter += '<gml:Point>';
filter += '<gml:coordinates>' + point + '</gml:coordinates>';
filter += '</gml:Point>';
filter += '</Intersects>';
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+'</br>備註:'+properties.holder_nam;
var content = '<span>名稱:</span><input type="text" id="estate_num" value = "'+properties.estate_num+'" /></br><span>備註:</span><input type="text" id="holder_nam" value = "'+properties.holder_nam+'" /></br><button type="button" id="editBtn">編輯</button>';
$("#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="http://webgis.com" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">';
xml += '<wfs:Update typeName="WebGIS:testLayer">';
xml += '<wfs:Property>';
xml += '<wfs:Name>the_geom</wfs:Name>';
……
…… 

}