javascript - 为什么调用传单的 setZoom 两次会导致第二次被忽略？

Question

要重现此问题，您可以转到 http://leafletjs.com/并在 javascript 控制台中，写入以下内容:

> map.getZoom()
15
> map.setZoom(10);map.setZoom(1);
Object
> map.getZoom()
10

我期待最终的 getZoom 返回 1。为什么会这样？ 该问题可能与缩放动画有关。如果在动画结束之前调用了 setZoom，它将被忽略。

我正在将 leaflet 与 emberjs 集成，并希望允许通过外部更改更改缩放比例。如果用户快速更改缩放比例，则效果不是预期的。

Answer 1

L.Map.setZoom称为 L.Map.setView那叫L.Map._animateZoomIfClose . 如果 map._animatingZoom 为真，则任何缩放都将停止。 map._animatingZoom 就像寻找缩放动画一样工作:

1. 查看L.Map._animateZoomIfClose如果 true 停止缩放，否则调用 L.Map._animateZoom .
2. 在 L.Map._animateZoom 处设置为 true并开始 CSS 转换。
3. 在 L.Map._onZoomTransitionEnd 处设置为 false在 CSS 转换结束时。

为什么会这样？我认为是因为很难打破 css 转换工作。

因此，如果您要禁用任何 css 转换和转换，您的代码必须能够正常工作。您还可以添加自己的扩展:如果 map._animatingZoom === true 然后将您的操作放入数组，当 map._catchTransitionEnd 调用处理此操作并将您的操作从数组和过程:

if (L.DomUtil.TRANSITION) {
    L.Map.addInitHook(function () {
        L.DomEvent.on(this._mapPane, L.DomUtil.TRANSITION_END, function () {
            var zoom = this._zoomActions.shift();
            if (zoom !== undefined) {
                this.setZoom(zoom);
            }
        }, this);
    });
}

L.Map.include(!L.DomUtil.TRANSITION ? {} : {
    _zoomActions: [],
    queueZoom: function (zoom) {
        if (map._animatingZoom) {
            this._zoomActions.push(zoom);
        } else {
            this.setZoom(zoom);
        }
    }
});