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
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
XP, Testing and ninja testing
m_seki
3
250
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
100
ニーリーにおけるプロダクトエンジニア
nealle
0
840
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
200
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
190
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
NPOでのDevinの活用
codeforeveryone
0
840
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GitHub's CSS Performance
jonrohan
1031
460k
Building an army of robots
kneath
306
45k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
300
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Gamification - CAS2011
davidbonilla
81
5.4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Why Our Code Smells
bkeepers
PRO
336
57k
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(シェーダー)の知識があれば 可視化の表現の幅は広がる!!