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

2022-01-12 00:00:00 leaflet javascript

要重现此问题，您可以转到 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 为真，那么任何缩放都将停止.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. 在 处设置为 trueL.Map._animateZoom 并开始 css 过渡.
  3. 在 处设置为 falseL.Map._onZoomTransitionEnd 在 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);
        }
    }
});

相关文章