leaflet 结合 geoserver 实现地图属性查询(附源码下载)

leaflet 入门开发系列环境知识点了解：

leaflet api文档介绍，详细介绍 leaflet 每个类的函数以及属性等等

leaflet 在线例子

leaflet 插件，leaflet 的插件库，非常有用

内容概览

leaflet 结合 geoserver 实现地图属性查询
源代码 demo 下载

效果图如下：
leaflet 结合 geoserver 实现地图属性查询(附源码下载)

本篇主要是 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小专栏

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波