GeoJSONで地図をthree.js上に描く
- 2013-10-23
割とまじめにgeo系をやる必要が出てきたのでメモ。
d3.js の geometry 変換を THREE.js 上のレンダラで利用できないかいろいろ調べていて、
d3で地図を描く時、標準になっている GeoJSONという地図データを表現するためのJSONフォーマットが良さそうという事に。*1
この記事を参考に、GeoJSONを読んでTHREE.jsのマテリアルとして表示させてみた。
記事にあるように、 こちらのライブラリで一度 GeoJSONを読み込んで、 d3 の geometry 変換で経緯座標系をメルカトル地図に変換、 SVG Pathにする。地図座標 -> デカルト座標系への変換。
それをTHREE Meshマテリアルのパスにして3Dオブジェクトとして生成する。
国内の地図データが必要なときは、国土交通省国土政策局GISHPのサイトで 国土数値情報のデータが公開されているので、
ここから shape 形式のデータが利用できる。
shap形式のデータを GeoJSON に直すには、 GDAL というコマンドラインのツール や QGIS というpython製の素敵なツールがある。
こちらの記事でとても詳しく紹介されている。
応用して openframeworks でもメッシュマテリアルとして使えないかやってみた。
ラップして addon化してみた。未完成だけどサクっと地図を書きたいときに。
変換式は d3.js のコード内の geometry らへんを参考にした。
今のところメルカトル、パノラマ投影法、ランベルト正積方位図法、ステレオ投影法のモード切り替え可能。
d3 すばらしいので geometry に限らずと THREE.js の合わせ技が他にもないか探っていきたいところ。
*1 TopoJSON という GeoJSON を圧縮したフォーマットがあり、こちらも d3 では標準的なフォーマットになっている。モビリティの事を考えても有利だし TopoJSONに対応したい。