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

时间:2013-03-28 00:10:40

标签: javascript leaflet

要重现此问题,您可以转到http://leafletjs.com/,然后在javascript控制台中输入以下内容:

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

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

我正在将传单与emberjs集成,并希望通过外部更改允许缩放更改。如果用户快速更改缩放,则效果不是所需的。

1 个答案:

答案 0 :(得分:5)

名为L.Map.setZoom的{p> L.Map.setView调用L.Map._animateZoomIfClose。 如果map._animatingZoom为真,则任何缩放都将停止。 map._animatingZoom就像寻找缩放动画一样:

  1. 如果true停止缩放,请L.Map._animateZoomIfClose检查,否则请致电L.Map._animateZoom
  2. L.Map._animateZoom设置为true并开始css转换。
  3. 在css过渡结束时设置为false L.Map._onZoomTransitionEnd
  4. 为什么会这样?我认为因为很难打破css过渡工作。

    因此,如果您要禁用任何css转换和转换,您的代码必须正常工作。您还可以添加自己的扩展名:if 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);
            }
        }
    });