4

そのため、デフォルトの d3.behavior.zoom() と制限を使用して、マップがページから完全にドラッグされるのを防ぐために、マウス ズーム付きのワールドマップを取得しました。これは機能するのに苦労しましたが、現在は機能しています。

私の問題は、このプロジェクトでも役に立たないズーム + および - ボタンがインターフェイスに必要であり、両方のタイプのズームを備えた例が見つからないことです。それは、マウスのズームのみか、ボタンのみによるくだらないズームのいずれかです。

私は単純に zoom.scale(newScale); を呼び出してみました。しかし、それは何も更新しません。コンソールではスケールが更新されていることがわかりますが、更新されず、マウスでズームすると、ボタンを使用して定義されたスケールに突然スキップするため、正しい軌道に乗っているようです。しかし、翻訳も更新する必要があるようで、マップの中心のようになり、そこにズームするために必要な翻訳を計算する方法がわかりません。

zoom.scale(newScale); を呼び出した後にプロジェクションを更新する方法も知っておく必要があります。その方法であれば。

ズームボタンが明らかに機能していない単純化されたデモを作成しました。 http://bl.ocks.org/jfmmm/f5c62bc056e557b80447

ありがとう！

編集：画面の中央を計算するために使用したのと同じ計算を使用するため、マップの中央にズームしますが、新しい縮尺を適用します。問題は、マップの中央にある国ではなく、画面の中央にあるオブジェクトをズームしたいことです。

function zoomBtn(action) {
    var currentZoom = zoom.scale();

    if( action == 'in' ){
        if(currentZoom < options.maxZoomLevel){
            var newScale = Math.floor(currentZoom) + 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }else{
        if(currentZoom > options.minZoomLevel){
            var newScale = Math.floor(currentZoom) - 1;

            var b = path.bounds(mapFeatures);
            var t = [(width - newScale * (b[1][0] + b[0][0])) / 2, (height - newScale * (b[1][1] + b[0][1])) / 2];

            zoom.scale(newScale)
                .translate(t)
                .event(svg);
        }
    }
}

すぐに私の例を更新します。

4

1 に答える 1

8

左上隅または 0lat/0lon ではなく、画面の中心にズームインするための計算は、正しく行うのがかなり難しいです。Wil Linssen の例からコピーして、Mike Bostock のMap Pan & Zoom I に移植します。重要なのは、この例では、常に投影を再計算するのではなく、SVG 変換を使用してマップを再レンダリングしていることです。ボタンを機能させるには、いくつかの方法があります。

  • ズーム ボタン I - ボタンを押すと、新しいビューに移行します。ボタンを押したままにしても、トランジションは再開されません。

  • ズーム ボタン II - ボタンを押し続けると、新しいビューが 40 ミリ秒ごとに即座に更新されます。これにより、特にボタンを繰り返しクリックしたときに、不快なジャンプが発生します。

  • ズーム ボタン III - ボタンが押されなくなるか、scaleExtent が満たされるまで続く 100 ミリ秒の連鎖トランジション。制御ロジックにより、望ましくないインスタント パンが防止されます。これが使用するものです。

繰り返しになりますが、詳細を正しく理解するのは難しいため、完全な例を提供しています。しかし、満足のいくことに、コア ロジックは理にかなっています。ベクトルをゼロにし、引き伸ばし、ゼロを解除します。

x = (x - center[0]) * factor + center[0];
y = (y - center[1]) * factor + center[1];
于 2014-11-26T21:33:38.293 に答える