【テクニカルウェビナー#9】Mapbox GL JS + deck.gl

本スライドは、Mapbox Japanによるウェビナー「【テクニカルウェビナー#9】Mapbox GL JS + deck.gl」のスライドです。

目的：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-09

Transcript

1. テクニカルウェビナー #9 Mapbox GL JS + deck.gl
2. 目的・ゴール 目的 • Mapbox Maps製品のより詳しい使い方について理解する ゴール • 新機能、新製品について知る • Mapbox GL JSの機能についてさらに理解する • Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る • Turf, deck.gl等のサードパーティツールとの連携方法を理解する 対象 • Mapbox Maps製品の技術にご興味のある方
3. はじめに Mapbox GL JS + deck.glで実践的なデータ表現 • 国土交通省が提供するデータを地図上に表現 ◦ 医療機関データ（医療機関の地点、名称等） • 表現方法 ◦ Mapbox GL JS標準のヒートマップ ◦ deck.glのScreenGridLayer • Jupyter Notebook上でpydeckを実行
4. ヒートマップ
5. ヒートマップとは • データの密度を色で表現 • Mapbox GL JSはheatmap layerとして実装 ◦ サンプル ◦ チュートリアル
6. ヒートマップの原理 • カーネル密度推定を用いて分布を推定 ◦ Point (Feature) を正規分布の中央とする ◦ すべてのPointの正規分布の山を足し合わせる ◦ Point間をなだらかに色変化 • ブログ
7. サンプル確認 1(󰳕) weight: どのデータを採用するかを指定。ここ では地震データのマグニチュードが大きいとき に1.0となるように指定 intensity: （一般に）ズームレベルに応じて weightに乗じる値を変更させる。ズームレベ ルが小さいときたくさんの Featureが密集し、 密度が高くなるため intensityにより値を小さく する。 Create a heatmap layer リファレンス
8. サンプル確認 2(󰳕) 密度に応じた色の設定 Bandwidthの設定 不透明度の設定
9. 密度(󰳕) color: （一般に）heatmap-densityに基づいて 色を指定。heatmap-densityは内部的に計算 される値で最大値1.0。 weight == 1, intensity == 1のとき、Pointにお ける値は正規分布の定数から計算される値 （0.39894）になる。 したがって、weight, intensityで大きな値を指 定すると多くの地点で 1.0を超える値となり、色 が1.0に張り付いてしまう。 0.39 固定値 > 0.39894
10. 医療機関データをheatmapで表示
11. 医療機関データ • 国土交通省からダウンロード ◦ 基準を満たす医療機関の名称・住所・座標・区分等 • ShapefileなのでGeoJSONに変換 ◦ QGISを使うと簡単に変換可能 医療機関の件数でヒートマップを作成
12. QGISでの変換(󰳕) 1. zipファイルをドラック＆ドロップ 2. 右クリック->Export->Save Features As… 3. GeoJSONを選択 4. 保存先を設定 5. OK
13. コード(󰳕) 医療機関の「件数」がデータ なので、常に1 Zoom 20で一件が約0.4
14. 結果(󰳕) H22 R2
15. 医療機関データをScreenGridLayerで表示
16. 概要 ScreenGridLayer • 各グリッド内の合計値、平均値等でヒストグラムを作成 ◦ 値を色で表現 • 用途によってはheatmapは不向きでこちらを使用 ◦ 例) グリッドごとの平均気温 • パラメータ ◦ data: データオブジェクトを指定 ◦ getPosition: dataから座標を取得する方法を指定 ◦ getWeight: dataから値を取得する方法を指定 ◦ aggregation: 集計方法 ▪ 'SUM' | 'MEAN' | 'MIN' | 'MAX';
17. コード(󰳕) heatmap-radiusのデフォルトに合わせる
18. 結果(󰳕)
19. pydeck
20. pydeckとは • deck.glのPython実装（リファレンス） • Deck#to_html()でHTMLを出力 ◦ Jupyter NotebookではDeck#show()で 地図表示 • Base mapとしてMapboxが利用可 ◦ v1.13.0 • Overlayのみ % pip install pydeck
21. ArcLayer(󰳕) Base Mapの設定 dataのどこに始点・終点があるかを 指示 始点・終点の色の指定 data: str or list of dict of {str: Any} or pandas.DataFrame Jupyter Notebook ではshow()で地図が表示
22. ScreenGridLayer(󰳕)
23. まとめ • Heatmapの内部処理 • ScreenGridLayerの使い方 • データ処理方法 • pydeckの使い方