为什么两次调用Leaflet的setZoom导致第二次被忽略? [英] Why does calling leaflet's setZoom twice results on the second being ignored?

问题描述

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

To reproduce this problem, you can go to http://leafletjs.com/ and in the javascript console, write the following:

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

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

I was expecting the final getZoom to return 1. Why does this happen? The problem may be related with the zoom animation. If a setZoom is called before the animation ends, it gets ignored.

我正在将传单与emberjs集成在一起，并希望通过外部更改来允许缩放更改.如果用户快速更改缩放比例，则效果不理想.

I'm integrating leaflet with emberjs and wanted to allow zoom changes by external changes. If the user changes zoom quickly, the effect isn't the desired.

推荐答案

L.Map.setZoom 称为 L.Map.setView 名为 L.Map._animateZoomIfClose 的文件. 如果map._animatingZoom为true，则任何缩放将停止. map._animatingZoom的工作方式类似于缩放动画:

L.Map.setZoom called L.Map.setView that called L.Map._animateZoomIfClose. If map._animatingZoom is true then any zoom will stop. map._animatingZoom work like look for zoom animation:

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

1. Check at L.Map._animateZoomIfClose if true stop zoom else call L.Map._animateZoom.
2. Set to true at L.Map._animateZoom and start css transition.
3. Set to false at L.Map._onZoomTransitionEnd on css transition end.

为什么保持原样?我认为是因为很难打破CSS过渡工作.

Why it's as is? I think because it's difficult break css transition work.

因此，如果您将禁用任何CSS转换并进行过渡，则您的代码必须正确运行.您还可以添加自己的扩展名:如果map._animatingZoom === true然后将您的操作放入数组，当map._catchTransitionEnd调用处理此操作并将您的操作从数组和处理中移出时:

So if you will disable any css transform and transition your code must work right. You also can add own extension: if map._animatingZoom === true then put your action to array, when map._catchTransitionEnd called process this and shift your action from array and process:

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

这篇关于为什么两次调用Leaflet的setZoom导致第二次被忽略?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！