前言
內(nèi)容概覽
效果圖如下:
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)注一波 |
|