openlayers4 入門開發系列之聚合圖篇（附源碼下載）

前言

openlayers4 官網的 api 文檔介紹地址 openlayers4 api，里面詳細的介紹 openlayers4 各個類的介紹，還有就是在線例子：openlayers4 官網在線例子，這個也是學習 openlayers4 的好素材。

openlayers4 入門開發系列的地圖服務基於 Geoserver 發布的，關於 Geoserver 方面操作的博客，可以參考以下幾篇文章：

• geoserver 安裝部署步驟
• geoserver 發布地圖服務 WMS
• geoserver 發布地圖服務 WMTS
• geoserver 集成以及部署 arcgis server 瓦片數據

內容概覽

1.基於 openlayers4 實現地圖聚合圖效果
2.源代碼 demo 下載

本篇的重點內容是利用 openlayers4 實現聚合圖功能，效果圖如下：

實現思路

• 界面設計

//聚合圖
"<div style='height:25px;background:#30A4D5;margin-top:25px;width: 98%;margin-left: 3px;'>" +
"<span style='margin-left:5px;font-size: 13px;color:white;'>聚合圖</span>" +
"</div>" +
'<div id="tool-ol-ClusterLayer" style="padding:5px;">' +
'<div style="float:left;">' +
'<input type="checkbox" name="tool-ol-ClusterLayer" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +
'<label style="font-weight: normal;vertical-align: middle;margin: auto;">聚合圖</label>' +
'</div>' +
'</div>'

• 點擊事件

//加載聚合圖
$("#tool-ol-ClusterLayer input").bind("click", function () {
if (this.checked) {
if(!bxmap.olClusterLayer.isLoad){
bxmap.olClusterLayer.Init(bmap);
}
else{
bxmap.olClusterLayer.showClusterLayer();
}
}
else {
bxmap.olClusterLayer.hideClusterLayer();
}
})

• 初始化以及核心代碼實現

var bxmap = bxmap || {};
bxmap.olClusterLayer = {
map:null,
isLoad:false,
layer: null,//聚合圖圖層
originalStyle:null,//聚合原始樣式
selectStyleFunction:null,
Init:function(bmap){
//加載聚合圖
this.map = bmap.getMap();
this.isLoad = true;
//設置原始樣式
this.originalStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
})
});
this.initClusterLayer(qy);
},
……

更多的詳情見：GIS之家小專欄

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