Why does calling leaflet#39;s setZoom twice results on the second being ignored?(为什么调用传单的 setZoom 两次导致第二次被忽略?)
问题描述
要重现此问题,您可以转到 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:
- 查看
L.Map._animateZoomIfClose
如果true
停止缩放,否则调用L.Map._animateZoom
. - 在 处设置为
true
L.Map._animateZoom
并开始 css 过渡. - 在 处设置为
false
L.Map._onZoomTransitionEnd
在 css 过渡结束时.
- Check at
L.Map._animateZoomIfClose
iftrue
stop zoom else callL.Map._animateZoom
. - Set to
true
atL.Map._animateZoom
and start css transition. - Set to
false
atL.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);
}
}
});
这篇关于为什么调用传单的 setZoom 两次导致第二次被忽略?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:为什么调用传单的 setZoom 两次导致第二次被忽略?
基础教程推荐
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01