Leaflet.js: обнаружение при завершении масштабирования карты

Итак, я делаю это приложение с помощью leafet.js. Это приложение требует, чтобы я вручную рисовал сетки на экране, что я позаботился о функции draw_grid(), которая рисует на экран множество полигонов.

У меня есть эта функция, которую я вызываю, чтобы вызвать изменение карты буклетов. zoom - целое число и size - это dict, как {x:1,y:1}, который управляет размером фрагментов, нарисованных на карте. (они должны меняться по мере того, как единицы, на которых рисуются плитки, равны lat, длинные точки на карте.

function changeZoom(zoom,size){
    map.setZoom(zoom); 
    setSize(size);   
    setTimeout(drawGrid,500)s;

}

причина, по которой я должен использовать setTimeout, состоит в том, что в листе ignores любые команды рисования на карте (которые я делаю как слой), пока карта не закончила анимацию.

как это сделать асинхронно?

Ответы

Ответ 1

Вы можете использовать событие map.zoomend, описанное в API здесь

map.on('zoomend', function() {
    drawGrid();
});

Как только карта закончит анимацию масштабирования, она вызовет функцию drawGrid.

Ответ 2

В более новой версии Лифлета "zoomed" больше не является событием. Теперь есть события "zoomstart" и "zoomend":

map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });

Ответ 3

Это лучший способ для управления левфлетом Zoom Control

    /*Zoom Control Click Managed*/
    var bZoomControlClick = false;
    mymap.on('zoomend',function(e){
        var currZoom = mymap.getZoom();
        if(bZoomControlClick){
            console.log("Clicked "+currZoom);
        }
        bZoomControlClick = false;
    });     
    var element = document.querySelector('a.leaflet-control-zoom-in');
    L.DomEvent.addListener(element, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });
    var element1 = document.querySelector('a.leaflet-control-zoom-out');
    L.DomEvent.addListener(element1, 'click', function (e) {
        bZoomControlClick = true;
        $(mymap).trigger("zoomend");
    });

Ответ 4

В настоящее время я использую версию 1.5.0, и способ заставить это работать следующим образом:

 map.on("zoomanim", function () {
    console.log('finished zooming');
 });