誰でもすぐにWebGISを始められるsimple-geo-viewerを作成しました！

Transcript

1. 誰でもすぐにWebGISを始められる simple-geo-viewerを作成しました！
2. 登壇者写真・アイコンが入るスペースです 誰でもすぐにWebGISを始められる simple-geo-viewerを作成しました！ ・西尾悟（株式会社MIEURNE所属） （@nokonoko_1203: https://twitter.com/nokonoko_1203） ・バックエンドもフロントもインフラ（クラウド）も全部やります
3. 異種シミュレーション比較サイト（益城）
5. 特徴 ・地物の色分けと凡例 ・レイヤークリック時に地図移動 ・データのグルーピング ・属性表示 ・様々なデータ形式
6. 一般的なWebGISを作るだけでも手間
7. ・データ加工がそもそも大変 ・データが増えると可視化状態の管理もまぁ手間 ・属性値ごとの色分けは個別に設定しないといけないよね ・凡例は一枚ずつ用意しないといけないんですか…？ ・全部表示させたらパフォーマンスきついかな… ・レイヤーはグループごとにまとめたいよね… ・地物のタイプごとにアイコン分けたいよね ・アコーディオンは閉じたいよね… ・3D構造物どうやって表示させるんじゃ… ・あぁ…ログイン機能があるなぁ… WebGISのここが大変 はい、あっという間にスパゲッティ
8. ただの可視化でも、苦しい 解決策はないのか…
9. simple-geo-viewer
11. https://github.com/aigidjp/simple-geo-viewer
12. ・GeoJSON/MVT/ラスタータイルがサクッと可視化できる ・JSONファイルを書き換えるだけで、タイトル・ヘッダーの色・表示レイヤー・配色・ グルーピング・画面移動位置などを設定できる ・サイドバーのアイコンを個別に設定できる ・Next.jsの機能で静的ファイルを吐き出せるので、手軽にホスティングできる ・（多少複雑な）設定をすれば地物ごとに色分け・凡例表示ができる 特徴
13. { "title": "Simple Geo Viewer", "background_color": "#17a2b8" } タイトル等設定 ・タイトル、ヘッダー色も変更可能
14. { "map": { "center": [139.77, 35.67], "zoom": 11, "bearing": 0, "pitch": 60 } } 初期描画設定 ・緯度経度、ズームレベルを指定 ・傾きや方角も設定可能
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に準 拠
16. 表示レイヤー設定
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 ・配列の中に複数入れることでグルー ピング 詳しくはリポジトリを参照
18. [ { "category": "指定緊急避難場所データ ", "url": "hogehoge", "data": [ { "title": "東京都の避難場所", "type": "point", "lng": 139.77132890862, "lat": 35.676572613649, "zoom": 12, "id": ["hinanbasho-tokyo"], "checked": false, "color": "#333333" } ] },... ] サイドバー設定
19. MVTも表示可能
20. { "layers": [ { "id": "town-boundary", "type": "mvt", "source": "./data/boundary_mvt/{z}/{x}/{y}.pbf", "getFillColor": [255, 255, 0, 100], "getLineColor": [0, 0, 0, 255], "getLineWidth": 15, "minZoom": 10, "maxZoom": 18, "visible": true } ] } 表示レイヤー設定 ・xyzでpbfを指定 ・typeはmvt ・getFillColorなどgeojsonと似たよう な設定が可能 ・描画されるズームレベルもOK
21. 3dtilesも表示可能に！（実験的機能） めちゃくちゃ重いです。
22. { "layers": [ { "id": "plateau-sapporo", "type": "3dtiles", "source": "./data/bldg/tileset.json" } ] } 表示レイヤー設定 ・tileset.jsonを指定 ・typeは3dtiles
23. まとめ ・簡単にブラウザ上にデータ可視化するツールを作りました ・誰でも利用することができます ・設定値を変更することでそれなりにカスタマイズ可能です ・手軽にホスティング可能です ・GitHub Actionsのサンプルも用意してます