前言
openlayers4 官網(wǎng)的 api 文檔介紹地址 openlayers4 api，里面詳細的介紹 openlayers4 各個類的介紹涧尿，還有就是在線例子：openlayers4 官網(wǎng)在線例子，這個也是學習 openlayers4 的好素材川队。
openlayers4 入門開發(fā)系列的地圖服務基于 Geoserver 發(fā)布的聚至，關于 Geoserver 方面操作的博客，可以參考以下幾篇文章：
內容概覽
1.基于 openlayers4 實現(xiàn)地圖聚合圖效果
2.源代碼 demo 下載
本篇的重點內容是利用 openlayers4 實現(xiàn)聚合圖功能单料，效果圖如下：
image
實現(xiàn)思路
- 界面設計
//聚合圖
"<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();
}
})
- 初始化以及核心代碼實現(xiàn)
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之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話点楼，可以關注一波
