Question

我正在尝试将简单的群集状态应用于我的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

我看过several examples，没有人帮我解决这个问题。我已经查看了几个堆栈溢出答案，其中最好的是关于marker clustering，但也没有帮助。

我一定错过了一些明显的东西，但我看不清楚什么？

[UPDATE]

从以下答案中获取建议，以下是编辑为正确运行的代码段（从上面开始），在将图层添加到地图后添加标记并且不包括clustering标志...... < / p>

// 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();

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

Answer 1

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

        // 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();

然后一切似乎都有效。

Answer 2

在内部向你发送类似安吉拉的邮件。

不确定为什么删除群集会产生任何影响，我认为无论如何都是正确的。

至于添加点的顺序，我似乎记得读过一些关于你的点被簇替换的事实，所以在向层添加点之后将图层添加到地图可能意味着该过程不会发生。或者其他的东西。 ;）

干杯

伊恩

OpenLayers 2.13：集群策略不起作用

2 个答案: