【D3.js】 Satellite Projection(衛星俯瞰図)てすと

satellite1

D3.jsには上記のような地図を表示するためのProjection(投影法)関数が用意されているのですが……なかなか思うように使いこなせません。
投影法を指定する際の一番難しいポイントは正しい数値を指定しないと、すぐ地図が画面外へ消えてしまうところですね。

Satellite Projectionの各値(rotateやtiltなど)を変更すると、どのように地図の見え方が変わるのか確認するためにテストをつくってみました。

satellite12

Chromeでしか動作確認してません。
example

各値のスライダーを変更すると地図に反映されます。

日本地図のデータは、DIVA-GISからダウンロードしたものを、MapShaperで軽くしてQuantum GISでGeoJSONに変換するといういつもの流れです。
詳しくはこちらの「SHAPEデータの簡素化」を参照してください。

カテゴリー: D3v3