deck.glを使ってGoogle Mapにベクトルタイルを描画してみる

概要説明

前回の記事では、Vector-Tiles-Google-Mapsを用いてGoogle Mapにベクトルタイルを描画させ問題点も紹介しましたが、今回はdeck.glを使ってみます。

deck.gl

deck.glについては、下記の記事を参考にしました。

前提条件

• Google Mapの表示にはGoogle Mapの APIキーが必要です
• ベクトルタイルについては、TerraMap APIの町丁目ポリゴンデータをベクトルタイル配信にしたものです。ベクトルタイルの表示には、deck.glのMVTLayerを用いています

描画してみる

// 事前に npm install deck.gl でdeck.glをインストール
// deck.glのMVTLayerとGoogleMapsOverlayを使用する

import { MVTLayer } from '@deck.gl/geo-layers';
import { GoogleMapsOverlay } from "@deck.gl/google-maps";

(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "YOUR-GOOGLE-MAP-API-KEY",
            // Add other bootstrap parameters as needed, using camel case.
            // Use the 'v' parameter to indicate the version to load (alpha, beta, weekly, etc.)
        });

let map;

async function initMap() {
    const { Map } = await google.maps.importLibrary("maps");

    map = new Map(document.getElementById("map"), {
        center: { lat: 35.68437, lng: 139.75247 },
        zoom: 10,
    });  

    const layer = new MVTLayer({
      id: 'MVTLayer',
      data: [
        //pbfや任意のベクトルタイル配信サーバーのURLに変更可
        'http://localhost:3000/tiles/{z}/{x}/{y}'
      ],
      minZoom: 0,
      maxZoom: 12,
      getFillColor: [120, 150, 180, 220],
      getLineWidth: 10,
      getLineColor: [220, 220, 220],
      pointRadiusUnits: 'pixels',
    });
    

    const overlay = new GoogleMapsOverlay({
      layers: [layer],
    });
    overlay.setMap(map);
}

initMap();
        

実行結果
スムーズに描画されました。

まとめ

deck.glは信頼性があり、ベクトルタイルにおいてもMVTLayer、TileLayer、Tile3DLayerなど、さまざまな既製レイヤが用意されています。操作性もよいのでGoogle Mapにベクトルタイルを描画する有効な方法だと思います。