日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

leaflet結(jié)合geoserver利用WFS服務(wù)實現(xiàn)圖層編輯功能(附源碼下載)

 頭號碼甲 2021-11-25

前言

leaflet 入門開發(fā)系列環(huán)境知識點了解:

內(nèi)容概覽

leaflet結(jié)合geoserver利用WFS服務(wù)實現(xiàn)圖層編輯
源代碼demo下載

效果圖如下:

本篇主要是參照leaflet結(jié)合geoserver利用WFS服務(wù)實現(xiàn)圖層新增功能(附源碼下載)基礎(chǔ)上實現(xiàn)的,leaflet通過調(diào)用geoserver發(fā)布的地圖服務(wù)WFS來達到圖層編輯記錄的目的。與GeoServer的WFS進行基于Rest交互關(guān)鍵就在于請求參數(shù),值得注意的是這些請求最好采用POST方法發(fā)送。查詢可以采用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./ogc" xmlns:gml="http://www./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);
}
})
}/** 點查圖層回調(diào)函數(shù)*/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)
{//構(gòu)造polygonvar 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];//只編輯屬性信息,默認圖形信息不變,感興趣的,讀者你們可自行編輯圖形變化信息,這里預留圖形參數(shù)傳值了的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://" xmlns:wfs="http://www./wfs" xmlns:ogc="http://www./ogc" xmlns:gml="http://www./gml" xmlns:xsi="http://www./2001/XMLSchema-instance" xsi:schemaLocation="http://www./wfs http://schemas./wfs/1.0.0/WFS-basic.xsd">';
……

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

文章尾部提供源代碼下載,對本專欄感興趣的話,可以關(guān)注一波

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多