deck.glで特定の地物を画面内に自動的に収める。

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

特定の地物やマーカ群などが画面内にちょうど収まるようにカメラ(viewState)を自動的に設定する方法です。

サンプルコード

都道府県をクリックするとその県が画面内に収まる位置へカメラが移動します。

解説

WebMercatorViewportを使うと、特定の範囲(bounding box)が画面にちょうど収まる緯度経度とズームレベルを算出することができます。

ここでは、turf.jsを使ってクリックされた都道府県のbounding boxを取得し、その値を WebMercatorViewport にわたすことで、クリックされた都道府県がちょうと画面内に収まるようにviewStateを更新しています。

ポイントとしては WebMercatorViewport のインスタンスを生成する際に、deck.glの描画領域のサイズ(width.height)をオプションで指定することです。描画領域のサイズが正しく指定されていないと、正しい値を計算できません。