この記事は、FOSS4G Advent Calendar 2024 シリーズ2の25日目の内容になります。(が、毎度のことながら遅れてしまって申し訳ありません...
)
はじめに
deck.glや地図データ可視化については以前から興味があって、今年の7/22には以下のPLATEAUイベントに参加して、実際に何か作ってみようと思いました。
身近な関西エリアで、PLATEAUが整備されていて、かつ、点群データもオープンデータとして公開されている京橋駅(大阪)周辺が良さそうに思いましたので、こちらを対象エリアとし、
UI/UXなどのデザイン周りを自力で組める自信がなかったので、deck.gl、loaders.glのサンプルサイトから、見た目の良い loaders.glの3D Tiles サンプルを元に、Vite+pnpm構成でデモアプリを作成しました。
デモサイト
デモサイトは以下のURLからアクセスできます。
URL: https://sanak.github.io/kyobashi-osaka-3d-sandbox/
基本操作
- ページ読み込み時は京橋駅の京阪・JR連絡通路の点群データを表示します
- ドラッグ、スワイプで視点を並行移動します
- マウスホイール、ピンチイン・ピンチアウトで視点を前後移動します
- Ctrlキーを押下しながらドラッグで視点を回転します
- 右上のコントロールパネルの [3D Tiles] ドロップダウンリストから別のデータを選択すると、選択したデータ範囲に移動します
注意事項
- [3D Tiles] ドロップダウンリスト内の [PLATEAUデータ] / [建築物]、[道路] データセットは、現在表示できません
- Linux環境のブラウザ(Firefox、Chrome)では表示がかなりもたつくかもしれません
- 現時点では、モバイル端末上では視点の回転がタッチ操作でできません
- モバイル端末で点群データを読み込み続けると、ブラウザがクラッシュするかもしれません
- PC・モバイル端末とも、地表面に近い箇所で操作を行うと、過大に飛んでしまうようです
- 視点の回転時に、点群データと背景タイルレイヤの重畳が正しく行われずに、ずれる場合があります
いずれも、時間のある時に改善できないか、少し確認してみます...。
ソースコード
ソースコードは以下のURLからアクセスできます。
URL: https://github.com/sanak/kyobashi-osaka-3d-sandbox
備考
- 今回作成したdeck.gl+React版(
apps/deckgl-react)では、ViteでReact+TypeScriptのテンプレートから初期化し、以下のloaders.glの3D Tilesサンプルのコードを上書きしたものをベースにしています - TypeScriptの文法エラーが多々発生していて、デプロイ用のビルド時には tsc による型チェックをスキップしています
- 元のサンプルコードの記載もReactの古い書き方になっているようなので、React Hooksを利用した書き方に変更の予定です
- PLATEAUの3D Tilesデータの表示が上手く行かないため、建築物レイヤについては、別途GeoJSONレイヤとして表示する予定です
点群データから3D Tilesの変換
点群データから3D Tilesへの変換にあたっては、以下のサイトを参考にさせて頂きました。
変換の際に実際に使用したコマンドなどは、以下の data/pointcloud ディレクトリ内の README.md にまとめています。
おわりに
以上、作成したデモアプリの概要について記載しました。
注意事項、備考に記載のとおり、まだまだ課題がたくさんありますが、冬休み+来年の宿題にしたいと思います。
それでは、良いお年を！