deck.glで地球儀を表示する

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

概要

deck.glはviewを変更することでデフォルトのWebメルカトル図法の地図以外の投影法を使って描画することができます。ここでは、新たに追加されたglobe viewを使って地球儀を表示します。

サンプルコード

解説

基本的には、deck.glコンポーネントのviewsプロパティにGlobeViewのインスタンスを渡して上げるだけで地球儀のようにベースマップやレイヤーを表示します。

ただし、GeoJSONレイヤーはそのままだとベースマップの裏側に回ってしまうことがあるので高さを指定しています。

また、ベースマップを表示しているtileLayerでは、サブレイヤーのBitmapLayerで新たに座標系を設定しています。

この設定をおこなわないと位置がズレてしまうので注意が必要です。