Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

⼩松 聖 @satoshi7190 Satoshi Komatsu フロントエンドエンジニア @satoshi7190 株式会社MIERUNE

Slide 3

Slide 3 text

1.私とMapLibre 2.新宿ダンジョン可視化の話 3.まとめ

Slide 4

Slide 4 text

1.私とMapLibre

Slide 5

Slide 5 text

https://codepen.io/satoshi7190/pen/OJEGqOq MapLibre GL JSで作ったやつ https://codepen.io/satoshi7190/pen/ZERmWMX

Slide 6

Slide 6 text

1⽉号からMapLibre GL JSの防災マップ作成ハンズオンを執筆 Software Design誌 「位置情報エンジニアリングのすすめ」 2023年8⽉号〜連載中 https://gihyo.jp/magazine/SD https://github.com/satoshi7190/sd-2024-5-sample/tree/main

Slide 7

Slide 7 text

地理空間データを可視化するなら ですが・・・

Slide 8

Slide 8 text

最近の私の場合 私

Slide 9

Slide 9 text

https://threejs.org/ ウェブブラウザ(WebGL)で 3Dグラフィックスを描画するための JavaScriptライブラリ。

Slide 10

Slide 10 text

地図ライブラリじゃないよ

Slide 11

Slide 11 text

でも、頑張ればGeoJSONを描画できる 北海道のポリゴンをShapeGeometryで描画する例

Slide 12

Slide 12 text

ラスターも頑張れば描画できる DEMとDSMのスムーズな切り替え ラスタータイルの並びをシャッフル ⾃由な表現ができる

Slide 13

Slide 13 text

https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/ 新宿ダンジョンを可視化したよ

Slide 14

Slide 14 text

2.新宿ダンジョン可視化の話

Slide 15

Slide 15 text

https://www.jreast.co.jp/estation/stations/866.html 新宿ダンジョンとは • 東京の新宿駅周辺の地下通路 • ⽇本で最も乗降客数が多い駅の⼀つ • 複雑に⼊り組んだ通路が広がっており 迷路のような構造

Slide 16

Slide 16 text

https://satoshi7190.github.io/Shinjuku-indoor-threejs-demo/ DEMO

Slide 17

Slide 17 text

新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） https://www.geospatial.jp/ckan/dataset/mlit-indoor-shinjuku-r2 ２次元データ → ３次元化する

Slide 18

Slide 18 text

新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） GeoJSON 平⾯直⾓座標系 7系（EPSG6677） ShapeFile ⽇本測地系（EPSG:6668 ）

Slide 19

Slide 19 text

新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） GeoJSON 平⾯直⾓座標系 7系（EPSG6677） GeoJSONの座標点情報から ShapeGeometryで2Dの図形を描く

Slide 20

Slide 20 text

新宿駅周辺屋内地図オープンデータ （令和2年度更新版 国⼟交通省） GeoJSON 平⾯直⾓座標系 7系（EPSG6677） GeoJSONの座標点情報から ShapeGeometryで2Dの図形を描く ※縦に刺さります

Slide 21

Slide 21 text

X Z Y 地理座標のXYZ X 緯度 Y 経度 Z ⾼さ

Slide 22

Slide 22 text

X Z Y X 左から右 Y ⾼さ Z 正⾯から奥 ワールド座標のXYZ（右⼿座標系）

Slide 23

Slide 23 text

X - Z Y X軸を中⼼に90度 反時計回りに回転させる （-Zの⽅向を北と考える） ワールド座標のXYZ（右⼿座標系）

Slide 24

Slide 24 text

そのままの地理座標だと 原点から離れてしまう 中⼼座標（EPSG:6677） [-12035.29, -34261.85,0] 原点 [0,0,0]

Slide 25

Slide 25 text

各座標点 – 中⼼座標 原点 [0,0,0] 地物に対し、中⼼にしたい座標を 各頂点に減算する 中⼼座標（EPSG:6677） [-12035.29, -34261.85,0]

Slide 26

Slide 26 text

原点0に描画される 原点 [0,0,0]

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

ExtrudeGeometryで平⾯を押し上げる

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

2F 始点 1F 終点 3F 歩道 エスカレーター エスカレーター の⽅向 歩⾏者ネットワーク

Slide 41

Slide 41 text

エスカレーターなどの⼀⽅通⾏ 歩道などの両⽅通⾏ の⽅向 歩⾏者ネットワーク

Slide 42

Slide 42 text

シェーダー（GLSL）でアニメーション表現 エスカレーターなどの⼀⽅通⾏ 歩道などの両⽅通⾏ 歩⾏者ネットワークの⽅向

Slide 43

Slide 43 text

基盤地図情報ダウンロードサービス 国⼟地理院 地上の道路 道路データをQGISのバッファ処理と 切抜き処理で円形加⼯ https://fgd.gsi.go.jp/download/menu.php

Slide 44

Slide 44 text

レシピはQiitaとGitHubで公開してます https://qiita.com/satoshi7190/items/23d192372877af75b283 https://github.com/satoshi7190/Shinjuku-indoor-threejs-demo

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

https://www.geospatial.jp/ckan/dataset/plateau-13104- shinjuku-ku-2023 https://plateauview.mlit.go.jp/ 最近、新宿駅の３次元データが登場したよ 3D都市モデル（Project PLATEAU）新宿区（2023年度）地下モデル LOD4

Slide 47

Slide 47 text

ちなみに・・・

Slide 48

Slide 48 text

MapLibre GL JS のカスタムレイヤーで Three.jsのシーンをマップに統合できる

Slide 49

Slide 49 text

MapLibre GL JS版新宿ダンジョンを作りました（仮） https://satoshi7190.github.io/Shinjuku-indoor-threejs-maplibre-test/

Slide 50

Slide 50 text

3.まとめ

Slide 51

Slide 51 text

地図ライブラリじゃなくても 地理空間データの可視化はできる WebGLやGLSL（シェーダー）の知識があれば 可視化の表現の幅は広がる！！