openlayers聚合打点并显示多种图标

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