Suite

Contrôler les détails de la carte affichés à l'aide de Leaflet et de MapBox


Je construis un graphique basé sur une carte à l'aide de Leaflet (avec MapBox). J'aimerais savoir s'il existe un moyen de contrôler le niveau de détails affichés sur la carte lors d'un zoom avant. Par exemple, je ne veux pas voir les autoroutes ou les noms de rue.

Ce lien explique comment faire cela en utilisant google maps.


Oui, il y a au moins deux façons.

  1. L'événement zoomend de la brochure. Par exemple:

    map.on('zoomend', function() { var zoomLevel = map.getZoom(); if (zoomLevel > 10) map.removeLayer(autoroutes); });

    C'est (très) incomplet. Vous souhaiterez probablement ajouter et supprimer des calques en fonction du niveau de zoom actuel.

    Voici un exemple de MapBox pour masquer des marqueurs à des niveaux de zoom spécifiques avec cet événement, ainsi que quelques méthodes MapBox personnalisées.

  2. L.tileLayera des options pour minZoom et maxZoom. Ainsi, si vous avez accès à des tuiles avec et sans étiquettes (autoroutes, etc.), vous pouvez passer ces options lors de la génération des couches de tuiles :

    // tuiles avec des étiquettes pour un zoom élevé var withLabels = L.tileLayer(url, { maxZoom: 18, minZoom: 11, }).addTo(map); // tuiles sans étiquettes pour un faible zoom var noLabels = L.tileLayer(url, { maxZoom: 19, minZoom: 0, }).addTo(map);