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 = '<span>名稱:</span><input type="text" id="estate_num" /></br><span>備注:</span><input type="text" id="holder_nam" /></br><button type="button" id="addBtn">新增</button>';
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<data.length;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 = '<wfs:Transaction service="WFS" version="1.0.0" xmlns:opengis="http://webgis.com" xmlns:wfs="http://www.opengis.net/wfs" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd">';
xml += '<wfs:Insert handle="WebGIS">';
xml += '<opengis:testLayer>';
xml += '<opengis:the_geom>';
xml += '<gml:MultiPolygon srsName="EPSG:4326">';
xml += '<gml:polygonMember>';
xml += '<gml:Polygon>';
xml += '<gml:outerBoundaryIs>';
xml += '<gml:LinearRing>';
xml += '<gml:coordinates decimal="." cs="," ts=" ">' + polygon + '</gml:coordinates>';
xml += '</gml:LinearRing>';
xml += '</gml:outerBoundaryIs>';
xml += '</gml:Polygon>';
xml += '</gml:polygonMember>';
xml += '</gml:MultiPolygon>';
xml += '</opengis:the_geom>';
xml += '<opengis:estate_num>' + fieldValue1 + '</opengis:estate_num>';
xml += '<opengis:holder_nam>' + fieldValue2 + '</opengis:holder_nam>';
xml += '</opengis:testLayer>';
xml += '</wfs:Insert>';
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);
}
})
}

幾點說明：
1.xmlns:opengis="http://webgis.com"，geoserver工作區的url；

完整demo源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波