leaflet結合geoserver利用WFS服務實現圖層編輯功能(附源碼下載)

前言

leaflet 入門開發系列環境知識點了解：

• leaflet api文檔介紹，詳細介紹 leaflet 每一個類的函數以及屬性等等
• leaflet 在線例子
• leaflet 插件，leaflet 的插件庫，很是有用

內容概覽

leaflet結合geoserver利用WFS服務實現圖層編輯
源代碼demo下載

效果圖以下：

本篇主要是參照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 xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
filter += '<Intersects>';
filter += '<PropertyName>the_geom</PropertyName>';
filter += '<gml:Point>';
filter += '<gml:coordinates>' + point + '</gml:coordinates>';
filter += '</gml:Point>';
filter += '</Intersects>';
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 = '<span>名稱:</span><input type="text" id="estate_num" value = "'+properties.estate_num+'" /></br><span>備註:</span><input type="text" id="holder_nam" value = "'+properties.holder_nam+'" /></br><button type="button" id="editBtn">編輯</button>';
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<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);
}
});
}, 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 = '<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">';
……

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

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