Mostrar marcadores apenas em determinados níveis de zoom

8

Estou construindo um mapa de cicloturismo em leaflet.js, com informações subjetivas sobrepostas como marcadores, seguindo as linhas de "esta é uma ótima estrada", "esta cidade é bastante agradável" etc. Para evitar a sobrecarga de informações, quero mostre os marcadores mais proeminentes em um determinado nível de zoom (por exemplo, mostre estradas impressionantes destacadas no zoom 9, boas estradas às 11 e todas as informações da estrada, incluindo comentários negativos, com mais de 13 anos)

Eu tenho duas perguntas aqui:

  1. Existe um idioma ou padrão de design reconhecidos para esse tipo de coisa? Fico feliz em decidir manualmente o destaque de cada marcador, portanto, não preciso de nenhum tipo de algoritmo de cluster. Talvez existam algumas centenas para todo o estado, por isso é gerenciável.

  2. Como posso implementar isso no folheto? Meu pensamento óbvio é anexar um manipulador ao map.zoomend () e simplesmente mostrar ou ocultar os marcadores relevantes. Existe uma maneira melhor?

Steve Bennett
fonte

Respostas:

6

Eu acho que não há maneira melhor do que lidar com zoomendeventos. Para agrupar marcadores por níveis de zoom, use L.LayerGroup: ativá-los e desativá-los será mais fácil.

Ligar map.removeLayer()ou map.addLayer()duas vezes não produz erros ou adiciona uma camada duas vezes: existe um hash interno que impede essas coisas. Então você pode ter um monte de if (zoom > 6 && zoom <= 10 ) map.addLayer(zoom6_10); else map.removeLayer(zoom6_10);manipulador de eventos.

Ilja Zverev
fonte