Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

simple-geo-viewer

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

表示レイヤー設定

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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