openlayers4 入门开发系列之地图空间查询篇（附源码下载）

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

1.基于 openlayers4 实现地图空间查询
2.源代码 demo 下载

本篇的重点内容是利用 openlayers4 实现地图空间查询功能，效果图如下：

实现思路

• 框选工具（多边形以及矩形）

//多边形
$("#polygonButton").bind("click", function () {
DCI.SpatialQuery.clearMap();
DCI.SpatialQuery.InitState();
DCI.SpatialQuery.addInteraction("Polygon");
})
//矩形
$("#rectangleButton").bind("click", function () {
DCI.SpatialQuery.clearMap();
DCI.SpatialQuery.InitState();
DCI.SpatialQuery.addInteraction("Box");
})

addInteraction:function(value){
var geometryFunction;
switch (value) {
case "Box":
value = 'Circle';
geometryFunction = ol.interaction.Draw.createBox();
break;
case "Polygon":
value = 'Polygon';
break;
}
DCI.SpatialQuery.draw = new ol.interaction.Draw({
source: DCI.SpatialQuery.source,
type: value,
geometryFunction: geometryFunction
});
DCI.SpatialQuery.map.addInteraction(DCI.SpatialQuery.draw);
DCI.SpatialQuery.draw.on('drawend',function(evt){
DCI.SpatialQuery.clearMap();
DCI.SpatialQuery.drawEndPlot(evt.feature);
});

}

• 框选绘制完成，进行 wfs 进行空间查询

/**
* 地图点击完成后函数
* **/
drawEndPlot:function(feature){
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.intersects(bxmap.config.MapConfig.wfs.geometryName, feature.getGeometry(), bxmap.config.MapConfig.wfs.srsName)
});
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());
$("#spatial-total").html("框选查询共"+features.length+"条结果");
var innerStr = [];
for(var i=0;i<features.length;i++){
var feature = features[i];
//面取中心点
var pointGeometry=DCI.SpatialQuery.creatPointGeometry(feature.getGeometry().getExtent());//面取中心点
var attribute = {
"OBJECTID":features[i].get('OBJECTID'),
"名称":features[i].get('名称'),
"编号":features[i].get('编号'),
"类别":features[i].get('类别'),
"面积":features[i].get('面积'),
};
var feature=new ol.Feature({
geometry: pointGeometry,
attribute:attribute,
id:features[i].get('OBJECTID'),
type:"point"
});
DCI.SpatialQuery.pointLayer.getSource().addFeature(feature);

innerStr.push('<div class="left_list_li_box" id="' + features[i].get('OBJECTID') + '" onclick="DCI.SpatialQuery.locationToMap(\'' + features[i].get('OBJECTID') + '\')" >');
innerStr.push('<div class="left_list_li_box_top">');
innerStr.push('<div class="left2_box2">');
innerStr.push('<img class="list_poi_marker" style="" src="' + getRootPath() + 'Content/images/index/poiLocation.png"></img>');
innerStr.push('<div class="left_list_li1">');
innerStr.push('<p>');
innerStr.push('<a style="text-decoration:none">' + features[i].get('名称') + '</a><br/>');
innerStr.push('</p>');
innerStr.push('<p>');
innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('编号') + '</a><br/>');
innerStr.push('</p>');
innerStr.push('<p>');
innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('类别') + '</a><br/>');
innerStr.push('</p>');
innerStr.push('<p>');
innerStr.push('<a style="text-decoration:none;color:#555;">' + features[i].get('面积') + '</a><br/>');
innerStr.push('</p>');
innerStr.push('</div>');
innerStr.push('</div>')
innerStr.push('</div>');
innerStr.push('</div>');
}
$("#showLists").html(innerStr.join(''));
}
else{
$("#showLists").html("框选查询不到相关结果");
}
});
}

更多的详情见：GIS之家小专栏

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