在标记集群组中使用Leaflet实时图层

Question

我正在使用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添加到clustergroup时，聚类不会被应用，或者标记根本没有被加载。我错过了什么？谢谢！

- cf2

Answer 1

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

来自官方Leaflet Realtime文档：

L.Realtime还可以使用其他图层类型来显示结果，例如它可以使用来自Leaflet MarkerCluster的MarkerClusterGroup：将LayerGroup（或任何实现addLayer和removeLayer的类）传递给L.Realtime的container选项。 （此功能已在版本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实时库有一个示例，可以做你想要的事情，并添加了将多个L.Realtime对象分组的选项: https://github.com/perliedman/leaflet-realtime/blob/master/examples/earthquakes.js

- max