新宿ダンジョンを可視化してみた

新宿ダンジョンを⼩松聖可視化してみた出典：国⼟交通省・国⼟地理院

⼩松聖 @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年度更新版国⼟交通省） 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]

階層ごとのポリゴンデータがある

階層データごとに任意の⼀定距離の間隔を空ける Y -Y

ExtrudeGeometryで平⾯を押し上げる

各平⾯を押し上げて⽴体化

の可視化歩⾏者ネットワーク

歩⾏者ネットワーク歩道、横断歩道、歩⾏者専⽤道路などのルートを⽰すラインデータリンクデータ

歩⾏者ネットワーク歩道、横断歩道、歩⾏者専⽤道路などのルートを⽰すラインデータリンクデータ歩⾏者ネットワークリンクデータに階層情報がありませんリンクデータは単⼀レイヤーのみです

歩道、横断歩道、歩⾏者専⽤道路などのルートを⽰すラインデータリンクデータノードデータ各リンクデータの始点、終点のポイントデータで階層情報あり歩⾏者ネットワーク

の３次元化始点 1F 終点 3F 歩⾏者ネットワーク Y -Y

始点 1F 終点 3F ？の３次元化歩⾏者ネットワーク Y -Y

2F 中間の点は始点の階層と終点階層の差分階層にした始点 1F 終点 3F 歩⾏者ネットワークの３次元化 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

頑張って２次元データを３次元化したけど・・・

https://www.geospatial.jp/ckan/dataset/plateau-13104- shinjuku-ku-2023 https://plateauview.mlit.go.jp/ 最近、新宿駅の３次元データが登場したよ 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（シェーダー）の知識があれば可視化の表現の幅は広がる！！

新宿ダンジョンを可視化してみた

新宿ダンジョンを可視化してみた

More Decks by Satoshi Komatsu

Other Decks in Programming

Featured

Transcript