网站建设毕业设计中期进度报告,360未经证实的网站如何做,app开发公司哪个好,企业网站策划怎么样内容概览1.openlayers6结合geoserver利用WFS服务实现图层编辑功能2.源代码demo下载效果图如下#xff1a;本篇主要是参照openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)基础上实现的#xff0c;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: [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(featureundefined){ //隐藏气泡窗口 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.length0){ 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/brbutton typebutton ideditBtn编辑/button; var elements span名称:/spaninput typetext idestate_num value properties.estate_num //brspan备注:/spaninput typetext idholder_nam value properties.holder_nam //brbutton typebutton ideditBtn编辑/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 i0;idata.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 serviceWFS version1.0.0 xmlns:opengishttp://webgis.com xmlns:wfshttp://www.opengis.net/wfs xmlns:ogchttp://www.opengis.net/ogc xmlns:gmlhttp://www.opengis.net/gml xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd; xml wfs:Update typeNameWebGIS:testLayer; xml wfs:Property; xml wfs:Namethe_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:Nameestate_num/wfs:Name; xml wfs:Value fieldValue1 /wfs:Value; xml /wfs:Property; xml wfs:Property; xml wfs:Nameholder_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.WebGISgeoserver工作区2.testLayer操作图层名称3.fid操作图层的默认固有属性字段。4.estate_numholder_nam操作图层属性字段。图层编辑回调函数操作成功或者失败可以在网页的控制台网络看请求结果完整的源码demo下载在链接文章尾部openlayers6结合geoserver利用WFS服务实现图层编辑功能(附源码下载) 小专栏xiaozhuanlan.com对本专栏感兴趣的话可以关注一波GIS之家店铺GIS之家GIS之家源码咨询GIS之家webgis入门开发系列demo源代码咨询
