前言
内容概览
本篇的重点内容是利用 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);
},
……