はじめに
PLATEAUのデータを利用したwebアプリを作る中で、3D Tiles の利用について悩んだのでまとめておきます
結論
PLATEAUが公開しているデータを利用してアプリに組み込める
データを利用する方法
データについての詳細は上に記したレポジトリに記載されています
ダウンロードをするだけなら、このレポジトリの 3d-tiles ディレクトリのREADMEの通りに実装すれば利用できます
（2024/05/02現在、サンプルコードには誤りがあるのでコピペでは動かないので注意）
利用可能なデータは、同README内に記載されているのでそちらをご確認ください
Three.jsで利用する
ただこの方法ではNext.js と Three.js を用いた場合の描画がうまくいかなかったので、それに対応したデータを利用できないか模索した
以下のパスにアクセスすることで3D Tiles データが利用できる
https://plateau.geospatial.jp/main/data/3d-tiles/${path}/tileset.json
${path}で欲しいデータを示すらしい
path の指定
サンプルの中では以下の設定が用いられている
path='bldg/13100_tokyo/13101_chiyoda-ku/notexture'
これらの設定は PLATEAU が公開している 3dtiles_url.jsonに対応している
| path | summary |
|---|---|
bldg |
${type_en}に対応（固定） |
13100_tokyo |
${city_code}_${city(英語表記)}に対応すると思われる * |
13101_chiyoda-ku |
${ward_code}_${ward_en}に対応 |
notexture |
notextureに対応 |
* cityには city_en のカテゴリがなく、厳密には city を英語表記にした訳ではないものもある
終わりに
PLATEAUが公式で用意している React と three.js のデモでは、どこかからデータををダウンロードして使っているので、それがどこのデータを利用しているのかを調べた
plateau-streaming-tutorialレポジトリのREADMEでは、3DTiles のデータを利用するためには Cesium の利用が必要だと書かれていたが、登録などもろもろ大変だったので、何か利用できる方法がないか探した
ただこの方式でデータの利用がいつまで可能であるかは不明なので、実際に実装するときには自前で用意する必要がありそうですね
参考文献