前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：
内容概览
1.基于 openlayers4 实现地图属性查询
2.源代码 demo 下载
本篇的重点内容是利用 openlayers4 实现地图属性查询功能，效果图如下：
image
image
实现思路
- 模糊查询点击事件
//模糊查询
$("#swatchQuery").bind("click", function () {
var keyword = $("#skeyword").val();
if (keyword == "" || keyword == undefined) {
alert("请输入要查找的内容!");
return;
}
DCI.SpatialQuery.queryByAttribute(keyword);
});
- 地图属性查询核心函数 queryByAttribute
/**根据属性查询地图
*@attribute
**/
queryByAttribute:function(keyword){
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: bxmap.config.MapConfig.wfs.srsName,
featureNS: bxmap.config.MapConfig.wfs.featureNS,
featurePrefix: bxmap.config.MapConfig.wfs.featurePrefix,
featureTypes: bxmap.config.MapConfig.wfs.featureTypes,
outputFormat: bxmap.config.MapConfig.wfs.outputFormat,
filter:ol.format.filter.like(bxmap.config.MapConfig.wfs.attrName, '*'+keyword+'*')//todo 条件查询过滤
});
fetch(bxmap.config.MapConfig.geoserver_url+bxmap.config.MapConfig.wfs.url, {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest)
}).then(function(response) {
return response.json();
}).then(function(json) {
var features = new ol.format.GeoJSON().readFeatures(json);
if(features && features.length>0){
if(DCI.SpatialQuery.spatialLayer)
DCI.SpatialQuery.spatialLayer.getSource().clear();
if(DCI.SpatialQuery.pointLayer)
DCI.SpatialQuery.pointLayer.getSource().clear();
DCI.SpatialQuery.spatialSource.addFeatures(features);
DCI.SpatialQuery.map.getView().fit(DCI.SpatialQuery.spatialSource.getExtent());
……
更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波
