openlayers6结合geoserver利用WFS服务实现图层编辑功能(附源码下载)

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

内容概览

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

效果图如下：

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

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

//叠加geoserver发布的wms图层var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';var wmsSource = new TileWMS({
url: geoserverUrl+'/wms',
params: {'LAYERS': 'WebGIS:testLayer', 'TILED': true},
serverType: 'geoserver',
crossOrigin: 'anonymous'}); 
var wmsLayer = new TileLayer({
source: wmsSource
}); 
 
var view = new View({
projection: 'EPSG:4326',//center: [0, 0],//zoom: 2center: [113.90271877, 22.95186415],
zoom: 13}) 
var map = new Map({
target: 'map',
layers: [new TileLayer({
source: new XYZ({//url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'})
}),
wmsLayer
],
overlays: [overlay],
view: view
}); 
//监听地图鼠标事件map.on('singleclick',function(e) {if (e.dragging) {return;
}var feature =map.forEachFeatureAtPixel(e.pixel,function(feature) {return feature;
});//console.log('feature',feature);//console.log('e',e);
 if(feature==undefined){//隐藏气泡窗口overlay.setPosition(undefined);
closer.blur();
}var viewResolution = /** @type {number} */ (view.getResolution());var url = wmsSource.getFeatureInfoUrl(
e.coordinate, viewResolution, 'EPSG:4326',
{'INFO_FORMAT': 'application/json'});if (url) {
fetch(url)
.then(function (response) { return response.json(); })
.then(function (json) {//document.getElementById('info').innerHTML = html;console.log('json',json);var coordinate = e.coordinate;if(json.features.length>0){var properties = json.features[0].properties;var id = json.features[0].id;var geometry = json.features[0].geometry;//var elements = '名称:'+properties.estate_num+'备注:'+properties.holder_nam+'编辑';var elements = '名称:备注:编辑';
content.innerHTML = elements;
overlay.setPosition(coordinate);
$("#editBtn").unbind("click");
$("#editBtn").click(function(){//console.log('编辑按钮点击事件');if(id)
{//构造polygonvar 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);
}
});
}
});
}
 
}) 
/*图层编辑
*@method editLayers
*@param polygon 图形
*@param fid 记录fid值
*@param fieldValue1 字段1值
*@param fieldValue2 字段2值
*@return callback*/function editLayers(fid,polygon,fieldValue1,fieldValue2, callback){var xml = '';
xml += '';
xml += '';
xml += 'the_geom';
xml += '';
xml += '';
xml += '' + polygon + '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += 'estate_num';
xml += '' + fieldValue1 + '';
xml += '';
xml += '';
xml += 'holder_nam';
xml += '' + fieldValue2 + '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
 
 
 
$.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);//刷新图层clearMap();
wmsSource.refresh();
} 
function clearMap(){//隐藏气泡窗口overlay.setPosition(undefined);
closer.blur();
}

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

 

完整源码demo在此篇文章尾部，感兴趣的话，可以关注一波