問題タブ [d3.geo]

いくつかの場所の間で前後にズームしている地図があります。ただし、マップ座標がずれています。デフォルトでは、マップの中心が [0,0] に設定されているようです。project.center を新しいポイントに変更しましたが、これにより混乱が生じました-- (マップが他の大陸にズームし始めました...)

これは、中心が 0,0 の地図付きプランカーです (マウスを合わせると、下部に座標が表示されます)。

zoomTo関数内にprojection.centerを設定してみましたが、別の問題が発生しました。これは簡単な編集であるべきだと思いますが、私はこれに多くの時間を費やしました。

何を変更する必要があるかについてのアイデアはありますか?

どうもありがとう。

以下のコードも:

誤った座標を示すスクリーンショット:

d3.geo の原点を中心に国のポリゴンを反時計回りに回転させたいと考えています。

たとえば、λ=0.5、φ=49.9 の点を中心にイタリアを -7.2 度回転させてみましょう。まず、これらのオイラー角をアフィン変換パラメーターに変換する必要があります。この場合、パラメータは次のようになります。

そのようなパラメータでQGISアフィン変換プラグインを使用すると、結果のマップは.

同じパラメーターをprojection.streamd3.js に適用すると、結果が大きく異なります (そして正しくありません): https://bl.ocks.org/memoryfull/946a8172d074a865c4ff

(1, 0, 0, 0, 1, 0) アフィン変換は変換なしの期待される結果をもたらすため、コードで射影ストリームを正しく処理しています。

よろしくお願いいたします。

誰かが次のシナリオを説明してくれませんか?

4 つの座標のみを含む 1 つのポリゴン フィーチャを含む GeoJSON ファイルがあるとします。

これをメルカトルに投影し、バウンディング ボックスを取得します。

結果は直感的ではありません。パスの境界ボックスは、投影されたどのポイントよりも大きく、地理境界ボックスは[[-180,-90],[180,90]].

ポリゴンは、ポリゴンの外側の世界全体であると解釈されているようです。これは期待されていますか？ポリゴンをリストされたポイント内の領域として扱うのではなく、なぜそうしているのでしょうか?

Fiddle (デバッガーをオンにしてコンソール ログを表示):

https://jsfiddle.net/pkerpedjiev/emr2g4f8/

openstreetmap タイルの上にいくつかのデータを配置して、基本的なインタラクティブ マップを実装しています。コードは、古典的な d3.geo.tile の例と非常によく似ています: http://bl.ocks.org/mbostock/5342063

ズームとパン中にタイルがちらつくことを除いて、すべてが完全に機能しているようです。この効果は、元の例と、これまでに遭遇した d3.geo.tile の他のすべての使用例でも見られます。この UX バグは、ブラウザーが常にタイルを即座にダウンロードできるとは限らないために発生します。驚くべきことに、特定のタイルがロードされた後でも、その再表示がすぐに行われるとは限りません。ちらつきは時々再発生します。

Leaflet のような滑りやすいマップ ライブラリは、要求されたズーム レベルの準備が整うまで、以前のズーム レベルからキャッシュされたタイルを表示することで、ちらつきを補正しようとします。私の考えでは、d3.geo.tile についても同様のことができればいいと思います。

image.exit()新しいタイルが読み込まれている間、以前に表示されたタイルが画面に表示されたままになる可能性があるという考えで遊んでみました。しかし、残念ながら、何も機能しませんでした。

誰でもこの問題の解決策を提案できますか? ちらつきのないスムーズな D3 マップは、2016 年の世界にふさわしいものです。:–)

UPD

タイルの URL のランダム性を少し下げると、問題が部分的に解決されることがわかります (特定のビューに再度アクセスしたときのちらつきが少なくなります)。

デモ

ただし、これで問題が完全に解決するわけではありません。

州と郡の Census FIPS コードでコード化されたデータがたくさんあります (つまり、ニューヨークは FIPS 36、キングス郡は FIPS 36047 です)。TopoJSON ファイルの d3.geo.albersUSA プロジェクションを使用してそのデータをマッピングしています。ここでは、FIPS コードを州および郡のフィーチャの ID として使用しています。これは、ID で参加する必要があるコロプレスに最適です。

ただし、path.centroid(feature) と LineString パス タイプを使用して、あるフィーチャの重心から別のフィーチャに線を引きたいと考えています。私のデータの簡単な例を次に示します。

count_of_things フィールドを使用して半径を設定し、この同じデータを使用してマップ上に円をプロットしています。それは問題なく動作しています。線を設定するために、FIPS コードと地物の重心を使用してマップ変数を作成し、FIPS コード キーを使用してデータから開始点と終了点を取得しました。

私のコードは線を描いていますが、重心点の間ではありません。ポイントの投影は、マップ投影用に既に調整されているフィーチャからのものであるため、ポイントの投影で何もする必要はないと思いましたが、間違っている可能性があります。これが私のコードです：

React コンポーネントで D3 地理投影を表示しようとしています。

任意のページを表示すると、D3 Geo 投影モジュール内で次のエラーが発生します。

オブジェクトはプロパティまたはメソッド「readFileSync」をサポートしていません

モジュールの index.js の次の行でスローされます。

package.jsonas 依存関係に追加されたモジュールは次のとおりです。

GeoMap以下は、 D3 地理投影プラグインを使用した React コンポーネントのコードです。

注:GeoMapこのエラーは、コンポーネントを使用していないページであっても、任意のページにアクセスすると発生します。

D3 Geo Projection プラグインが「fs」モジュールを見つけられない理由について誰か洞察がありますか?

メルカトル図法 (緯度/経度) の左下と右上の座標がわかっている画像があります。

としてGoogleマップに追加しましたgoogle.maps.GroundOverlay。これにより、正しい結果が得られます

画像の左上 (緑)、右上 (赤)、右下 (シアン)、左下 (赤) の各コーナーにカラー マーカーを追加しました。

d3ははるかに軽量で、Googleマップの機能は必要ないため、topojsonを使用してGoogleマップからd3に移行したいことを除いて、これはすべて問題ありません。

画像のコーナーのマーカーを含む d3 ベースのマップを作成しました。これが結果です。

2 つのウィンドウ (Google マップ マップを含むブラウザーと d3 マップを含むブラウザー) を重ね合わせると、国の境界線とコーナー ポイントを非常に正確に重ねることができます。

これは、Google マップ マップ ブラウザの上に d3-map ブラウザを重ねたアニメーション GIF です。d3-map ブラウザ ウィンドウの透明度は、ツールを使用して変更されています。完全に不透明から完全に透明になり、完全に不透明に戻ります。国名の画像はGoogleマップのものです。

ご覧のとおり、ポイントと国境は非常にうまく一致していますが、レーダー画像は一致していません。d3 イメージを少し下に移動すると問題は緩和されますが、正しい解決策ではありません。Google マップで表示されているのが であることは知っています。

私がやっていること: d3 マップで、投影を作成しています

次に、提供された画像の緯度経度コーナーの境界ボックスを作成します。

そして、それらを緯度経度空間からキャンバスの x、y 座標に投影します。

円を描くと、位置が Google マップの位置と非常に正確に一致します。これは、投影が機能していることを意味します。

円を描く前に、topojson の国境を描いています。

ここで問題が発生します。非常に「安い」方法で画像を適用しています。左上の緯度経度をキャンバスの x、y 空間に投影し、それを の x、y 原点として使用しsvg:imageます。これらのポイントは、上記のカラー サークルに対して既に計算されているため、ここで再利用します。

どういうわけか、コーナーを使用して画像をマップの上に固定するだけで、画像の個々のピクセルデータの射影変換をスキップしています。

画像の各 x、y 位置を緯度/経度の位置として扱い、メルカトル図法を介して各ピクセルをマップに投影する必要があると想定しています。

しかし、私はそれを行う方法についての手がかりがありません。何か案は？d3.geo に似た単純なオーバーレイ プラグインはありgoogle.maps.GroundOverlayますか?

D3.js を使用して全画面表示の世界地図の Projection.scale([value]) の正しい値を計算して決定する方法を知りたいです。

ドキュメントによると、デフォルト値は 150 です。しかし、この「150」は何を表しているのでしょうか。

画面とまったく同じ幅の世界地図を描こうとしています。svg area を window.innerWidth に設定しましたが、世界地図の縮尺にどの値を指定すればよいかわかりません。

場合によっては、フィットさせたい機能の境界を取得する人もいますが、世界地図の境界全体の境界を取得することはできません。

この場合、スケール値を計算する正しい方法は何ですか?

前もって感謝します。