8a35c650d1990ecebc1c477b4c922132
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){

top Created with Sketch.