要重现此问题,您可以转到http://leafletjs.com/并在javascript控制台中,编写以下内容:
> map.getZoom()
15
> map.setZoom(10);map.setZoom(1);
Object
> map.getZoom()
10
我期待最后的getZoom返回1.为什么会发生这种情况?
问题可能与缩放动画有关.如果在动画结束之前调用setZoom,则会忽略它.
我正在将传单与emberjs集成,并希望通过外部更改允许缩放更改.如果用户快速更改缩放,则效果不是所需的.
解决方法:
L.Map.setZoom
称为L.Map.setView
,称为L.Map._animateZoomIfClose
.
如果map._animatingZoom为true,则任何缩放都将停止. map._animatingZoom就像查找缩放动画一样:
>检查L.Map._animateZoomIfClose
是否为真,停止缩放,否则拨打L.Map._animateZoom
.
>在L.Map._animateZoom
设置为true并启动css转换.
>在css过渡结束时在L.Map._onZoomTransitionEnd
设置为false.
为什么会这样?我认为因为很难打破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);
}
}
});