javascript - 在 markercluster 组中使用 Leaflet 实时图层

Question

我正在使用 Leaflet结合 realtime和 markercluster插件以显示标记，在 map 上实时更新。这些插件彼此独立工作，但当我想使用 markercluster 功能对实时层进行聚类时，问题就出现了。

实时层的代码示例，我在其中将 json 转换为标记，分配自定义图标并应用一些 onEachFeature 函数:

realtimeLayer = L.realtime({
    url: 'someURL',
    crossOrigin: true,
    type: 'json'
}, {
    interval: 3 * 1000,
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {
            icon: customIcon
        });
    }
});

对于非实时标记图层，我可以做的是创建一个 markercluster 组并将图层添加到其中，这样标记就会像这样聚集:

var clusterGroup = L.markerClusterGroup();
clusterGroup.addLayer(someLayer);

但是，当我将 realtimeLayer 添加到 clustergroup 时，没有应用聚类，或者根本没有加载标记。我错过了什么？谢谢!

Answer 1

您需要将 container 选项添加到您的实时对象选项中。

来自官方 Leaflet Realtime 文档:

L.Realtime can also use other layer types to display the results, for example it can use a MarkerClusterGroup from Leaflet MarkerCluster: pass a LayerGroup (or any class that implements addLayer and removeLayer) to L.Realtime's container option. (This feature was added in version 2.1.0.)

• https://github.com/perliedman/leaflet-realtime#overview

因此在您初始化集群组并将其添加到 map 后:

var clusterGroup = L.markerClusterGroup();
clusterGroup.addTo(map);

然后您可以将 clusterGroup 对象传递给容器选项中的实时对象:

realtimeLayer = L.realtime({
    url: 'someURL',
    crossOrigin: true,
    type: 'json'
}, {
    container: clusterGroup
    interval: 3 * 1000,
    onEachFeature: onEachFeature,
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng, {
            icon: customIcon
        });
    }
});

现在，当您将实时对象添加到 map 时，它应该正确聚类:

realtimeLayer.addTo(map)

官方 Leaflet Realtime 存储库有一个示例，可以通过添加对多个 L.Realtime 对象进行分组的选项来执行您想要的操作:https://github.com/perliedman/leaflet-realtime/blob/master/examples/earthquakes.js