deck.gl のベースマップにGoogle Mapsを使う

タイトルではわかりやすいように「DeckglのベースマップにGoogle Mapsを使う」としましたが仕組み的には実は逆で、Google Maps APIが生成する地図のoverlayerにDeck.glのレイヤーを差し込む作りとなっています。
このブログで以前紹介したDeck.glのベースマップを変更する方法とは、まったく別の仕組みで動いているので注意が必要です。

さて、Google MapsをReactで使用するためのコンポーネントはいくつかあるのですが、Deck.glのレイヤーをGoogle Mapsに差し込むためには、Google Mapオブジェクトへアクセスする機能がコンポーネントで提供されている必要があります。
今回は、@react-google-maps/api – npm を使用しましたが、Mapオブジェクトさえアクセスできるなら使い慣れたコンポーネントを使っても問題ありません。

@react-google-maps/api では、onloadプロパティのコールバックでmapオブジェクトにアクセスすることができます。

&lt;GoogleMap
  onLoad={map =&gt; {
    //Google Mapのオブジェクトが取得できる
    console.log(map)
  }}
/&gt;

<GoogleMap

onLoad={map => {

//Google Mapのオブジェクトが取得できる

console.log(map)

}}

Deck.glのレイヤーをGoogle MapsにオーバーレイするにはGoogleMapsOverlayクラスを使います。

const deckOverlay = new GoogleMapsOverlay({
    layers: [
        ... Deck.glレイヤーオブジェクト
    ]
});

&lt;GoogleMap
    onLoad={map =&gt; {
        deckOverlay.setMap(map); //Google MapsにDeck.glレイヤーをオーバーレイする
    }}
/&gt;

const deckOverlay = new GoogleMapsOverlay({

layers: [

... Deck.glレイヤーオブジェクト

]

});

<GoogleMap

onLoad={map => {

deckOverlay.setMap(map); //Google MapsにDeck.glレイヤーをオーバーレイする

}}

注意

あくまでGoogle Mapsが主体で、Deck.glのレイヤーを乗せるだけなので、Google Mapsが対応していないDeck.glの機能などは今の所使えません。
具体的には3Dポリゴンを表示するようなレイヤーは機能しないみたいです。

The Google Maps JavaScript library does not support free rotation of the camera, so sadly the 3D layers of deck.gl may not work very well. deck.gl does not currently support zoom levels below zero, so it will hide itself when the user zooms all the way out.

概要

サンプルコード

解説

注意

投稿者: shimizu