Como alternar a camada de base programaticamente no MapBox / Leaflet


12

Eu tenho várias camadas de base e preciso alterá-las programaticamente, dependendo de várias ações e estados no meu aplicativo. Não consigo encontrar como, para a minha vida.

Respostas:


16

Este tutorial serve como um bom exemplo:

1) Como mostrado no exemplo, configure suas camadas base com um nome de variável que possa ser acessado na função em que você deseja alterá-las programaticamente.

var grayscale = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution}),
    streets   = L.tileLayer(mapboxUrl, {id: 'MapID', attribution: mapboxAttribution});

2) Em seguida, adicione e remova as camadas que deseja adicionar ou remover. A seguir, troque a grayscalecamada pela streetscamada. Isso pressupõe que ambos grayscalee streetsestejam disponíveis no escopo da função em que você está fazendo a alternância.

map.removeLayer(grayscale);
map.addLayer(streets);

3) Se você estiver usando o controle de camadas L.control.layersmostrado no exemplo, o controle acompanhará o que está no mapa e altera as caixas de seleção de acordo.


Onde está o mapboxUrl& mapboxAttribution?
Mohammad Dayyan

@MohammadDayyan você precisa se referir ao tutorial que está linkado acima
toms

0

De /programming//a/33762133/4355695

Normalmente, basta adicionar uma camada ao mapa (por exemplo, myTileLayer.addTo (map)), se essa camada fizer parte das camadas base ou sobreposições do controle Layers, a última atualizará automaticamente seu status (se você adicionou uma camada base, os botões de opção serão selecionados de acordo; para uma sobreposição, a caixa de seleção correspondente será marcada).

Eu tentei e funcionou: não preciso me preocupar em remover a camada de base atual (ou em descobrir qual é o ativo nesse sentido). Apenas myTileLayer.addTo(map)faz o trabalho: se já faz parte das minhas bases, o mapa "muda" para ele. Remove automaticamente a camada atual e muda para myTileLayer.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.