web-dev-qa-db-fra.com

Leaflet.js: détection de la fin du zoom de la carte

Je fais donc cette application avec leafet.js. Cette application nécessite que je doive dessiner manuellement des grilles sur l'écran, que j'ai pris soin d'une fonction draw_grid() qui dessine un tas de polygones à l'écran.

j'ai cette fonction que j'appelle pour déclencher le changement de la carte de brochure. zoom - l'entier de zoom et size est un dict comme {x:1,y:1} qui contrôle la taille des tuiles dessinées sur la carte. (ils doivent changer car les unités sous lesquelles les tuiles sont dessinées sont des points latents et longs sur la carte.

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

}

la raison pour laquelle je dois utiliser setTimeout est que le dépliant ignores toutes les commandes de dessin sur la carte (que je fais comme couche) jusqu'à ce que la carte ait fini de s'animer.

comment faire cela de manière asynchrone à la place?

javascriptasynchronousleaflet
27
Wingston Sharon

Vous pouvez utiliser le map.zoomend événement, décrit dans l'API ici

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

Une fois que la carte a terminé l'animation de zoom, elle appelle alors la fonction drawGrid.

45
Patrick D

Dans une version plus récente de Leaflet, "zoomed" n'est plus un événement. Il y a maintenant des événements "zoomstart" et "zoomend":

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

C'est la meilleure façon de gérer le dépliant Contrôle du zoom cliqué

    /*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");
    });
0
Mansuri Nurulhuda