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之家小專欄

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