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

前言

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

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

• leaflet 在线例子

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

内容概览

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

效果图如下：

本篇主要是 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./ogc" xmlns:gml="http://www./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小专栏

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