Añadir/eliminar capas GeoJSON con Leaflet

Question

Estoy tratando de mostrar diferentes capas GeoJSON en diferentes capas de zoom utilizando la API de Leaflet. Puedo cargar y mostrar las tres capas a la vez (aunque en realidad no quiero que se muestren todas a la vez). Puedo cargarlas y mostrarlas en diferentes niveles de zoom.

Tengo el código configurado 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. La visualización funciona. Lo que estoy tratando de hacer funcionar ahora es desactivar las otras si se muestra una. Pasar de 1-6 a 7-10 funciona (lo que significa que apaga la capa 1-6 correctamente), pero no de 7-10 a 11+ (lo que significa que la capa 7-10 se mantiene) y no puedo averiguar por qué (utiliza 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 en función 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;
    }
}
});

Así que, de nuevo, la primera transición apaga la capa antigua correctamente, pero la segunda transición no lo hace.

Answer 1

Intenta esto en su lugar:

function getJson(simp){  //Removed unneeded arguments here
    var url = 'file' + simp + '.json';
    map.removeLayer(geojsonLayer);
    //geojsonLayer.clearLayers();  I don't believe this needed.
    $.getJSON(url, function(data){
        geojsonLayer = L.geoJson(data, {
            style: defaultStyle,
            onEachFeature: onEachFeature
        });
        geojsonLayer.addTo(map);
    });
}

Y para su función de llamada:

map.on('zoomend', function(e) {
    if (map.getZoom() >= 7 && map.getZoom() <= 10) {
        if (simpCounter == 0 || simpCounter == 2) {
        getJson(60);
        simpCounter = 1;
        }
    } else if (map.getZoom() >= 11) {
        if (simpCounter == 0 || simpCounter == 1) {
        getJson(35);
        simpCounter = 2;
        }
    } else if (map.getZoom() <= 7) { //Return to original data
        if (simpCounter == 1 || simpCounter == 2) {
        getJson(XX); //Fill out with correct file name
        simpCounter = 0;
        }
    }
});

Al pasar los argumentos map , geojsonLayer y defaultStyle en la llamada getJson(defaultStyle, map, 60, geojsonLayer); está creando nuevas instancias de los objetos. A continuación, realizar el trabajo en las instancias que pueden reflejarse en la pantalla, pero una vez que volver a la 'bucle principal' que básicamente se olvida de todo lo que acaba de hacer y vuelve al estado anterior.

Como supongo que definiste defaultStyle , map y la inicial geojsonLayer de la población en el ámbito global sólo hay que llamarlos, no es necesario pasarlos. Con los ajustes que hice cambia el global map para que los cambios persistan después de las llamadas a la función.

Esta solución me ha funcionado. Puedes ver todo el contenido del archivo que hice aquí: http://pastebin.com/yMYQJ2jK

También defino un nivel de zoom final para 1-7 para que puedas ver los datos JSON iniciales cuando vuelvas al nivel de zoom inicial, de lo contrario se pierden y nunca se vuelven a llamar a menos que recargues la página.

Answer 2

Escribí el siguiente ejemplo para mostrar cómo eliminar múltiples capas geoJSON.

///adding geoJSON data

          var myGeoJSON = L.geoJSON(myData, {

            onEachFeature: function (feature, layer) {
                layer.myTag = "myGeoJSON"
            }

        });

////// function to remove geoJSON layers 

    var removeMarkers = function() {
        map.eachLayer( function(layer) {

          if ( layer.myTag &&  layer.myTag === "myGeoJSON") {
            map.removeLayer(layer)
              }

            });

    }

//// calling function 

removeMarkers();

Answer 3

Leaflet tiene una estructura de datos de tipo colección de grupos de capas y también una interfaz de control de capas que puedes activar y desactivar una vez que la codifiques como oyentes de eventos en la casilla de verificación.