Suite

Dépliant : Comment créer des superpositions activables à partir d'une seule FeatureCollection GeoJSON ?

Dépliant : Comment créer des superpositions activables à partir d'une seule FeatureCollection GeoJSON ?


Je suis un débutant avec Leaflet/Mapbox et je peux créer une carte simple et tracer tous les points d'une GeoJSON FeatureCollection, mais je ne sais pas comment ajouter la possibilité de basculer (via des cases à cocher) des points spécifiques en fonction d'une propriété nomméeCatégorie.

Comment puis-je lister toutes les couches de catégories dans mon contrôle et donner à l'utilisateur la possibilité d'activer/désactiver les différentes couches, ainsi qu'une couche principale principale qui affiche TOUS les points ? Démo FIDDLE ici

Voici mon exemple de carte avec 3 exemples de catégories dans une FeatureCollection GeoJSON :

var collection = [{ "type": "FeatureCollection", "features": [ {"type":"Feature","properties":{"category":"Aviation","Name":"Plant No 1"} ,"geometry":{"type":"Point","coordinates":[81.73828125,62.59334083012024]}}, {"type":"Feature","properties":{"category":"Électrique","Nom ":"Plant n° 2"},"geometry":{"type":"Point","coordinates":[94.5703125,8.722598828043374]}}, {"type":"Feature","properties":{"category ":"Militaire","Nom":"Base 1"},"géométrie":{"type":"Point","coordonnées": [104.4140625, 62.91523303947614]}} ]}] ;

Le code:

var myStyle = { rayon : 10, fillOpacity : 1, trait : false, poids : 1, opacité : 1, fill : true, clickable : true } ; var allPoints = L.geoJson(collection, { pointToLayer: function(feature, latlng){ return L.circleMarker(latlng, myStyle); }, style: function(feature){ switch(feature.properties.category){ case 'Aviation ' : return { color: "black" }; case 'Electrtical' : return { color: "blue" }; case 'Militaire' : return { color: "red" }; } }, onEachFeature: function(feature, layer) { layer.bindPopup(feature.properties.Name); } }); var basemapsObj = { 'basic': L.mapbox.tileLayer('mapbox.light'), 'satellite': L.mapbox.tileLayer('mapbox.satellite-afternoon') }; var overlaysObj = { 'Tous les points': allPoints.addTo(map) } L.control.layers(basemapsObj, overlaysObj, { collapsed: false }).addTo(map);

L'astuce la plus simple consiste à créer votre groupe de calques "maître" et à y ajouter tous les autres groupes de calques de catégorie. Vous pouvez bien sûr ajouter ce maître dans la liste des superpositions de votre contrôle de calques, afin qu'il soit répertorié et qu'il ait une case à cocher permettant à l'utilisateur de l'activer ou de le désactiver. Le problème est que cette case à cocher se désynchronise lorsque l'utilisateur bascule entre les catégories individuelles.

Une astuce plus compliquée consiste à garder votre groupe de calques maître vide et à émuler l'ajout / la suppression de tous les autres groupes de calques de catégorie en écoutant la carte superpositionajouteretsuperpositionsupprimerévénements et ajouter/supprimer manuellement les catégories.

Avec cette 2ème méthode, vous pouvez également implémenter une correction pour la case à cocher de la couche principale en écoutant overlayadd et overlayremove pour les catégories individuelles et en ajoutant le maître lorsque toutes sont ajoutées, ou en supprimant le maître lorsqu'au moins une catégorie est manquante.

Démo : https://jsfiddle.net/qkvo7hav/7/

Remarque : pour une raison quelconque, il semble que la version Mapbox du contrôle des calques ne garde pas ses cases à cocher synchronisées lorsque des calques sont ajoutés / supprimés en dehors du contrôle. Nous pouvons lui demander de se resynchroniser en appelantmonContrôle._update().


Voir la vidéo: Learning Python. Real World Application. 116 Adding a GeoJson Polygon Layer