Utilisation d'une couche en temps réel Leaflet dans un groupe de markercluster

Question

J'utilise Dépliant en combinaison avec le en temps réel et cluster de marqueurs afin d'afficher des marqueurs, qui sont mis à jour en direct sur une carte. Les plugins fonctionnent très bien indépendamment les uns des autres, mais le problème se pose lorsque je veux regrouper la couche en temps réel en utilisant les fonctionnalités de markercluster.

Exemple de code pour la couche temps réel dans lequel je convertis le json en marqueurs, j'attribue une icône personnalisée et j'applique une fonction 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
        });
    }
});

Ce que je peux faire avec les couches de marqueurs non temps réel, c'est créer un groupe de marqueurs et y ajouter la couche, de sorte que les marqueurs soient regroupés comme ceci :

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

Cependant, lorsque j'ajoute la couche RealtimeLayer au clustergroup, la mise en grappe n'est pas appliquée ou les marqueurs ne sont pas chargés du tout. Que me manque-t-il ? Merci !

Answer 1

Vous devez ajouter le container à vos options d'objets en temps réel.

Extrait de la documentation officielle de Leaflet Realtime :

L.Realtime peut également utiliser d'autres types de couches pour afficher les résultats. exemple, il peut utiliser un MarkerClusterGroup de Leaflet MarkerCluster : passe un LayerGroup (ou toute classe qui implémente addLayer et removeLayer) à l'option de conteneur de L.Realtime. (Cette fonctionnalité a été ajoutée dans la version 2.1.0).

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

Donc après avoir initialisé votre groupe de cluster et l'avoir ajouté à la carte :

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

Vous pouvez ensuite passer l'objet clusterGroup à votre objet temps réel dans l'option conteneur :

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

Maintenant, lorsque vous ajoutez l'objet en temps réel à la carte, il devrait se regrouper correctement :

realtimeLayer.addTo(map)

Le dépôt officiel de Leaflet Realtime contient un exemple permettant de faire ce que vous voulez, avec la possibilité supplémentaire de regrouper plusieurs objets L.Realtime : https://github.com/perliedman/leaflet-realtime/blob/master/examples/earthquakes.js