cesium and geoserver use WFS service to realize layer editing (with source code download)


Address of api documents on cesium official website cesium official website api , which details the introduction of each class of cesium, as well as the online example: cesium official website online example This is also a good material for learning cesium.

Content overview

1.cesium and geoserver use WFS service to realize layer editing function
2. Download the source code demo

The renderings are as follows:

This article is mainly in the previous one cesium and geoserver use WFS service to add new layers (download source code) Based on this, cesium uses WFS, a map service published by GeoServer, to edit and record layers. The key to the Rest based interaction with GeoServer's WFS is the request parameters. It is worth noting that these requests are best sent by POST method. json can be used for query, but Transaction in XML form can only be used for addition, deletion and modification

  • Part of the core code, see the source demo download for the complete code
//Draw geojson layer style
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
//Load geoserver wms service
var wms = new Cesium.WebMapServiceImageryProvider({
url: geoserverUrl+'/wms',
layers: 'WebGIS:testLayer',
parameters: {
service : 'WMS',
format: 'image/png',
transparent: true,
viewer._cesiumWidget._creditContainer.style.display = "none";
viewer.scene.globe.enableLighting = false;
//viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.scene.globe.showGroundAtmosphere = false;
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) {
//Convert the 2D coordinates of the mouse to the 3D coordinates of the corresponding ellipsoid through the specified ellipsoid or the corresponding coordinate system of the map
cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);
if (cartesian) {
//Converting Cartesian coordinates to geographic coordinates
var cartographic = ellipsoid.cartesianToCartographic(cartesian);
//Decimal representation of radians to degrees
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
var point = longitudeString + ',' + latitudeString;
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
/*Dot map layer
*@method queryByPoint
*@param point Spot check
*@param typeName Layer Name
*@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);
url: geojsonUrl,
async: true,
dataType: 'json',
success(result) {
error(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('&');
* Click layer callback function
function callbackLastQueryWFSService(data){
if(data && data.features.length>0){
//Bubble window display
var properties = data.features[0].properties;
var id = data.features[0].id;
var geometry = data.features[0].geometry;
//var content = 'Name:'+properties.estate_num+'</br>Remarks:'+properties.holder_nam;
var content = '<span>Name:</span><input type="text" id="estate_num" value = "'+properties.estate_num+'" /></br><span>Remarks:</span><input type="text" id="holder_nam" value = "'+properties.holder_nam+'" /></br><button type="button" id="editBtn">edit</button>';
//console.log('Edit button click event');
//structure 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];
//Only the attribute information is edited. The default graphic information is the same. If you are interested, you can edit the graphic change information by yourself. Here, the graphic parameters are reserved to transmit values
* Drawing graph function
function loadGeojsonLayer(geojson){
var promise = Cesium.GeoJsonDataSource.load(geojson,geoJsonStyle);
promise.then(function(dataSource) {
* Empty drawing function
function clearGeojsonLayer(){
function clearMap(){
if (drawTool) {
/*Layer editing
*@method editLayers
*@param polygon Graphical
*@param fid Record fid value
*@param fieldValue1 Field 1 value
*@param fieldValue2 Field 2 value
*@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>';

Several notes:
1.WebGIS, geoserver work area;
2.testLayer, operation layer name;
3.fid, the default intrinsic property field of the operation layer.
4. Estate, holder, and operate layer attribute fields.
Layer edit callback function, operation succeeded or failed, you can view the request result in the console network of the web page

See the end of the column for the complete demo source code: Small column

Source code download is provided at the end of the article. If you are interested in this column, you can pay attention to a wave

Tags: xml REST JSON Attribute

Posted on Sun, 05 Apr 2020 22:57:07 -0700 by pocobueno1388