本篇主要是參照openlayers6結合geoserver利用WFS服務實作圖層新增功能(附源碼下載下傳)基礎上實作的，openlayers6通過調用geoserver釋出的地圖服務WFS來達到圖層編輯記錄的目的。與GeoServer的WFS進行基于Rest互動關鍵就在于請求參數，值得注意的是這些請求最好采用POST方法發送。查詢可以采用json，但增加，删除，修改都隻能采用XML形式Transaction
内容概覽
1.openlayers6結合geoserver利用WFS服務實作圖層編輯功能
2.源代碼demo下載下傳
效果圖如下：
- 部分核心代碼，完整的見源碼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: 2
center: [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+'</br>備注:'+properties.holder_nam+'</br><button type="button" id="editBtn">編輯</button>';
var elements = '<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>';
content.innerHTML = elements;
overlay.setPosition(coordinate);
$("#editBtn").unbind("click");
$("#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);
}
});
}
});
}
})
/*圖層編輯
*@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>';
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:Name>estate_num</wfs:Name>';
xml += '<wfs:Value>' + fieldValue1 + '</wfs:Value>';
xml += '</wfs:Property>';
xml += '<wfs:Property>';
xml += '<wfs:Name>holder_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);
//重新整理圖層
clearMap();
wmsSource.refresh();
}
function clearMap(){
//隐藏氣泡視窗
overlay.setPosition(undefined);
closer.blur();
} 幾點說明：
1.WebGIS，geoserver工作區；
2.testLayer，操作圖層名稱；
3.fid，操作圖層的預設固有屬性字段。
4.estate_num，holder_nam，操作圖層屬性字段。
圖層編輯回調函數，操作成功或者失敗，可以在網頁的控制台網絡看請求結果
完整源碼demo在此篇文章尾部，感興趣的話，可以關注一波
GIS之家作品店鋪：GIS之家作品店鋪
GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢