新宿ダンジョンを可視化してみた

2024/04/22
MapLibre Meetup Japan #02 発表資料
https://mug-jp.connpass.com/event/315110

Transcript

1. 新宿ダンジョンを ⼩松 聖 可視化してみた 出典：国⼟交通省・ 国⼟地理院
2. ⼩松 聖 @satoshi7190 Satoshi Komatsu フロントエンドエンジニア @satoshi7190 株式会社MIERUNE
3. 1.私とMapLibre 2.新宿ダンジョン可視化の話 3.まとめ
4. 1.私とMapLibre
5. https://codepen.io/satoshi7190/pen/OJEGqOq MapLibre GL JSで作ったやつ https://codepen.io/satoshi7190/pen/ZERmWMX
6. 1⽉号からMapLibre GL JSの防災マップ作成ハンズオンを執筆 Software Design誌 「位置情報エンジニアリングのすすめ」 2023年8⽉号〜連載中 https://gihyo.jp/magazine/SD https://github.com/satoshi7190/sd-2024-5-sample/tree/main
7. 地理空間データを可視化するなら ですが・・・
8. 最近の私の場合 私
9. https://threejs.org/ ウェブブラウザ(WebGL)で 3Dグラフィックスを描画するための JavaScriptライブラリ。
10. 地図ライブラリじゃないよ
11. でも、頑張ればGeoJSONを描画できる 北海道のポリゴンをShapeGeometryで描画する例
12. ラスターも頑張れば描画できる DEMとDSMのスムーズな切り替え ラスタータイルの並びをシャッフル ⾃由な表現ができる
13. https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/ 新宿ダンジョンを可視化したよ
14. 2.新宿ダンジョン可視化の話
15. https://www.jreast.co.jp/estation/stations/866.html 新宿ダンジョンとは • 東京の新宿駅周辺の地下通路 • ⽇本で最も乗降客数が多い駅の⼀つ • 複雑に⼊り組んだ通路が広がっており 迷路のような構造
16. https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/ DEMO
17. 新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） https://www.geospatial.jp/ckan/dataset/mlit-indoor-shinjuku-r2 ２次元データ → ３次元化する
18. 新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） GeoJSON 平⾯直⾓座標系 7系（EPSG6677） ShapeFile ⽇本測地系（EPSG:6668 ）
19. 新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） GeoJSON 平⾯直⾓座標系 7系（EPSG6677） GeoJSONの座標点情報から ShapeGeometryで2Dの図形を描く
20. 新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） GeoJSON 平⾯直⾓座標系 7系（EPSG6677） GeoJSONの座標点情報から ShapeGeometryで2Dの図形を描く ※縦に刺さります
21. X Z Y 地理座標のXYZ X 緯度 Y 経度 Z ⾼さ
22. X Z Y X 左から右 Y ⾼さ Z 正⾯から奥 ワールド座標のXYZ（右⼿座標系）
23. X - Z Y X軸を中⼼に90度 反時計回りに回転させる （-Zの⽅向を北と考える） ワールド座標のXYZ（右⼿座標系）
24. そのままの地理座標だと 原点から離れてしまう 中⼼座標（EPSG:6677） [-12035.29, -34261.85,0] 原点 [0,0,0]
25. 各座標点 – 中⼼座標 原点 [0,0,0] 地物に対し、中⼼にしたい座標を 各頂点に減算する 中⼼座標（EPSG:6677） [-12035.29, -34261.85,0]
26. 原点0に描画される 原点 [0,0,0]
28. 階層ごとのポリゴンデータがある
30. 階層データごとに任意の⼀定距離の間隔を空ける Y -Y
31. ExtrudeGeometryで平⾯を押し上げる
32. 各平⾯を押し上げて⽴体化
33. の可視化 歩⾏者ネットワーク
34. 歩⾏者ネットワーク 歩道、横断歩道、歩⾏者専⽤道路 などのルートを⽰すラインデータ リンクデータ
35. 歩⾏者ネットワーク 歩道、横断歩道、歩⾏者専⽤道路 などのルートを⽰すラインデータ リンクデータ 歩⾏者ネットワーク リンクデータに階層情報がありません リンクデータは単⼀レイヤーのみです
36. 歩道、横断歩道、歩⾏者専⽤道路 などのルートを⽰すラインデータ リンクデータ ノードデータ 各リンクデータの始点、終点の ポイントデータで階層情報あり 歩⾏者ネットワーク
37. の３次元化 始点 1F 終点 3F 歩⾏者ネットワーク Y -Y
38. 始点 1F 終点 3F ？ の３次元化 歩⾏者ネットワーク Y -Y
39. 2F 中間の点は始点の階層と終点階層の差分階層にした 始点 1F 終点 3F 歩⾏者ネットワークの３次元化 Y -Y
40. 2F 始点 1F 終点 3F 歩道 エスカレーター エスカレーター の⽅向 歩⾏者ネットワーク
41. エスカレーターなどの⼀⽅通⾏ 歩道などの両⽅通⾏ の⽅向 歩⾏者ネットワーク
42. シェーダー（GLSL）でアニメーション表現 エスカレーターなどの⼀⽅通⾏ 歩道などの両⽅通⾏ 歩⾏者ネットワークの⽅向
43. 基盤地図情報ダウンロードサービス 国⼟地理院 地上の道路 道路データをQGISのバッファ処理と 切抜き処理で円形加⼯ https://fgd.gsi.go.jp/download/menu.php
44. レシピはQiitaとGitHubで公開してます https://qiita.com/satoshi7190/items/23d192372877af75b283 https://github.com/satoshi7190/Shinjuku-indoor-threejs-demo
45. 頑張って２次元データを３次元化したけど・・・
46. https://www.geospatial.jp/ckan/dataset/plateau-13104- shinjuku-ku-2023 https://plateauview.mlit.go.jp/ 最近、新宿駅の３次元データが登場したよ 3D都市モデル（Project PLATEAU）新宿区（2023年度）地下モデル LOD4
47. ちなみに・・・
48. MapLibre GL JS のカスタムレイヤーで Three.jsのシーンをマップに統合できる
49. MapLibre GL JS版新宿ダンジョンを作りました（仮） https://satoshi7190.github.io/Shinjuku-indoor-threejs-maplibre-test/
50. 3.まとめ
51. 地図ライブラリじゃなくても 地理空間データの可視化はできる WebGLやGLSL（シェーダー）の知識があれば 可視化の表現の幅は広がる！！