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.
sumber
Jawaban:
Coba ini sebagai gantinya:
Dan untuk fungsi panggilan Anda:
Ketika Anda melewati argumen
map
,geojsonLayer
dandefaultStyle
dalam panggilangetJson(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
,,map
dangeojsonLayer
populasi awal dalam lingkup global Anda hanya perlu memanggil mereka, tidak perlu melewati mereka. Dengan penyesuaian saya membuatnya mengubah globalmap
sehingga 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!
sumber
return
pernyataan. Menggunakan global dalam javascript tampaknya umum, jadi melakukan hal ini akan menjadi yang termudah untuk menyelesaikan tugas Anda.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.
sumber
Saya menulis contoh di bawah ini untuk menunjukkan cara menghapus lapisan geoJSON multi
sumber