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
760
新宿ダンジョンを可視化してみた
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
110
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
600
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
440
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.9k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1k
Other Decks in Programming
See All in Programming
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
190
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
130
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
200
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
150
Domain-Driven Transformation
hschwentner
2
1.9k
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
Ruby on cygwin 2025-02
fd0
0
150
Software Architecture
hschwentner
6
2.1k
DROBEの生成AI活用事例 with AWS
ippey
0
140
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
130
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Why Our Code Smells
bkeepers
PRO
336
57k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Code Reviewing Like a Champion
maltzj
521
39k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
RailsConf 2023
tenderlove
29
1k
Building Adaptive Systems
keathley
40
2.4k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
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(シェーダー)の知識があれば 可視化の表現の幅は広がる!!