【テクニカルウェビナー#8】deck.gl 入門〜 Mapbox GL JSをベースマップに利用する方法 〜

本スライドは、Mapbox Japanによるウェビナー「【テクニカルウェビナー#8】deck.gl 入門〜 Mapbox GL JSをベースマップに利用する方法 〜」のスライドです。

目的：Mapbox Maps製品のより詳しい使い方について理解する
ゴール：
・Mapbox GL JSの機能についてさらに理解する
・Turf, deck.gl等のサードパーティツールとの連携方法を理解する

Mapbox Japan公式サイト： https://www.mapbox.jp/
この資料に関するお問い合わせ： https://www.mapbox.jp/contact
このウェビナーはこちらからご覧いただけます：https://www.mapbox.jp/webinars/technical-mapbox-webinar-08

Transcript

1. テクニカルウェビナー #8 deck.gl 入門 　〜 Mapbox GL JSをベースマップに利用する方法 〜
2. 目的・ゴール 目的 • Mapbox Maps製品のより詳しい使い方について理解する ゴール • 新機能、新製品について知る • Mapbox GL JSの機能についてさらに理解する • Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る • Turf, deck.gl等のサードパーティツールとの連携方法を理解する 対象 • Mapbox Maps製品の技術にご興味のある方
3. はじめに • deck.glは大きなデータセットに対しても高パフォーマンスで動作するWebGLベース のデータ可視化ライブラリ • 複数のベースマップに対応 ◦ Mapbox ◦ Google Maps ◦ ESRI • 複数の開発環境 ◦ Pure JS ◦ React ◦ Python
4. ベースマップとの統合 • Overlaid: deck.glが独自のcanvas上に描画 ベースマップのcanvas上に重ねて 表示 • Interleaved: ベースマップのレイヤーとして deck.glを統合
5. サンプルのダウンロード(󰳕) GitHubからcloneもしくはダウンロード % git clone https://github.com/visgl/deck.gl.git % cd deck.gl % git checkout v8.8.21 % cd examples/get-started
6. ベースマップを使用しないサンプル比較
7. 実装方法 • Scripting ◦ HTML上に直接コードを記述 ◦ deck.glはCDNで取得 • PureJS ◦ Webpack/Babel等でHTML/JavaScritpを生成 ◦ deck.glはnpmで取得 • ReactJS ◦ ReactJSでdeck.glを使用 ◦ deck.glはnpmで取得
8. Scripting 1(󰳕) scripting/basic/index.html CDN 地理情報
9. Scripting 2(󰳕) DeckGLの作成 レイヤーの追加
10. Pure JS 1(󰳕) pure-js/basic/app.js % npm install % npm run start インポート
11. Pure JS 2 (󰳕) レイヤーの追加 Deckの作成
12. React 1 (󰳕) react/basic/app.js % npm install % npm run start インポート
13. React 2 (󰳕) JSX
14. 共通の概念 Deck/DeckGLクラスがCanvas等を準備、描画 パラメータ initialViewState: 初期位置設定 Layers GeoJsonLayer ArcLayer
15. ベースマップを使用しないサンプル詳細
16. Pure JSの調査 1(󰳕) % npm run build % ls dist app.js index.html ビルド webpack.config.js 最低限のHTMLを自動生成
17. Pure JSの調査 2(󰳕) index.html Canvasのコンテナなし app.js 作成したJSコードと依存ライブラリをまとめたもの どこにCanvasを作成しているのか？
18. Pure JSの調査 3(󰳕) Deck#constructor canvasを作成 Deck#_cerateCanvas canvasエレメントもしくは親の指定がなけ ればdocument.bodyにcanvasを作成 自動的にBody直下に作成！
19. Pure JSの調査 4(󰳕) もとから存在するscriptタグ直後に canvasが作成されている
20. deck.glのレイヤーを理解する
21. レイヤーの種類 Core Layers: あらゆるデータの表現に利用できる汎用的なレイヤー Aggregation Layers: データを集約して表示するレイヤー Geo Layers: タイルやインデックス（Geo Hash/H3）等地理情報を表現するレイヤー Mesh Layers: 3Dモデルを表現するレイヤー(glTF)
22. ArcLayer (Core Layers)(󰳕) 2地点間を弧で結ぶ dataのどこに始点・終点があるかを指示 始点・終点の色の指定 ベースマップ, map
23. GeoJsonLayer (Core Layers)(󰳕) GeoJSONデータを描画
24. Mapboxをベースマップに使用する
25. パターン 1. Canvasを重ねる(Overlay) DeckGLクラス(Scripting)で用いられる手法 pydeckもDeckGLクラスを使用 2. 直接MapboxのLayerを作成する(Interleaved) 3. Mapbox GL JSのコントロールとして追加する(Overlay/Interleaved)
26. Layerを作成
27. 概要 • MapboxLayerクラスでMapbox GL JSのレイヤーとして挿入 ◦ サンプル • CustomLayerInterface(Mapbox GL JS)を継承 ◦ Mapbox GL JSのWebGLContextを使用して描画 ◦ サンプル ▪ Add a 3D model ▪ Add a custom style layer
28. レイヤーの追加(󰳕)
29. コントロールとして追加(Overlay)
30. 概要 pure-js/mapbox • app.js • index.html • package.json • README.md • webpack.config.json
31. コンテナの作成(󰳕) index.html Mapbox GL JS用のコンテナ
32. Mapの初期化(󰳕) app.js JSONのCOUNTRIESの代わりに mapオブジェクトを作成
33. MapboxOverlay作成(󰳕) Deckではなく DeckOverlay(MapboxOverlay) DeckOverlayをコントロールとして追加
34. コントロールとして追加(Interleaved)
35. 任意のレイヤにiterleavedする
36. MapboxOverlayの処理
37. IControlを実装 IControlはonAddがエントリポイント MapboxOverlayのコード
38. Interleaved / Overlaidの処理比較 Interleaved Overlaid Deck用のコンテナ作成 Mapbox GL JSのレイヤーを作成 mapのWebGL Contextを指定 onAddのタイミングでMapbox GL JSのレイヤーを作 成。 コントロールはダミー。
39. Interleaved / Overlaidの結果 Overlaid Interleaved
40. スタイルを変更する 通常のスタイル変更と同じ
41. まとめ • deck.glは地理情報をグラフィカルに表現するライブラリ • Mapbox GL JS をベースマップとして使用することが可能 • Interleavedを用いることで、Mapbox GL JSのレイヤーを拡張 ◦ 標準でサポートしない地図表現を実現