Menambahkan / Menghapus lapisan Leaflet GeoJSON

Saya mencoba menunjukkan lapisan GeoJSON yang berbeda di lapisan zoom yang berbeda menggunakan Leaflet API. Saya dapat memuat dan menampilkan ketiga layer sekaligus (walaupun saya sebenarnya tidak ingin semuanya ditampilkan sekaligus). Saya dapat memuat dan menampilkannya pada level zoom yang berbeda.

Saya memiliki kode yang diatur sehingga pada tingkat Zoom 1-6, peta akan menampilkan satu lapisan GeoJSON. Pada level 7-10, itu akan menunjukkan yang lain, dan pada level 11+ itu akan menunjukkan yang ketiga. Menampilkannya berfungsi. Apa yang saya coba untuk mulai bekerja sekarang adalah mematikan yang lain jika ada yang ditampilkan. Mulai 1-6 hingga 7-10 berfungsi (artinya mematikan lapisan 1-6 dengan benar), tetapi tidak dari 7-10 menjadi 11+ (artinya lapisan 7-10 bertahan) dan saya tidak dapat menemukan tahu sebabnya (menggunakan kode yang sama).

Inilah ajax untuk lapisan 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);
});
}

Dan inilah fungsi utama yang memanggil ajax tergantung pada zoom. simpCounter awalnya diatur ke 0.

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

Jadi sekali lagi, transisi pertama mematikan lapisan lama dengan benar, tetapi transisi kedua tidak. Terima kasih untuk bantuannya.

Coba ini sebagai gantinya:

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

Dan untuk fungsi panggilan Anda:

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

Ketika Anda melewati argumen map, geojsonLayerdan defaultStyledalam panggilan getJson(defaultStyle, map, 60, geojsonLayer);Anda membuat instance baru objek. Anda kemudian melakukan pekerjaan pada instance yang dapat merefleksikan layar tetapi setelah kembali ke 'loop utama' itu pada dasarnya melupakan semua yang baru saja dilakukan dan kembali ke keadaan sebelumnya.

Karena saya kira Anda mendefinisikan defaultStyle,, mapdan geojsonLayerpopulasi awal dalam lingkup global Anda hanya perlu memanggil mereka, tidak perlu melewati mereka. Dengan penyesuaian saya membuatnya mengubah global mapsehingga perubahan bertahan setelah panggilan fungsi selesai.

Solusi ini berhasil untuk saya. Anda dapat melihat seluruh isi file yang saya buat di sini: http://pastebin.com/yMYQJ2jK

Saya juga menetapkan tingkat pembesaran akhir untuk 1-7 sehingga Anda dapat melihat data JSON awal saat Anda kembali ke tingkat pembesaran awal, jika tidak maka akan hilang dan tidak akan pernah dipanggil kembali kecuali Anda memuat ulang halaman!

leaflet memiliki tipe kumpulan kumpulan data dari struktur data dan juga antarmuka kontrol lapisan yang dapat Anda nyalakan dan matikan begitu Anda mengkodekannya sebagai pendengar acara di kotak centang.

Saya menulis contoh di bawah ini untuk menunjukkan cara menghapus lapisan geoJSON multi

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