Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

nokonoko1203
December 04, 2021

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

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

nokonoko1203

December 04, 2021
Tweet

More Decks by nokonoko1203

Other Decks in Technology

Transcript

  1. Next.jsとDeck.glを使った汎
    用WebGISの作成

    View full-size slide

  2. 登壇者写真・アイコンが入るスペースです
    Next.jsとDeck.glを使った汎用
    WebGISの作成
    ・西尾悟(株式会社MIEURNE所属)
    (@nokonoko_1203: https://twitter.com/nokonoko_1203)
    ・MIERUNEからAIGID(一般社団法人社会基盤情報流通推
    進協議会)に出向してます
    ・主に国土交通データプラットフォームに関わっています
    ・バックエンドもフロントもインフラ(クラウド)も全部やります

    View full-size slide

  3. 異種シミュレーション比較サイト(益城)

    View full-size slide

  4. 異種シミュレーション比較サイトとは?
    ・「強レジリエント化に向けた都市CPS(β版)」の一貫
    (https://city-cps.net/)
    ・建物構造物の耐震性評価をスケールの異なるデータ(建物データやBIMデータ
    など)標準化仕様を設計
    ・シミュレーション結果を活用し、合意形成を分かりやすく正しく進める
    →このために地図上に可視化し発信!

    View full-size slide

  5. https://view.city-cps.net/

    View full-size slide

  6. 特徴
    ・地物の色分けと凡例
    ・レイヤークリック時に地図移動
    ・データのグルーピング
    ・属性表示
    ・様々なデータ形式

    View full-size slide

  7. でも、一般的なWebGISを作るだけでも手間

    View full-size slide

  8. ・データ加工がそもそも大変
    ・データが増えると可視化状態の管理もまぁ手間
    ・属性値ごとの色分けは個別に設定しないといけないよね
    ・凡例は一枚ずつ用意しないといけないんですか…?
    ・全部表示させたらパフォーマンスきついかな…
    ・レイヤーはグループごとにまとめたいよね…
    ・地物のタイプごとにアイコン分けたいよね
    ・アコーディオンは閉じたいよね…
    ・3D構造物どうやって表示させるんじゃ…
    ・あぁ…ログイン機能があるなぁ…
    WebGISのここが大変
    はい、あっという間にスパゲッティ

    View full-size slide

  9. ただの可視化でも、苦しい
    解決策はないのか…

    View full-size slide

  10. simple-geo-viewer

    View full-size slide

  11. https://github.com/aigidjp/simple-geo-viewer

    View full-size slide

  12. ・GeoJSON/MVT/ラスタータイルがサクッと可視化できる
    ・JSONファイルを書き換えるだけで、タイトル・ヘッダーの色・表示レイヤー・配色・
    グルーピング・画面移動位置などを設定できる
    ・サイドバーのアイコンを個別に設定できる
    ・Next.jsの機能で静的ファイルを吐き出せるので、手軽にホスティングできる
    ・(多少複雑な)設定をすれば地物ごとに色分け・凡例表示ができる
    特徴

    View full-size slide

  13. {
    "title": "Simple Geo Viewer",
    "background_color": "#17a2b8"
    }
    タイトル等設定
    ・タイトル、ヘッダー色も変更可能

    View full-size slide

  14. {
    "map": {
    "center": [139.77, 35.67],
    "zoom": 11,
    "bearing": 0,
    "pitch": 60
    }
    }
    初期描画設定
    ・緯度経度、ズームレベルを指定
    ・傾きや方角も設定可能

    View full-size slide

  15. {
    "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に準

    View full-size slide

  16. 表示レイヤー設定

    View full-size slide

  17. [
    {
    "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
    ・配列の中に複数入れることでグルー
    ピング
    詳しくはリポジトリを参照

    View full-size slide

  18. [
    {
    "category": "指定緊急避難場所データ ",
    "url": "hogehoge",
    "data": [
    {
    "title": "東京都の避難場所",
    "type": "point",
    "lng": 139.77132890862,
    "lat": 35.676572613649,
    "zoom": 12,
    "id": ["hinanbasho-tokyo"],
    "checked": false,
    "color": "#333333"
    }
    ]
    },...
    ]
    サイドバー設定

    View full-size slide

  19. まとめ
    ・簡単にブラウザ上にデータ可視化するツールを作りました
    ・誰でも利用することができます
    ・設定値を変更することでそれなりにカスタマイズ可能です
    ・手軽にホスティング可能です
    ・GitHub Actionsのサンプルも用意してます

    View full-size slide