Agregar / eliminar capas de GeoJSON de folletos

Navega tus respuestas
27

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.

    
pregunta Josh 23.11.2012 - 12:35

3 respuestas

25

Prueba 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;
        }
    }
});

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

Como supongo que definió defaultStyle , map y la población inicial geojsonLayer en el ámbito global, solo tiene que llamarlos, no es necesario que los pase. Con los ajustes que hice, cambia el map global, por lo que los cambios persisten después de que finalizan las llamadas a funciones.

Esta solución funcionó para mí. Puede ver el contenido completo del archivo que hice aquí: enlace

También defino un nivel de zoom final para 1-7 para que pueda ver sus datos JSON iniciales cuando regrese al nivel de zoom inicial; de lo contrario, se perderá y nunca se volverá a llamar a menos que vuelva a cargar la página.

    
respondido por el RomaH 24.11.2012 - 03:04
1
El folleto

tiene un tipo de estructura de datos de colección de grupo de capas y también una interfaz de control de capa que puede activar y desactivar una vez que lo codifique como escuchas de eventos en la casilla de verificación.

    
respondido por el Carl Carlson 23.11.2012 - 21:01
0

Escribí el siguiente ejemplo para mostrar cómo eliminar múltiples capas de 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();
    
respondido por el Mercel Santos 30.12.2018 - 17:12

Lea otras preguntas en las etiquetas

¿Cuál es el estado del arte en aplicaciones geoespaciales html5? Herramientas del modelo Gravity / Huff