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

前言

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

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

内容概览

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

效果图如下：

本篇主要是leaflet通过调用geoserver发布的地图服务WFS来达到图层新增记录的目的。与GeoServer的WFS进行基于Rest交互关键就在于请求参数，值得注意的是这些请求最好采用POST方法发送。查询可以采用json，但增加，删除，修改都只能采用XML形式Transaction。最后利用leaflet来叠加显示在地图上展示。

• 用leaflet插件绘制图形工具draw的新增图形以及回调函数获取绘制图形空间信息，绘制工具的github地址：
  https://github.com/geoman-io/leaflet-geoman
• geoserver默认WFS服务是没有编辑操作权限的，所以需要在geoserver设置权限，允许编辑操作才行，截图如下：
  
  
  
  
• 部分核心代码：

//绘制工具draw
map.pm.addControls({
position: 'topleft',
drawCircle: false,
drawMarker:false,
drawCircleMarker:false,
drawPolyline:false,
drawRectangle:false,
cutPolygon:false,
removalMode:false
});
 
//绘制图形之前
map.on('pm:drawstart', e => {
if(geojsonLayer){
map.removeLayer(geojsonLayer);
geojsonLayer = null;
}
});
 
map.on('pm:create', e => {
//console.log(e);
geojsonLayer = e.layer;
geojsonLayer.addTo(map);
e.layer.unbindPopup();
var elements = '名称:
备注:
新增';
e.layer.on('popupopen', function(e){
$("#addBtn").click(function(){
if(geojsonLayer){
//构造polygon
var polygon = '';
var data = geojsonLayer.toGeoJSON().geometry.coordinates[0];
for(var i=0;i){
var item = data[i];
polygon += item[0] + ',' + item[1] + ' ' ;
}
polygon += data[0][0] + ',' + data[0][1];
addLayers(polygon,$("#estate_num").val(),$("#holder_nam").val(),callbackAddLayersWFSService);
}
});
});
e.layer.bindPopup(elements).openPopup(e.latlng);
});

• 图层新增函数

/*图层新增
*@method addLayers
*@param polygon 图形
*@param fieldValue1 字段1值
*@param fieldValue2 字段2值
*@return callback
*/
function addLayers(polygon,fieldValue1,fieldValue2, callback){
var xml = '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '' + polygon + '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '';
xml += '' + fieldValue1 + '';
xml += '' + fieldValue2 + '';
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);
}
})
}

几点说明：
1.xmlns:opengis="http://webgis.com"，geoserver工作区的url；

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

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