【D3.js】世界地図画像をクライアントサイドで再投影処理する

最終更新日

reprojection

example

正距円筒図法で作成された世界地図画像をクライアント側で他の投影法へ変換し出力します。
結構負荷が高いです。

サンプル

概要を簡単に説明すると、d3.geo.projectionの緯度経度⇔pixcel座標の変換機能を使って以下の処理を行ています。

1.投影法Aを使ってソース画像のpixcel座標をすべて緯度経度に変換。
2.変換した緯度経度を投影法Bを使ってターゲット画像のpixcelの座標に変換。
3.ソース画像のpixcel座標から色情報を取得し、ターゲット画像のpixcelの座標にコピーする。
4.ターゲット画像を出力。

おまけ

NASAが提供している雲量地図画像でもやってみました。
Cloud Fraction (1 month – Terra/MODIS) | NASA

cloud fraction

example