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
880
新宿ダンジョンを可視化してみた
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
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
360
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
720
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
540
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
4.1k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1.1k
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
0626 Findy Product Manager LT Night_高田スライド_speaker deck用
mana_takada
0
170
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
570
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
220
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
150
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Scaling GitHub
holman
460
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
A Tale of Four Properties
chriscoyier
160
23k
For a Future-Friendly Web
brad_frost
179
9.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
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(シェーダー)の知識があれば 可視化の表現の幅は広がる!!