Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
新宿ダンジョンを可視化してみた
Search
Satoshi Komatsu
April 22, 2024
Programming
3
430
新宿ダンジョンを可視化してみた
2024/04/22
MapLibre Meetup Japan #02 発表資料
https://mug-jp.connpass.com/event/315110
Satoshi Komatsu
April 22, 2024
Tweet
Share
More Decks by Satoshi Komatsu
See All by Satoshi Komatsu
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.2k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
700
Other Decks in Programming
See All in Programming
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
400
Criando a Woovi em uma semana
daniloab
0
120
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
400
FoodGram
iseruuuuu
0
230
Revisiting the Hotwire Landscape after Turbo 8 @ RailsConf 2024, Detroit
marcoroth
3
580
GitLab CI/CD で C#/WPFアプリケーションのテストとインストーラーのビルド・デプロイを自動化する
hacarus
0
580
禅の心を手に入れよ
eltociear
2
460
Build Apps for iOS, Android & Desktop in 100% Kotlin With Compose Multiplatform (mDevCamp 2024)
zsmb
0
500
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
460
RaaP
ksss
0
140
Escolhendo (ou não) o melhor ORM para o seu projeto
andreiacsilva
1
120
Let's learn code review
riofujimon
2
630
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
The Mythical Team-Month
searls
217
42k
How to name files
jennybc
65
93k
Web Components: a chance to create the future
zenorocha
306
41k
The Language of Interfaces
destraynor
151
23k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
14
8.4k
Unsuck your backbone
ammeep
664
57k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Navigating Team Friction
lara
179
13k
Transcript
新宿ダンジョンを ⼩松 聖 可視化してみた 出典:国⼟交通省・ 国⼟地理院
⼩松 聖 @satoshi7190 Satoshi Komatsu フロントエンドエンジニア @satoshi7190 株式会社MIERUNE
1.私とMapLibre 2.新宿ダンジョン可視化の話 3.まとめ
1.私とMapLibre
https://codepen.io/satoshi7190/pen/OJEGqOq MapLibre GL JSで作ったやつ https://codepen.io/satoshi7190/pen/ZERmWMX
1⽉号からMapLibre GL JSの防災マップ作成ハンズオンを執筆 Software Design誌 「位置情報エンジニアリングのすすめ」 2023年8⽉号〜連載中 https://gihyo.jp/magazine/SD https://github.com/satoshi7190/sd-2024-5-sample/tree/main
地理空間データを可視化するなら ですが・・・
最近の私の場合 私
https://threejs.org/ ウェブブラウザ(WebGL)で 3Dグラフィックスを描画するための JavaScriptライブラリ。
地図ライブラリじゃないよ
でも、頑張ればGeoJSONを描画できる 北海道のポリゴンをShapeGeometryで描画する例
ラスターも頑張れば描画できる DEMとDSMのスムーズな切り替え ラスタータイルの並びをシャッフル ⾃由な表現ができる
https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/ 新宿ダンジョンを可視化したよ
2.新宿ダンジョン可視化の話
https://www.jreast.co.jp/estation/stations/866.html 新宿ダンジョンとは • 東京の新宿駅周辺の地下通路 • ⽇本で最も乗降客数が多い駅の⼀つ • 複雑に⼊り組んだ通路が広がっており 迷路のような構造
https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/ DEMO
新宿駅周辺屋内地図オープンデータ (令和2年度更新版 国⼟交通省) https://www.geospatial.jp/ckan/dataset/mlit-indoor-shinjuku-r2 2次元データ → 3次元化する
新宿駅周辺屋内地図オープンデータ (令和2年度更新版 国⼟交通省) GeoJSON 平⾯直⾓座標系 7系(EPSG6677) ShapeFile ⽇本測地系(EPSG:6668 )
新宿駅周辺屋内地図オープンデータ (令和2年度更新版 国⼟交通省) GeoJSON 平⾯直⾓座標系 7系(EPSG6677) GeoJSONの座標点情報から ShapeGeometryで2Dの図形を描く
新宿駅周辺屋内地図オープンデータ (令和2年度更新版 国⼟交通省) GeoJSON 平⾯直⾓座標系 7系(EPSG6677) GeoJSONの座標点情報から ShapeGeometryで2Dの図形を描く ※縦に刺さります
X Z Y 地理座標のXYZ X 緯度 Y 経度 Z ⾼さ
X Z Y X 左から右 Y ⾼さ Z 正⾯から奥 ワールド座標のXYZ(右⼿座標系)
X - Z Y X軸を中⼼に90度 反時計回りに回転させる (-Zの⽅向を北と考える) ワールド座標のXYZ(右⼿座標系)
そのままの地理座標だと 原点から離れてしまう 中⼼座標(EPSG:6677) [-12035.29, -34261.85,0] 原点 [0,0,0]
各座標点 – 中⼼座標 原点 [0,0,0] 地物に対し、中⼼にしたい座標を 各頂点に減算する 中⼼座標(EPSG:6677) [-12035.29, -34261.85,0]
原点0に描画される 原点 [0,0,0]
None
階層ごとのポリゴンデータがある
None
階層データごとに任意の⼀定距離の間隔を空ける Y -Y
ExtrudeGeometryで平⾯を押し上げる
各平⾯を押し上げて⽴体化
の可視化 歩⾏者ネットワーク
歩⾏者ネットワーク 歩道、横断歩道、歩⾏者専⽤道路 などのルートを⽰すラインデータ リンクデータ
歩⾏者ネットワーク 歩道、横断歩道、歩⾏者専⽤道路 などのルートを⽰すラインデータ リンクデータ 歩⾏者ネットワーク リンクデータに階層情報がありません リンクデータは単⼀レイヤーのみです
歩道、横断歩道、歩⾏者専⽤道路 などのルートを⽰すラインデータ リンクデータ ノードデータ 各リンクデータの始点、終点の ポイントデータで階層情報あり 歩⾏者ネットワーク
の3次元化 始点 1F 終点 3F 歩⾏者ネットワーク Y -Y
始点 1F 終点 3F ? の3次元化 歩⾏者ネットワーク Y -Y
2F 中間の点は始点の階層と終点階層の差分階層にした 始点 1F 終点 3F 歩⾏者ネットワークの3次元化 Y -Y
2F 始点 1F 終点 3F 歩道 エスカレーター エスカレーター の⽅向 歩⾏者ネットワーク
エスカレーターなどの⼀⽅通⾏ 歩道などの両⽅通⾏ の⽅向 歩⾏者ネットワーク
シェーダー(GLSL)でアニメーション表現 エスカレーターなどの⼀⽅通⾏ 歩道などの両⽅通⾏ 歩⾏者ネットワークの⽅向
基盤地図情報ダウンロードサービス 国⼟地理院 地上の道路 道路データをQGISのバッファ処理と 切抜き処理で円形加⼯ https://fgd.gsi.go.jp/download/menu.php
レシピはQiitaとGitHubで公開してます https://qiita.com/satoshi7190/items/23d192372877af75b283 https://github.com/satoshi7190/Shinjuku-indoor-threejs-demo
頑張って2次元データを3次元化したけど・・・
https://www.geospatial.jp/ckan/dataset/plateau-13104- shinjuku-ku-2023 https://plateauview.mlit.go.jp/ 最近、新宿駅の3次元データが登場したよ 3D都市モデル(Project PLATEAU)新宿区(2023年度)地下モデル LOD4
ちなみに・・・
MapLibre GL JS のカスタムレイヤーで Three.jsのシーンをマップに統合できる
MapLibre GL JS版新宿ダンジョンを作りました(仮) https://satoshi7190.github.io/Shinjuku-indoor-threejs-maplibre-test/
3.まとめ
地図ライブラリじゃなくても 地理空間データの可視化はできる WebGLやGLSL(シェーダー)の知識があれば 可視化の表現の幅は広がる!!