¿Cómo reducir la velocidad de transición del zoom en Leaflet?

Question

Me gustaría reducir la velocidad de la transición del zoom en Leaflet, pero no he descubierto cómo.

Estoy usando map.setView() varias veces para cambiar el nivel de zoom.

---

He probado la solución sugerida aquí: Ajustar una velocidad de zoom más lenta

Que consiste en aumentar el tiempo de transición en CSS para

.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: 2s;
}

Pero no parece funcionar. Se empieza a reducir la velocidad, pero luego sólo salta al nivel de zoom, por lo que no se ve suave en absoluto.

---

La animación panorámica y la duración funcionan muy bien.

He probado todas estas opciones:

map.setView([lat, long], 14, {
    pan: {
        animate: true,
        duration: 1.5
    },
    zoom: {
        animate: true
    }
});

y

var map = L.map("map", {
    center: [45.2403, -123.8512],
    zoom: 12,
    fadeAnimation: true,
    zoomAnimation: true
});

Pero nada parece ralentizar o suavizar la transición del zoom.

Answer 1

Su map.flyTo() tiene las opciones mal formadas, quiere

map.flyTo([lat, long], 14, {
        animate: true,
        duration: 1.5
});

Véase Pan-opciones de Doc . Los mismos parámetros funcionarán también con panTo() y setView() métodos.

Answer 2

Tras examinar más detenidamente el documentación descubrí que es mejor usarlo:

flyTo(<LatLng> latlng, <Number> zoom?, 
    <Zoom/pan options> options?
)

En lugar de:

setView(<LatLng> center, <Number> zoom?,
    <Zoom/pan options> options?
)

Al menos para mi propósito. Ralentiza el zoom y parece un poco más suave. Sin embargo, sería bueno tener más control sobre la velocidad del zoom, pero esto es lo suficientemente bueno por ahora.

Answer 3

Pero no parece funcionar. Empieza a ralentizarse, pero luego sólo salta al nivel de zoom

Eso es debido a esta línea de código aquí, con una duración codificada:

https://github.com/Leaflet/Leaflet/blob/release-v1.0.3/src/map/Map.js#L1573

setTimeout(L.bind(this._onZoomTransitionEnd, this), 250);

Idealmente, las animaciones de zoom en Leaflet 1.x estarían definidas por la transformación CSS. Sin embargo, problemas de compatibilidad entre navegadores hizo necesario codificar ese tiempo de espera.

Podrías sobrecargar el privado _animateZoom haciendo algo como L.Map.prototype._animateZoom = function (center, zoom, startAnim, noUpdate) { ... } haciendo un feo copiar-pegar del original pero cambiando la duración allí. Eso, sin embargo, es un hack muy muy feo y totalmente no recomendado.

Answer 4

Con ReactLeaflet v2 esto funcionó para mí:

    createLeafletElement() {
        if (L.Browser.chrome) {
            L.Browser.passiveEvents = true                                  // to better performance
        }
        const MapInfo = L.Control.extend({
            onAdd: (map) => {
                map.setZoom(26, { animate: true, duration: 2000 })
                this.panelDiv = L.DomUtil.create('newZoomDiv');
                return this.panelDiv;
            }
        });

        return new MapInfo();
    }