6

この問題を再現するには、http://leafletjs.com/にアクセスし、javascript コンソールで次のように記述します。

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

最終的な getZoom が返されることを期待していました1。なぜこれが起こるのですか？この問題は、ズーム アニメーションに関連している可能性があります。アニメーションが終了する前に setZoom が呼び出された場合、それは無視されます。

リーフレットを emberjs と統合しており、外部の変更によるズームの変更を許可したいと考えていました。ユーザーがズームをすばやく変更した場合、その効果は望ましくありません。

4

1 に答える 1

5

L.Map.setZoomと呼んL.Map.setViewだ L.Map._animateZoomIfCloseが true の場合map._animatingZoom、ズームは停止します。map._animatingZoomズームアニメーションのように動作します:

  1. L.Map._animateZoomIfCloseif truestop zoom else callで確認してくださいL.Map._animateZoom。
  2. trueatに設定し、 L.Map._animateZoomcss トランジションを開始します。
  3. CSS トランジション終了時にfalseatに設定します。L.Map._onZoomTransitionEnd

なんでそのまま？ブレーク css 遷移作業が難しいからだと思います。

そのため、CSS の変換と遷移を無効にする場合は、コードが正しく機能する必要があります。独自の拡張機能を追加することもでき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);
        }
    }
});
于 2013-03-28T14:42:58.713 に答える