本篇主要是参照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在此篇文章尾部,感兴趣的话,可以关注一波