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

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

登壇者写真・アイコンが入るスペースです誰でもすぐにWebGISを始められる simple-geo-viewerを作成しました！・西尾悟（株式会社MIEURNE所属）（@nokonoko_1203: https://twitter.com/nokonoko_1203）・バックエンドもフロントもインフラ（クラウド）も全部やります

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

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

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

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

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

simple-geo-viewer

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

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

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

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

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

表示レイヤー設定

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

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

MVTも表示可能

{ "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

3dtilesも表示可能に！（実験的機能）めちゃくちゃ重いです。

{ "layers": [ { "id": "plateau-sapporo", "type": "3dtiles", "source": "./data/bldg/tileset.json"
} ] } 表示レイヤー設定・tileset.jsonを指定・typeは3dtiles

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

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

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

nokonoko1203

More Decks by nokonoko1203

Other Decks in Technology

Featured

Transcript