地理院タイルとOpenStreetMapのデータを使ってthree.jsで立体地図を描画する

  • 51
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

↑の記事に触発されて書きました。乗るしかない、この(地理空間情報のオープンデータ化と、Web3D地図の普及という)ビッグウェーブに。

デモ

※注1 データの読み込み時間長めです
※注2 デスクトップ版のChrome、Firefox、Safariと、Android版のChrome、Firefox辺りは動くはず
※注3 CoffeeScript 1.7.1 で書いたんですが、jsdo.itがまだ1.7.1に対応してなかったので、自前でコンパイルしたjsコードを貼り付けて動かしてます。フォークしにくくてすみません。jsdo.itが1.7.1に対応したら直しておきます。coffee版のソースはGistにあります

内容的には、

  • 国土地理院の地理院タイルAPIを利用して標高情報とテクスチャ画像を取得して、
  • OpenStreetMapのOverpass APIを利用して建物、道路、自然物等の情報を取得して、
  • three.jsを利用して3D化して表示してみた

という感じです。

以下、地理院タイルAPIとOverpass APIについて軽く書きます。

地理院タイルAPI

日本の適当な地域のタイル座標を指定するとその地域の標高データがcsvで取れたり、地図画像や航空写真がpngで取れたりするやつです。

この記事が参考になります。

タイル座標の算出はこの記事を参考にしました。

3D化デモ

ソースコード

Overpass API

OpenStreetMapに登録されている情報を取得できるAPIです。行政区画から建物や道路の情報、果てはベンチの位置まで、ありとあらゆるデータが取得できます。

どんな情報を取得できるかはOpenStreetMapのWikiのこのページにあります。

またOverpass turboという便利なWebアプリでいろいろクエリを試すことができます。詳しくはこのページをどうぞ。

3D化デモ

ソースコード

参考: デモで利用しているデータ

終わりに

なんか投げやりですが以上です。

参考リンク