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
750
新宿ダンジョンを可視化してみた
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
88
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
590
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
440
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.9k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1k
Other Decks in Programming
See All in Programming
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
130
DROBEの生成AI活用事例 with AWS
ippey
0
130
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
[JAWS-UG横浜 #79] re:Invent 2024 の DB アップデートは Multi-Region!
maroon1st
1
140
時計仕掛けのCompose
mkeeda
1
280
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
0
170
Software Architecture
hschwentner
6
2.1k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
137
6.8k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
KATA
mclloyd
29
14k
Faster Mobile Websites
deanohume
306
31k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
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(シェーダー)の知識があれば 可視化の表現の幅は広がる!!