Overpass APIとthree.jsで地図を3D表示

公開:2017-04-22 21:03
更新:2017-07-29 13:18
カテゴリ:シューティングゲーム,overpass apiとthree.jsで地図を3d表示

下の記事のコードをベースに、OverPass APIとthree.jsを使って、建物を3D化して表示してみた。

http://qiita.com/i09158knct@github/items/f0f4c82fed8aab004737

表示してみた結果は以下の通り。

参考にしたコードは、建物の高さデータを利用していなかったので、利用するようにしたのと、高さデータがないものは乱数で高さを与えてみている。またunderscoreやjqueryも除去し、ES6コードを加えたりした。 上の結果は大阪の中心部を表示したものであるが、建物高さが乱数によっている部分があるので、実際とは異なっているが、かなり都会的な街並みが再現されているのではなかろうか。

サンプルはこちら。ちなみに下のサンプルで表示されるのは東京の中心部分。一応マウスでぐりぐりできる。PCによっては処理が重いかもしれない。

https://bl.ocks.org/sfpgmr/raw/a2157d5269ab73cccdbe00839c59a528/

ソースコードはこちら:

https://gist.github.com/sfpgmr/a2157d5269ab73cccdbe00839c59a528