在 markercluster 组中使用 Leaflet 实时图层答案

【问题标题】：Using a Leaflet realtime layer in a markercluster group在 markercluster 组中使用 Leaflet 实时图层
【发布时间】：2017-04-10 08:04:37
【问题描述】：

我将Leaflet 与realtime 和markercluster 插件结合使用以显示标记，这些标记会在地图上实时更新。这些插件彼此独立工作得很好，但是当我想使用 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
        });
    }
});

我能够对非实时标记图层做的是创建一个标记群集组并将图层添加到其中，因此标记会像这样聚集：

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

但是，当我将 realtimeLayer 添加到集群组时，不会应用集群，或者标记确实会被完全加载。我错过了什么？谢谢！

【问题讨论】：

标签： javascript leaflet markerclusterer leaflet.markercluster

【解决方案1】：

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

来自官方 Leaflet Realtime 文档：

L.Realtime 还可以使用其他图层类型来显示结果，例如例如，它可以使用 Leaflet MarkerCluster 中的 MarkerClusterGroup：传递一个 LayerGroup （或任何实现 addLayer 和 removeLayer) 到 L.Realtime 的容器选项。（此功能已添加在 2.1.0 版中。）

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

所以在初始化集群组并将其添加到地图之后：

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
        });
    }
});

现在，当您将实时对象添加到地图时，它应该会正确聚类：

realtimeLayer.addTo(map)

官方 Leaflet Realtime repo 提供了一个示例，通过添加的对多个 L.Realtime 对象进行分组的选项来做你想做的事情：https://github.com/perliedman/leaflet-realtime/blob/master/examples/earthquakes.js

【讨论】：