OpenLayers 2.13:集群策略不起作用

OpenLayers 2.13: clustering strategy is not working

本文关键字：策略 不起作用 OpenLayers      更新时间：2023-09-26

我正试图将一个简单的集群状态应用于我的OpenLayers v2.13映射，但它不起作用。

到目前为止，这是我的代码，它都正确加载，但地图上的随机点没有聚集，它们只是可怕地重叠。。。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta charset="utf-8">
        <title>OpenLayers 2.13.x Clustered Markers</title>
        <script src="../OpenLayers.js"></script>
    </head>
    <body onload="run()" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
        <div id='map' style="width: 100%; height: 100%">
        </div>
        <script>
                function run(){
                    // create the map
                    var map = new OpenLayers.Map("map");
                    // add a google maps layer to the map
                    var layer = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0", {
                        layers: "basic"
                    });
                    map.addLayers([layer]);
                    // set up cluster strategy and vector layer
                    var strategy = new OpenLayers.Strategy.Cluster({
                        distance: 15,
                        clustering: true
                    });
                    var markersLayer = new OpenLayers.Layer.Vector("Clustered markers", {strategies: [strategy]});

                    // create and add all markers randomly
                    var markers = [];
                    for (var i = 0; i < 700; i++) {
                        var r1 = Math.random();
                        var r2 = Math.random();
                        var r3 = Math.random();
                        var r4 = Math.random();
                        var px = r1 * 180 * ((r2 < 0.5) ? -1 : 1); 
                        var py = r3 * 90 * ((r4 < 0.5) ? -1 : 1);
                        var p = new OpenLayers.Geometry.Point(px, py);
                        var clazz = (i % 10 === 0) ? 4 : Math.ceil(r4 * 3);
                        var f = new OpenLayers.Feature.Vector(p, {clazz: clazz});
                        markers.push(f);
                    }
                    markersLayer.addFeatures(markers);
                    // add markers layer to the map
                    map.addLayer(markersLayer);
                    map.zoomToMaxExtent();
                }
            </script>
    </body>
</html>

注意：OpenLayers在我的机器上是本地的，版本是2.13.1

我看了几个例子，没有一个能帮助我解决这个问题。我看过几个堆栈溢出的答案，其中最好的是关于标记聚类，但也没有帮助。

我一定错过了什么显而易见的东西，但我看不见是什么？

[更新]

根据以下答案的建议，以下是经过编辑以正确运行的代码片段（来自上面），在图层添加到地图后添加标记，不包括clustering标志。。。

// set up cluster strategy and vector layer
var strategy = new OpenLayers.Strategy.Cluster({
    distance: 15 // <-- removed clustering flag
});
var markersLayer = new OpenLayers.Layer.Vector("Clustered markers", {strategies: [strategy]});
// add markers layer to the map
map.addLayer(markersLayer); // <-- adding layer before adding features
// create and add all markers randomly
var markers = [];
for (var i = 0; i < 700; i++) {
    var r1 = Math.random();
    var r2 = Math.random();
    var r3 = Math.random();
    var r4 = Math.random();
    var px = r1 * 180 * ((r2 < 0.5) ? -1 : 1); 
    var py = r3 * 90 * ((r4 < 0.5) ? -1 : 1);
    var p = new OpenLayers.Geometry.Point(px, py);
    var clazz = (i % 10 === 0) ? 4 : Math.ceil(r4 * 3);
    var f = new OpenLayers.Feature.Vector(p, {clazz: clazz});
    markers.push(f);
}
markersLayer.addFeatures(markers); // <-- now can add features
// zoom to extent
map.zoomToMaxExtent();

这看起来可能是一个很好的做法，就是确保在添加/删除功能之前向地图添加一个层。

我从集群策略选项中删除了"集群"

        // set up cluster strategy and vector layer
        var strategy = new OpenLayers.Strategy.Cluster({
            distance: 15
        });

然后在我将图层添加到地图后添加标记

        // add markers layer to the map
        map.addLayer(markersLayer);
        markersLayer.addFeatures(markers);
        map.zoomToMaxExtent();

然后一切似乎都奏效了。

内部以类似Angela的方式发送给您。

不知道为什么删除集群会有任何影响，我认为默认情况下是这样。

至于添加点的顺序，我似乎记得读过一些关于你的点被簇取代的事实，所以在将点添加到层之后添加层到地图可能意味着这个过程不会发生。或者其他什么。）

干杯

Ian

相关文章：