代码之家  ›  专栏  ›  技术社区  ›  miguelcobain

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

  •  6
  • miguelcobain  · 技术社区  · 12 年前

    要重现此问题,您可以访问 http://leafletjs.com/ 在javascript控制台中,编写以下内容:

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

    我期待着最后一次getZoom的回归 1 。为什么会发生这种情况? 问题可能与缩放动画有关。如果在动画结束之前调用了setZoom,它将被忽略。

    我正在将传单与emberjs集成,并希望允许通过外部更改进行缩放更改。如果用户快速更改缩放,则效果并非理想。

    1 回复  |  直到 12 年前
        1
  •  5
  •   tbicr    12 年前

    L.Map.setZoom 打电话 L.Map.setView 那叫 L.Map._animateZoomIfClose . 如果 map._animatingZoom 如果为true,则任何缩放都将停止。 地图_设置动画缩放 像查找缩放动画一样工作:

    1. 检查位置 L.Map.animateZoomIfClose(地图_动画缩放关闭) 如果 true 停止缩放其他呼叫 L.Map._animateZoom .
    2. 设置为 真实的 L.地图_动画缩放 并启动css转换。
    3. 设置为 false L.Map._onZoomTransitionEnd 在css转换结束时。

    为什么是这样?我认为这是因为中断css转换工作很困难。

    因此,如果您要禁用任何css转换和转换,您的代码必须正常工作。您也可以添加自己的扩展:如果 map._animatingZoom === true 然后将你的动作放入数组,当 map._catchTransitionEnd 称为process this,并将您的操作从数组和进程中转移:

    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);
            }
        }
    });