Estoy tratando de mostrar diferentes capas de GeoJSON en diferentes capas de zoom utilizando la API de folletos. Puedo cargar y mostrar las tres capas a la vez (aunque en realidad no quiero que se muestren todas a la vez). Puedo cargarlos y mostrarlos en diferentes niveles de zoom.
He configurado el código para que en los niveles de Zoom 1-6, el mapa muestre una capa GeoJSON. En los niveles 7-10, mostrará otra, y en los niveles 11+ mostrará una tercera. Mostrarlos funciona. Lo que estoy tratando de trabajar ahora es apagar a los demás si se muestra uno. Pasar de 1-6 a 7-10 trabajos (lo que significa que desactiva la capa 1-6 correctamente), pero no de 7-10 a 11+ (lo que significa que la capa 7-10 se pega) y no puedo entender por qué (usa el mismo código).
Aquí está el ajax para las capas GeoJSON:
function getJson(defaultStyle, map, simp, geojsonLayer){
var url = 'file' + simp + '.json';
map.removeLayer(geojsonLayer);
geojsonLayer.clearLayers();
$.getJSON(url, function(data){
geojsonLayer = L.geoJson(data, {
style: defaultStyle,
onEachFeature: onEachFeature
});
geojsonLayer.addTo(map);
});
}
Y aquí está la función principal que llama al ajax dependiendo del zoom. simpCounter se establece en 0 inicialmente.
map.on('zoomend', function(e) {
if (map.getZoom() >= 7 && map.getZoom() <= 10) {
if (simpCounter == 0 || simpCounter == 2) {
getJson(defaultStyle, map, 60, geojsonLayer);
simpCounter = 1;
}
} else if (map.getZoom() >= 11) {
if (simpCounter == 0 || simpCounter == 1) {
getJson(defaultStyle, map, 35, geojsonLayer);
simpCounter = 2;
}
}
});
De nuevo, la primera transición desactiva la capa antigua correctamente, pero la segunda transición no lo hace. Gracias por la ayuda.