Cargar o mostrar diferentes datos geojson en el nivel de zoom para los mapas de los folletos

Question

Tengo un mapa con 3 niveles de información. El primero es el país, el segundo el estado y el último las ciudades. Me pregunto si es posible utilizar el valor del zoom para mostrar los diferentes datos de mi archivo geojson. Estoy pensando en un tipo de zoom listener o tal vez mostrar las tres capas pero utilizar el enlace setOpacity para el nivel de zoom.

Answer 1

Puedes registrar el evento zoomend como se mencionó anteriormente. Luego sólo tienes que eliminar la capa "antigua" con map.removeLayer(your_old_layer); o eliminar todas las capas geoson con la función map.eachLayer:

Basta con echar un vistazo a mi ejemplo de jsfiddle: http://jsfiddle.net/expedio/kuovyw8m/

Fragmento de código:

    map.on('zoomend', function (e) {
    zoom_based_layerchange();
});

function clean_map() {
    map.eachLayer(function (layer) {
        if (layer instanceof L.GeoJSON)

        {
            map.removeLayer(layer);

        }
        //console.log(layer);

    });
}

function zoom_based_layerchange() {
    //console.log(map.getZoom());

var currentZoom = map.getZoom();
    switch (currentZoom) {
        case 11:
            clean_map();
            coorsLayer.addTo(map); //show Coors Field
            break;
        case 12:
            clean_map();

            buslayer.addTo(map); //show Busline
            break;
        case 13:
            clean_map();
            campuslayer.addTo(map);
            // show Campus
            break;
        case 14:
            clean_map();
            rental.addTo(map);
            // show rental
            break;

        default:
            // do nothing
            break;
    }
}

Answer 2

Esto es posible. Ya se ha contestado antes (ver comentario de @fluidmotion), pero intentaré dar una respuesta más profunda aquí.

Hay dos métodos que necesitas, map.on('zoomend', function() {}); y map.remove(layer) . Básicamente el map.on('zoomend' comprueba cuando la función de zoom ha terminado. Puede comprobar cuál es el nivel de zoom final con map.getZoom() y compararlo con una constante que hayas establecido. Si cumple con sus requisitos, entonces borre todas las capas usando map.remove(layer) (tendrá que hacer esto para todas las capas) y añadir la nueva capa GeoJSON.

Hay un montón de optimizaciones que puedes hacer con esto, pero este es el flujo general. Un ejemplo de optimización, mantener el GeoJSON en una caché y sólo actualizarlo si es necesario (en lugar de una llamada a cada zoom).