openlayers6結合geoserver利用WFS服務實現圖層刪除功能(附源碼下載)

內容概覽

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: [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 elements = '名稱:'+properties.estate_num+'</br>備註:'+properties.holder_nam;
elements += '<button type="button" id="deleteBtn">刪除</button>';
content.innerHTML = elements;
overlay.setPosition(coordinate);
setTimeout(function () {
$("#deleteBtn").unbind("click");
$("#deleteBtn").click(function(){
console.log('刪除按鈕點擊事件');
if(id)
{
deleteLayerRecord(id,callbackDeleteLayersWFSService);
}
});
}, 500)
}
});
}
 
})
 
/*圖層刪除記錄
*@method deleteLayerRecord
*@param fid 記錄fid值
*@return callback
*/
function deleteLayerRecord(fid, callback){
var xml = '<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.0.0" 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">';
……

更多詳情見下面連接文章：

小專欄此文章

文章提供源碼，對本專欄感興趣的話，能夠關注一波