web-dev-qa-db-fra.com

Recherche d'une couche spécifique dans un Leaflet LayerGroup où les couches sont des polygones

J'essaie de définir un tas de polygones Leaflet comme ceci:

var poly = new L.Polygon([
  [10.1840229, 36.8906981],
  [10.1840393, 36.8906669],
  [10.1840989, 36.8906868],
  [10.1840826, 36.890718],
  [10.1840229, 36.8906981]
], {
  'id': 'someId'
});

Ensuite, je regroupe ces polygones dans un GroupLayer comme suit:

var group = new L.LayerGroup([poly1, poly2, ..., polyn]);
group.addTo(map);

Puis-je trouver ces polygones par Id en utilisant group.getLayer ()? Ou dois-je définir les couches/polygones différemment pour pouvoir le faire?

javascriptleaflet
12
AAJ

Leaflet attribue son propre ID unique à chaque couche:

var marker = new L.Marker(...);
console.log(marker._leaflet_id) // 24

var polygon = new L.Polygon(...);
console.log(polygon._leaflet_id) // 25

La méthode getLayer de L.LayerGroup, L.FeatureGroup et L.GeoJSON prenez ces ID comme paramètre:

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.getLayer(24); // returns the marker
layerGroup.getLayer(25); // returns the polygon

Vous pouvez également attribuer facilement vos propres identifiants:

var marker = new L.Marker(...);
marker.id = 'foo';

var polygon = new L.Polygon(...);
polygon.id = 'bar';

Et puis les récupérer comme ceci:

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.eachLayer(function (layer) {
    if (layer.id === 'foo') // it's the marker
    if (layer.id === 'bar') // it's the polygon
});

Vous pouvez facilement jeter cela dans une fonction et l'inclure dans L.LayerGroup:

L.LayerGroup.include({
    customGetLayer: function (id) {
        for (var i in this._layers) {
            if (this._layers[i].id == id) {
               return this._layers[i];
            }
        }
    }
});

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.customGetLayer('foo'); // returns the marker
layerGroup.customGetLayer('bar'); // returns the polygon

EDIT: Je n'ai pas repéré l'ID dans votre exemple jusqu'à l'édition en retrait. Vous pouvez également l'attribuer comme une option comme dans votre exemple et créer une fonction get personnalisée pour récupérer le calque:

L.LayerGroup.include({
    customGetLayer: function (id) {
        for (var i in this._layers) {
            if (this._layers[i].options.id == id) {
               return this._layers[i];
            }
        }
    }
});

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.customGetLayer('foo'); // returns the marker
layerGroup.customGetLayer('bar'); // returns the polygon

Si vous avez besoin d'identifier le type d'une couche, vous pouvez le faire en utilisant instanceof:

L'opérateur instanceof teste si un objet a dans sa chaîne de prototype la propriété prototype d'un constructeur.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

var layerGroup = L.LayerGroup([marker, polygon]);

layerGroup.eachLayer(function (layer) {
    if (layer instanceof L.Marker) // it's the marker
    if (layer instanceof L.Polygon) // it's the polygon
});

Mais n'oubliez pas que lorsque vous vous trouvez en train de faire des sélections communes, vous devriez idéalement placer ces entités dans des couches/groupes d'entités séparés.

19
iH8

La méthode getLayer() du groupe de calques attend un ID très spécifique: celui qui est automatiquement attribué par Leaflet lorsque "tamponner" un calque (par exemple en utilisant myId = L.stamp(myLayer)).

Par conséquent, vous ne pourrez pas utiliser d'ID prédéfinis.

Si vous pouvez travailler avec des ID définis dynamiquement (c'est-à-dire non connus à l'avance), vous pouvez facilement les enregistrer et les utiliser pour récupérer vos couches (polygones).

3
ghybs