Cómo cambiar la capa base mediante programación en MapBox / Leaflet


12

Tengo varias capas base y necesito cambiarlas mediante programación, dependiendo de varias acciones y estados en mi aplicación. No puedo encontrar cómo, por la vida de mí.

Respuestas:


16

Este tutorial sirve como un buen ejemplo:

1) Como se muestra en el ejemplo, configure sus capas base con un nombre de variable al que se pueda acceder en la función donde desea cambiarlas mediante programación.

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

2) Luego agregue y elimine las capas que desea agregar o eliminar. Lo siguiente intercambia la grayscalecapa por la streetscapa. Esto supone que ambos grayscaley streetsestán disponibles dentro del alcance de la función donde está realizando el cambio.

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

3) Si está utilizando el control de capas que se L.control.layersmuestra en el ejemplo, el control realiza un seguimiento de lo que está en el mapa y cambia las casillas de verificación en consecuencia.


¿Dónde está mapboxUrly mapboxAttribution?
Mohammad Dayyan

@MohammadDayyan, debe consultar el tutorial que está vinculado anteriormente
toms

0

Desde /programming//a/33762133/4355695

Normalmente, simplemente agregando una capa al mapa (por ejemplo, myTileLayer.addTo (mapa)), si esa capa es parte de las capas base o superposiciones del Control de capas, esta última actualizará automáticamente su estado (si agregó una capa base, los botones de radio se seleccionarán en consecuencia; para una superposición, se marcará la casilla correspondiente).

Lo intenté y funcionó: no necesito molestarme en quitar la capa base actual (o en averiguar cuál está activa para ese asunto). Simplemente myTileLayer.addTo(map)hace el trabajo: si ya es parte de mis capas base, entonces el mapa "cambia" a él. Elimina automáticamente la capa actual y cambia a myTileLayer.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.