三次元建物データやシミュレーションデータを円滑に可視化するためのNext.js/Deck.glを用いた汎用WebGISの作成

東京大学では、建物構造物の耐震性評価を都市モデルとしてシミュレーションに生かすためのデータ標準化の設計や、シミュレーション結果の活用方法などを研究しているが、その中でAIGIDとしてWeb上での3D都市モデルなど円滑な可視化を支援した。PLATEAUの建物データなど、様々なデータをシンプルかつ手軽にWeb上に公開する必要があったため、モダンな技術を利用したアーキテクチャとなったが、OSSとしてGithub公開したためそれらについて紹介する。

Transcript

1. Next.jsとDeck.glを使った汎 用WebGISの作成
2. 登壇者写真・アイコンが入るスペースです Next.jsとDeck.glを使った汎用 WebGISの作成 ・西尾悟（株式会社MIEURNE所属） （@nokonoko_1203: https://twitter.com/nokonoko_1203） ・MIERUNEからAIGID（一般社団法人社会基盤情報流通推 進協議会）に出向してます ・主に国土交通データプラットフォームに関わっています ・バックエンドもフロントもインフラ（クラウド）も全部やります
3. 異種シミュレーション比較サイト（益城）
4. 異種シミュレーション比較サイトとは？ ・「強レジリエント化に向けた都市CPS（β版）」の一貫 （https://city-cps.net/） ・建物構造物の耐震性評価をスケールの異なるデータ（建物データやBIMデータ など）標準化仕様を設計 ・シミュレーション結果を活用し、合意形成を分かりやすく正しく進める →このために地図上に可視化し発信！
5. https://view.city-cps.net/
7. 特徴 ・地物の色分けと凡例 ・レイヤークリック時に地図移動 ・データのグルーピング ・属性表示 ・様々なデータ形式
8. でも、一般的なWebGISを作るだけでも手間
9. ・データ加工がそもそも大変 ・データが増えると可視化状態の管理もまぁ手間 ・属性値ごとの色分けは個別に設定しないといけないよね ・凡例は一枚ずつ用意しないといけないんですか…？ ・全部表示させたらパフォーマンスきついかな… ・レイヤーはグループごとにまとめたいよね… ・地物のタイプごとにアイコン分けたいよね ・アコーディオンは閉じたいよね… ・3D構造物どうやって表示させるんじゃ… ・あぁ…ログイン機能があるなぁ… WebGISのここが大変 はい、あっという間にスパゲッティ
10. ただの可視化でも、苦しい 解決策はないのか…
11. simple-geo-viewer
13. https://github.com/aigidjp/simple-geo-viewer
14. ・GeoJSON/MVT/ラスタータイルがサクッと可視化できる ・JSONファイルを書き換えるだけで、タイトル・ヘッダーの色・表示レイヤー・配色・ グルーピング・画面移動位置などを設定できる ・サイドバーのアイコンを個別に設定できる ・Next.jsの機能で静的ファイルを吐き出せるので、手軽にホスティングできる ・（多少複雑な）設定をすれば地物ごとに色分け・凡例表示ができる 特徴
15. { "title": "Simple Geo Viewer", "background_color": "#17a2b8" } タイトル等設定 ・タイトル、ヘッダー色も変更可能
16. { "map": { "center": [139.77, 35.67], "zoom": 11, "bearing": 0, "pitch": 60 } } 初期描画設定 ・緯度経度、ズームレベルを指定 ・傾きや方角も設定可能
17. { "layers": [ { "id": "hinanbasho-tokyo", "type": "geojson", "source": "./data/13.geojson", "getPointRadius": 50 }, { "id": "gyosei-tokyo", "type": "geojson", "source": "./data/N03-21_13_210101.geojson", "getFillColor": [100, 200, 255, 150], "getLineColor": [0, 0, 0, 255], "getLineWidth": 10 } ] } 表示レイヤー設定 ・表示するレイヤー自体の設定と、グ ルーピングの設定は分かれている ・Mapbox Style仕様ライクな記述 ・idとtypeとsourceは必須 （利用可能なtypeはrepoに記載） ・その他のパラメーターはDeck.glに準 拠
18. 表示レイヤー設定
19. [ { "category": "指定緊急避難場所データ ", "url": "https://www.geospatial.jp/ckan/dataset/hinanbasho-13/resource/54b500b8-ef85-47fc-83d7-895b54 88810e", "data": [ { "title": "東京都の避難場所 ", "type": "point", "lng": 139.77132890862, "lat": 35.676572613649, "zoom": 12, "id": ["hinanbasho-tokyo"], "checked": false, "color": "#333333" } ] }, { "category": "行政区域データ ", "url": "https://nlftp.mlit.go.jp/ksj/jpgis/datalist/KsjTmplt-N03.html#prefecture13", "data": [ { "title": "東京都の行政界 ", "type": "polygon", "lng": 139.77132890862, "lat": 35.676572613649, "zoom": 12, "id": ["gyosei-tokyo"], "checked": true, "color": "#333333" } ] } ] サイドバー設定 ・categoryにはグループ名を指定 ・dataでは以下の項目を設定 ・レイヤ名 ・画面移動位置 ・初期表示状態 ・表示レイヤーid ・配列の中に複数入れることでグルー ピング 詳しくはリポジトリを参照
20. [ { "category": "指定緊急避難場所データ ", "url": "hogehoge", "data": [ { "title": "東京都の避難場所", "type": "point", "lng": 139.77132890862, "lat": 35.676572613649, "zoom": 12, "id": ["hinanbasho-tokyo"], "checked": false, "color": "#333333" } ] },... ] サイドバー設定
21. まとめ ・簡単にブラウザ上にデータ可視化するツールを作りました ・誰でも利用することができます ・設定値を変更することでそれなりにカスタマイズ可能です ・手軽にホスティング可能です ・GitHub Actionsのサンプルも用意してます