Nonaktifkan interaksi leaflet sementara

Bagaimana saya bisa menonaktifkan sementara zoming / draging Mapview di Leaflet.js Sudah mencoba banyak cara tetapi tidak berhasil. Sangat penting untuk membuatnya sementara dan saya juga perlu opsi untuk mengaktifkan kembali.

leaflet

— Bernhard
sumber

Ada ide bagaimana melakukan ini dengan CSS? Saya perlu menonaktifkan seret di ponsel menggunakan kueri media. Saya mencoba mengatur lapisan transparan di atasnya tetapi mengklik kanan melalui lapisan itu. Saya bahkan bermain dengan pointer-events tetapi tidak berhasil. Pendekatan yang tepat kemungkinan besar melalui penggunaan -webkit-user-drag: tidak ada; tetapi saya telah menerapkannya pada setiap elemen yang dapat saya temukan dan masih belum berhasil. Terima kasih.

Saya menjawab pertanyaan ini di bawah .

— hayatbiralem

Jawaban:

yang ingin Anda lakukan (dengan asumsi peta Anda adalah panggilan map)

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
map.boxZoom.disable();
map.keyboard.disable();
if (map.tap) map.tap.disable();
document.getElementById('map').style.cursor='default';

hidupkan lagi dengan

map.dragging.enable();
map.touchZoom.enable();
map.doubleClickZoom.enable();
map.scrollWheelZoom.enable();
map.boxZoom.enable();
map.keyboard.enable();
if (map.tap) map.tap.enable();
document.getElementById('map').style.cursor='grab';

— Calvin
sumber

Terima kasih banyak. Saya kelihatan sangat keliru - saya pikir pasti ada satu metode untuk melakukannya.

— Bernhard

Solusi ini memiliki beberapa masalah: Kursor mouse masih ada di tangan. Pengguliran halaman dengan gerakan sentuh tidak dimungkinkan di atas peta. Ketika pembukaan Popover bergerak peta itu tidak akan pernah kembali.

— netAction

@netAction, Apakah Anda punya solusi untuk masalah pengguliran gestur sentuh?

— Chris Fremgen

@ChrisFremgen: map.dragging.disable (); melakukan trik agar peta berhenti mengambil gerakan menggulir.

— netAction

Apakah ada cara untuk hanya menonaktifkan zoomIn?

— howard.D

Jika Anda tidak ingin menonaktifkan setiap handler secara manual, Anda dapat mengulang semuanya dan menonaktifkan / mengaktifkannya.

Nonaktifkan

map._handlers.forEach(function(handler) {
    handler.disable();

});

Memungkinkan

map._handlers.forEach(function(handler) {
    handler.enable();

});

— ustroetz
sumber

Berhati-hatilah bahwa menggunakan properti non publik (_handlers) dapat menyebabkan kesalahan dalam kode Anda bahkan pada perubahan versi patch leaflet karena tidak dijamin tidak akan berubah. Permintaan fitur harus diserahkan ke selebaran;)

— Luckylooke

Saya pikir, Anda dapat membungkus peta Anda dengan penolong dan Anda dapat menonaktifkannya dengan kelas CSS sederhana seperti is-locked.

Inilah yang saya bicarakan:

.map-container {
  position: relative;
}

.map-container .map {
  position: relative;
  z-index: 1;
}

.map-container.is-locked:after {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  content: "";
  display: block;
}

Saya harap ini membantu.

— hayatbiralem
sumber