聚合标注,是指在不同地图分辨率下,通过聚合方式展现标注点的一种方法。

    其设计目的是为了减少当前视图下加载标注点的数量,提升客户端渲染速度。因为如果在地图上添加很多标注点,当地图缩放到小级别(即大分辨率)时会出现标注重叠的现象,既不美观,渲染效率也会受到影响。此时,可以根据地图缩放级数(zoom)的大小,将当前视图的标注点进行聚合显示。

    OpenLayers也考虑到加载大数据量标注点的情况,提供了相应的聚合标注功能,以提升显示速度,增强用户体验。OpenLayers封装了支持聚合的矢量要素数据源(ol.source.Cluster),通过此数据源实现矢量要素的聚合功能。

    下面的示例模拟加载10000个随机矢量点要素,使用ol.source.Cluster数据源,实现矢量要素聚合显示的功能。

代码如下:

<body>
    <input type="radio" id="addFeatures" name="cluster" />添加聚合标注
    <input type="radio" id="removeFeatures" name="cluster" />移除聚合标注
    <div id="map"></div>
 
    <script>
        var map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 3
            })
        });
 
        //此示例创建10000个要素
        var count = 10000;
        var features = new Array(count);
        var e = 4500000;
        for(var i = 0; i < count; i++){
            var coordinates = [2*e*Math.random()-e, 2*e*Math.random()-e];
            features[i] = new ol.Feature(
                new ol.geom.Point(coordinates)
            );
        }
        //矢量要素数据源
        var source = new ol.source.Vector({
            features: features
        });
        //聚合标注数据源
        var clusterSource = new ol.source.Cluster({
            distance: 40,               //聚合的距离参数,即当标注间距离小于此值时进行聚合,单位是像素
            source: source              //聚合的数据源,即矢量要素数据源对象
        });
        //加载聚合标注的矢量图层
        var styleCache = {};                    //用于保存特定数量的聚合群的要素样式
        var clusters = new ol.layer.Vector({
            source: clusterSource,
            style: function (feature, resolution){
                var size = feature.get('features').length;          //获取该要素所在聚合群的要素数量
                var style = styleCache[size];
                console.log(size);
                if(!style){
                    style = [
                        new ol.style.Style({
                            image: new ol.style.Circle({
                                radius: 10,
                                stroke: new ol.style.Stroke({
                                    color: '#fff'
                                }),
                                fill: new ol.style.Fill({
                                    color: '#3399CC'
                                })
                            }),
                            text: new ol.style.Text({
                                text: size.toString(),
                                fill: new ol.style.Fill({
                                    color: '#fff'
                                })
                            })
                        })
                    ];
                    styleCache[size] = style;
                }
                return style;
            }
        });
        map.addLayer(clusters);
 
        //添加聚合标注
        document.getElementById('addFeatures').onclick = function(){
            //当前聚合标注数据源中的要素
            var currentFeatures = clusterSource.getSource().getFeatures();
            //如果聚合标注数据源中没有要素,则重新添加要素
            if(currentFeatures.length == 0){
                clusterSource.getSource().addFeatures(features);
                clusters.setSource(clusterSource);
                map.addLayer(clusters);
            }
        }
        //移除聚合标注
        document.getElementById('removeFeatures').onclick = function(){
            clusterSource.getSource().clear();        //移除聚合标注数据源中的所有要素
            map.removeLayer(clusters);              //移除标注图层
        }
    </script>
</body>

 

ol.source.Cluster的关键参数如下:

  •     source:聚合要素的数据源,本示例设置的是加载包含10000个随机矢量要素的矢量数据源对象。
  •     distance:聚合距离参数,当标注间距离小于此值时进行聚合,本示例设置的是40个像素。