問題タブ [d3.geo]

私はD3にかなり慣れていないので、問題を解決する方法を見落としている可能性があります。私は世界地図を持っています (geoJSON とメルカトル図法を使用)。国をクリックすると、投影法がその国に焦点を合わせます (d3.geo.path() から計算された境界ボックスを使用しているため、スケーリングされます)国を中心に変換します)。コードを参照してください：

これは、選択した国がマップの境界線で分割されている場合を除き、うまく機能します。たとえば 、この写真のロシアのように

この場合、境界ボックスはマップ全体の幅に対応するため、国の「中心」を検出せず、国を正しく変換またはスケーリングできません。

1つの国の2つの部分に対応する2つのバウンディングボックスを取得する方法はありますか（そうではないと思います）、または回転とは無関係にロシアの左端と右端のポイントを取得し、現在の投影でそれらの位置を取得することは可能ですか?国全体を中心にできますか？

私はここで迷子になっているので、ヒントがあればとても感謝しています。

WebGL Earth と d3.geo.satellite プロジェクションを組み合わせようとしています。

2 つのプロジェクションを重ね合わせて回転を同期することはできましたが、ズームを同期するのに問題があります。それらを同期してサイズを合わせると、WebGL プロジェクションは変形しますが、d3.geo.satellite は同じままです。私は、projection.scale、projection.distance のさまざまな組み合わせを試しましたが、あまり成功しませんでした。

ここに JS フィドルがあります (リソースをロードするのに少し時間がかかります)。ドラッグして回転できます（うまく機能します）。しかし、ズームインすると (マウスホイールを使用)、問題を確認できます。

https://jsfiddle.net/nxtwrld/7x7dLj4n/2/

重要なコードはスクリプトの一番下にあります - scale 関数です。

私はナミビアのコロプレス マップの開発に熱心に取り組んできましたが、2 つの興味深いツールを見つけました。リーフレットとD3、リーフレットには実装するための明確な指示がありますが、私がやりたいことと機能的に一致していません。ここで D3Geo の出番です。投影を設定するための以下の関数以外はすべて設定しました。

以下のリーフレット関数で行われるように、単に座標を追加するだけの機能はありません。地球中心主義者ではない私たちのために。

そうでない場合は、d3.geo.conicConformal() を使用して座標 (-22.26,16.52) を変換してナミビアを表示する方法を教えてください。

ズーム可能なマップ タイルのこの D3 実装とこの例に従って、特定の都市のパスのストリート ビュー マップを作成しました。マップをロードしましたが、次のような svg パスを追加する際に問題が発生し続けます。

• いくつかの計算されたストローク幅でほとんどのパスが消えます（別のSO投稿はこちら）
• ズームイン中に mouseover および mouseout イベントがトリガーされなくなりました (ストローク幅が原因である可能性もあります)

これらは通常、パスが短い場合、つまり通りから通りへのパスである場合に発生します。しかし、ある国から別の国への道を作ると、うまくいきます。しかし、これは私が必要とするものではありません。

読んでみると、ビューがワールド ビュー レベルで開始されるため、ストリート ビュー レベルにズームインすると、動的に調整される svg 要素 (例: 4.47035e-08 ストローク幅) に対してスケールが大きくなりすぎることが問題だと思います。スケールがそれほど大きくならないように、最初のビューを国/都市レベルに制限する方法はありますか?

または、これを達成する別の方法はありますか？ビューポート? ビューボックス? どんな助けでも大歓迎です！