leaflet结合geoserver利用WFS服务实现图层编辑功能(附源码下载)

前言

leaflet 入门开发系列环境知识点了解:

  • leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
  • leaflet 在线例子
  • leaflet 插件,leaflet 的插件库,非常有用

内容概览

leaflet结合geoserver利用WFS服务实现图层编辑
源代码demo下载

效果图如下:
leaflet结合geoserver利用WFS服务实现图层编辑功能(附源码下载)_第1张图片

leaflet结合geoserver利用WFS服务实现图层编辑功能(附源码下载)_第2张图片

本篇主要是参照leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)基础上实现的,leaflet通过调用geoserver发布的地图服务WFS来达到图层编辑记录的目的。与GeoServer的WFS进行基于Rest交互关键就在于请求参数,值得注意的是这些请求最好采用POST方法发送。查询可以采用json,但增加,删除,修改都只能采用XML形式Transaction

  • 部分核心代码,完整的见源码demo下载
var geoserverUrl = 'http://localhost:8080/geoserver/WebGIS';
/*
* 地图点击事件
*/
function onClickMap(e){
//console.log('地图点击事件',e);
latlng = e.latlng;
var point = e.latlng.lng+','+e.latlng.lat;
queryByPoint(point,'testLayer',callbackLastQueryWFSService);
}
 
/*点查图层
*@method queryByPoint
*@param point 点查
*@param typeName 图层名称
*@return null
*/
function queryByPoint(point, typeName, callback){
var filter =
'';
filter += '';
filter += 'the_geom';
filter += '';
filter += '' + point + '';
filter += '';
filter += '';
filter += '';
var urlString = geoserverUrl + '/ows';
var param = {
service: 'WFS',
version: '1.0.0',
request: 'GetFeature',
typeName: typeName,
outputFormat: 'application/json',
filter: filter
};
var geojsonUrl = urlString + L.Util.getParamString(param, urlString);
$.ajax({
url: geojsonUrl,
async: true,
type:'GET',
dataType: 'json',
success(result) {
callback(result);
},
error(err) {
console.log(err);
}
})
}
/*
* 点查图层回调函数
*/
function callbackLastQueryWFSService(data){
console.log('data',data);
if (data && data.features.length > 0) {
//点击高亮图层
clearGeojsonLayer();
loadGeojsonLayer(data);
 
var properties = data.features[0].properties;
var id = data.features[0].id;
var geometry = data.features[0].geometry;
var elements = '名称:
备注:
'; map.openPopup(elements,latlng); setTimeout(function () { $("#editBtn").unbind("click"); $("#editBtn").click(function(){ //console.log('编辑按钮点击事件'); if(id) { //构造polygon var polygon = ''; var data = geometry.coordinates[0][0]; for(var i=0;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); } }); }, 500) } else{ clearGeojsonLayer(); } } /*图层编辑 *@method editLayers *@param polygon 图形 *@param fid 记录fid值 *@param fieldValue1 字段1值 *@param fieldValue2 字段2值 *@return callback */ function editLayers(fid,polygon,fieldValue1,fieldValue2, callback){ var xml = ''; ……

完整demo源码见小专栏文章尾部:小专栏

文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

你可能感兴趣的:(leaflet结合geoserver利用WFS服务实现图层编辑功能(附源码下载))