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添加到群集组时，未应用群集，或者根本不会加载标记。我错过了什么？谢谢！

Answer 1

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

从官方的Leaflet Realtime文档：

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

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

realtimeLayer.addTo(map)

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

在标记群组

1 个答案: