Mostrar marcadores solo en ciertos niveles de zoom

8

Estoy construyendo un mapa de cicloturismo en leaflet.js, con información subjetiva superpuesta como marcadores, en la línea de "este es un gran camino", "esta ciudad es bastante agradable", etc. Para evitar la sobrecarga de información, solo quiero muestra los marcadores más destacados en un nivel de zoom dado (p. ej., muestra impresionantes carreteras resaltadas en el zoom 9, buenas carreteras en 11 y toda la información de la carretera, incluidos los comentarios negativos, en 13+)

Tengo dos preguntas aquí:

  1. ¿Existe un idioma o patrón de diseño reconocido para este tipo de cosas? Estoy muy contento de decidir manualmente la importancia de cada marcador, por lo que no necesito ningún tipo de algoritmo de agrupación. Habrá quizás un par de cientos para todo el estado, por lo que es manejable.

  2. ¿Cómo puedo implementar esto en el folleto? Mi pensamiento obvio es adjuntar un controlador a map.zoomend () y simplemente mostrar u ocultar los marcadores relevantes. ¿Hay una mejor manera?

Steve Bennett
fuente

Respuestas:

6

Creo que no hay mejor manera que manejar el zoomendevento. Para agrupar marcadores por niveles de zoom, use L.LayerGroup: activarlos y desactivarlos será más fácil.

Llamar map.removeLayer()o map.addLayer()dos veces no producirá ningún error ni agregará una capa dos veces: hay un hash interno que evita tales cosas. Por lo tanto, puede tener un montón de if (zoom > 6 && zoom <= 10 ) map.addLayer(zoom6_10); else map.removeLayer(zoom6_10);en el controlador de eventos.

Ilja Zverev
fuente