openlayers聚合打点并显示多种图标
背景:
公司项目中存在一个业务场景,在地图上显示多种图标,但是由于坐标太多就不能使用简单的打点的做法,就希望使用聚合打点效果,首先我们想到是写一个方法有几种图标就执行几次,将图标名称设置为变量就可以达到地图上显示多种图标的效果,但是随后我们发现清除或者隐藏就变成了一个问题。我尝试过使用map.removeLayer(basicInfo.enterprise_cluster_laye)移除这个图层或者basicInfo.enterprise_cluster_layer.setVisible(flag)隐藏这个图层。
markerCluster(data1,name1,1);
markerCluster(data2,name2,2);
markerCluster(data3,name3,3);
markerCluster(data4,name4,4);
markerCluster(data5,name5,5);
markerCluster(data6,name6,6);
markerCluster(data7,name7,7);
function markerCluster(arr,name,idx){
markerArr = [];
// 聚合打点图层
var source = 'source' + idx;
basicInfo[source] = new ol.source.Cluster({
distance: parseInt(100, 10), // 标注元素之间的间距,单位是像素。
source: new ol.source.Vector({
features: []
})
});
basicInfo.enterprise_cluster_layer = new ol.layer.Vector({
source: basicInfo[source],
style: new ol.style.Style({
image: new ol.style.Icon({
scale: 0.5,
src: '/vendor/images/dassp3/cydt/enterprise_'+ name +'.png',
imgSize: [200, 200]
})
}),
zIndex: 7
});
map.addLayer(basicInfo.enterprise_cluster_layer);
arr.forEach(function(item) {
var marker = new ol.Feature({
geometry: new ol.geom.Point(item.coordinates)
});
marker.setProperties({type: 'point', companyName: item.name});
markerArr.push(marker);
});
basicInfo[source].getSource().addFeatures(markerArr);
}
},
但实际情况是当图层名称一致时候他只会清除最底层的那个图层,并没达到完全隐藏或者移除图层的效果。
由于我是懒人,我确实不想写七个图层再一个一个去隐藏,这样太麻烦了。我就去官方看文档,我就发现了一个map.getLayers().array_这个方法,它可以获取到map容器中有多少个图层。
map.getLayers().array_
因为我们再设置图层的时候可以设置zIndex参数可以再里面找到
这个时候事情就很简单了
我们将所有需要展示的图标的图层放在同于层级上面,用zIndex当中判断条件,我们遍历出对应的图层就可以设置隐藏或者移除啦。
var arr = this.map.getLayers().array_;
console.log(arr,'111')
for(var i = 0 ;i<arr.length;i++){
if(arr[i].values_.zIndex==6 ||arr[i].values_.zIndex==7 ){
console.log(i,'222')
arr[i].setVisible(false)
// map.removeLayer(arr[i])
// arr[i].values_.source.clear()
}
}
// arr[i].values_.source.clear()
}
}
**如果有不懂,欢迎私聊**