Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

【テクニカルウェビナー#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

Mapbox Japan

March 01, 2023
Tweet

More Decks by Mapbox Japan

Other Decks in Technology

Transcript

  1. 目的・ゴール 目的 • Mapbox Maps製品のより詳しい使い方について理解する ゴール • 新機能、新製品について知る • Mapbox

    GL JSの機能についてさらに理解する • Mapbox GL JSとMapbox Maps SDK for Android/iOSとの違いを知る • Turf, deck.gl等のサードパーティツールとの連携方法を理解する 対象 • Mapbox Maps製品の技術にご興味のある方
  2. はじめに Mapbox GL JS + deck.glで実践的なデータ表現 • 国土交通省が提供するデータを地図上に表現 ◦ 医療機関データ(医療機関の地点、名称等)

    • 表現方法 ◦ Mapbox GL JS標準のヒートマップ ◦ deck.glのScreenGridLayer • Jupyter Notebook上でpydeckを実行
  3. 密度(󰳕) color: (一般に)heatmap-densityに基づいて 色を指定。heatmap-densityは内部的に計算 される値で最大値1.0。 weight == 1, intensity ==

    1のとき、Pointにお ける値は正規分布の定数から計算される値 (0.39894)になる。 したがって、weight, intensityで大きな値を指 定すると多くの地点で 1.0を超える値となり、色 が1.0に張り付いてしまう。 0.39 固定値 > 0.39894
  4. 概要 ScreenGridLayer • 各グリッド内の合計値、平均値等でヒストグラムを作成 ◦ 値を色で表現 • 用途によってはheatmapは不向きでこちらを使用 ◦ 例)

    グリッドごとの平均気温 • パラメータ ◦ data: データオブジェクトを指定 ◦ getPosition: dataから座標を取得する方法を指定 ◦ getWeight: dataから値を取得する方法を指定 ◦ aggregation: 集計方法 ▪ 'SUM' | 'MEAN' | 'MIN' | 'MAX';
  5. ArcLayer(󰳕) Base Mapの設定 dataのどこに始点・終点があるかを 指示 始点・終点の色の指定 data: str or list

    of dict of {str: Any} or pandas.DataFrame Jupyter Notebook ではshow()で地図が表示