leaflet 結合 geoserver 實現地圖空間查詢(附源碼下載)

前言

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

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

內容概覽

leaflet 結合 geoserver 實現地圖空間查詢
源代碼 demo 下載

效果圖如下：

本篇主要是 leaflet 通過調用 geoserver 發布的地圖服務 WFS，來達到地圖空間查詢的目的。具體是構造rest服務 url 參數形式來請求 WFS 服務，獲取到地圖數據源，然后利用 leaflet 來疊加顯示在地圖上展示。

利用 leaflet 插件繪制圖形工具draw的回調函數獲取繪制圖形，作為空間查詢過濾條件，繪制工具的 github 地址：
https://github.com/geoman-io/leaflet-geoman

//繪制工具draw
map.pm.addControls({
position: 'topleft',
drawMarker:false,
drawCircleMarker:false,
drawCircle: false,
drawPolyline:false,
editMode:false,
dragMode:false,
cutPolygon:false,
});
 
//繪制圖形之前
map.on('pm:drawstart', ({ workingLayer }) => {
clearGeojsonLayer();
});
 
map.on('pm:create', e => {
//console.log(e);
var polygon = null;
if(e.layer && e.layer._latlngs && e.layer._latlngs.length>0){
//構造polygon
polygon = '';
var data = e.layer._latlngs[0];
for(var i=0;i<data.length;i++){
var item = data[i];
polygon += item.lng + ',' + item.lat + ' ' ;
}
polygon += data[0].lng + ',' + data[0].lat;
}
console.log('polygon',polygon);
if(polygon){
queryByPolygon(polygon,'bs_spot_t',callbackLastQueryWFSService);
}
});

• 地圖空間查詢函數

/*空間查詢圖層
*@method queryByPolygon
*@param polygon 空間范圍
*@param typeName 圖層名稱
*@return null
*/
function queryByPolygon(polygon, typeName, callback){
var filter =
'<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
filter += '<Intersects>';
filter += '<PropertyName>geom</PropertyName>';
filter += '<gml:Polygon>';
filter += '<gml:outerBoundaryIs>';
filter += '<gml:LinearRing>';
filter += '<gml:coordinates>' + polygon + '</gml:coordinates>';
filter += '</gml:LinearRing>';
filter += '</gml:outerBoundaryIs>';
filter += '</gml:Polygon>';
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
};
……

完整demo源碼見小專欄文章尾部：GIS之家leaflet小專欄

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