Leaflet GeoJSON katmanlarını ekleme / çıkarma

Leaflet API kullanarak farklı yakınlaştırma katmanlarında farklı GeoJSON katmanlarını göstermeye çalışıyorum. Üç tabakanın tümünü aynı anda yükleyebilir ve görüntüleyebilirim (aslında hepsinin aynı anda gösterilmesini istemiyorum). Onları farklı yakınlaştırma seviyelerinde yükleyebilir ve görüntüleyebilirim.

Kod ayarlarım var, böylece 1-6 Zoom seviyelerinde harita bir GeoJSON katmanı gösterecek. 7-10 seviyelerinde, başka bir şey gösterecek ve 11+ seviyelerinde, üçte birini gösterecektir. Onları göstermek çalışır. Şimdi çalışmaya çalışıyorum, eğer biri görüntülenirse diğerlerini kapatmak. 1-6'dan 7-10'a kadar çalışmak (1-6 katmanını doğru şekilde kapatması anlamına gelir); nedenini (aynı kodu kullanır).

GeoJSON katmanları için ajax:

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

Ve işte yakınlaştırmaya bağlı olarak ajax'ı çağıran ana işlev. simpCounter başlangıçta 0 olarak ayarlanmıştır.

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

Bu yüzden yine, ilk geçiş eski katmanı doğru şekilde kapatır, ancak ikinci geçiş yapmaz. Yardım için teşekkürler.

Bunun yerine şunu deneyin:

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

Ve arama fonksiyonunuz için:

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

Ne zaman argümanları geçiyoruz map, geojsonLayerve defaultStyleçağrı getJson(defaultStyle, map, 60, geojsonLayer);Eğer nesnelerin yeni örneklerini oluşturuyor. Daha sonra ekranda yansıtabilecek örnekler üzerinde çalışma yaparsınız, ancak 'ana döngüye' geri döndüğünde temelde yaptığı her şeyi unutur ve önceki durumuna geri döner.

Ben tahmin ediyorum bu yana tanımladığınız defaultStyle, mapve başlangıçtaki geojsonLayersadece onları aramak zorunda küresel kapsamda nüfus, gerek onları geçmek. Yaptığım ayarlamalar sayesinde global değişiklikleri yaptım, mapböylece fonksiyon çağrıları bittikten sonra değişiklikler devam etti.

Bu çözüm benim için çalıştı. Burada yaptığım tüm dosya içeriğini görebilirsiniz: http://pastebin.com/yMYQJ2jK

Ayrıca 1-7 için son bir yakınlaştırma düzeyi de tanımlarım, böylece ilk yakınlaştırma düzeyine geri döndüğünüzde ilk JSON verilerini görebilirsiniz; aksi halde sayfa kaybolmazsa kaybolur ve asla geri aranmaz!

Leaflet, bir Layergroup toplama türü veri yapısına ve ayrıca onay kutusundaki olay dinleyicileri olarak kodladığınızda açıp kapatabileceğiniz bir katman kontrol arabirimine sahiptir.

Katları geoJSON katmanının nasıl kaldırılacağını göstermek için aşağıdaki örneği yazdım.

///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();