Afficher les marqueurs uniquement à certains niveaux de zoom

8

Je suis en train de construire une carte de cyclotourisme dans leaflet.js, avec des informations subjectives superposées comme des marqueurs, sur le modèle de "c'est une grande route", "cette ville est assez sympa" etc. Pour éviter la surcharge d'informations, je veux seulement afficher les marqueurs les plus importants à un niveau de zoom donné (par exemple, afficher les routes impressionnantes mises en évidence au zoom 9, les bonnes routes à 11 et toutes les informations routières, y compris les commentaires négatifs, à 13+)

J'ai deux questions ici:

  1. Existe-t-il un idiome ou un modèle de conception reconnu pour ce genre de chose? Je suis très heureux de décider manuellement de l'importance de chaque marqueur, donc je n'ai pas besoin d'algorithme de clustering. Il y en aura peut-être quelques centaines pour tout l'État, donc c'est gérable.

  2. Comment puis-je implémenter cela dans Leaflet? Ma pensée évidente est d'attacher un gestionnaire à map.zoomend () et de simplement afficher ou masquer les marqueurs pertinents. Y a-t-il une meilleure façon?

Steve Bennett
la source

Réponses:

6

Je pense qu'il n'y a pas de meilleure façon que de gérer l' zoomendévénement. Pour regrouper les marqueurs par niveau de zoom, utilisez L.LayerGroup: les activer et les désactiver sera plus facile.

Appeler map.removeLayer()ou map.addLayer()deux fois ne produira aucune erreur ou n'ajoutera pas de couche deux fois: il y a un hachage interne qui empêche de telles choses. Ainsi, vous pouvez simplement en avoir un tas if (zoom > 6 && zoom <= 10 ) map.addLayer(zoom6_10); else map.removeLayer(zoom6_10);dans le gestionnaire d'événements.

Ilja Zverev
la source