S.F. Page

Programming,Music,etc...

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

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

qiita.com

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

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

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

Open Street Map のデータをthree.jsにインポートする

ソースコードはこちら:

OverPass APIを使って建物データを3D化してみる · GitHub