openlayerLineString追加坐标 openlayers 标注

转载

游侠小影 2024-04-14 15:54:51

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

其设计目的是为了减少当前视图下加载标注点的数量，提升客户端渲染速度。因为如果在地图上添加很多标注点，当地图缩放到小级别（即大分辨率）时会出现标注重叠的现象，既不美观，渲染效率也会受到影响。此时，可以根据地图缩放级数（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的关键参数如下：