前言
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
//繪制工具drawmap.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){//構造polygonpolygon = '';var data = https://www.cnblogs.com/giserhome/p/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小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2293.html
標籤：GIS