leaflet 結合 geoserver 實作地圖屬性查詢(附源碼下載下傳)

内容概覽

leaflet 結合 geoserver 實作地圖屬性查詢

源代碼 demo 下載下傳

前言

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

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

效果圖如下：

本篇主要是 leaflet 通過調用 geoserver 釋出的地圖服務 WFS，來達到地圖屬性查詢的目的。具體是構造rest服務 url 參數形式來請求 WFS 服務，擷取到地圖資料源，然後利用 leaflet 來疊加顯示在地圖上展示。

• 地圖屬性查詢函數

var geoserverUrl = 'http://localhost:8080/geoserver/ZKYGIS';
/*屬性查詢圖層
*@method queryByProperty
*@param propertyValue 屬性值
*@param propertyName 屬性名稱
*@param typeName 圖層名稱
*@return null
*/
function queryByProperty(propertyValue, propertyName, typeName, callback){
var filter =
'<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">';
filter += '<PropertyIsLike wildCard="*" singleChar="#" escapeChar="!">';
filter += '<PropertyName>' + propertyName + '</PropertyName>';
filter += '<Literal>*'+propertyValue+'*</Literal>';
filter += '</PropertyIsLike>';
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);
……      

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

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

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢