概要説明
ベクトルタイルを、Google Map上に描画する方法を調査してみました。
結論から言いますと、Vector-Tiles-Google-Mapsといライブラリを使用して、Google Map上にベクトルタイルを描画します。描画のイメージは以下になります
使用したもの
Vector-Tiles-Google-Maps
Google MapにベクトルタイルをレンダリングするためのJavaScriptライブラリ。
ベクトルタイル(TerraMap API町丁目ポリゴン)
今回使用したベクトルタイルは、TerraMap APIの町丁目ポリゴンデータをベクトルタイル配信にしたものです。
サンプルコード
Vector-Tiles-Google-Mapsをインストールし、optionsオブジェクトにベクタータイルサーバーのURLを指定します。MVTSourceを作成して、overlayMapTypeとしてGoogleMapにインサートします。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Google Map上TerraMap APIのポリゴンをベクトルタイルで表示する</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="map" style="width: 100%; height: 600px"></div>
<script src="dist/vector-tiles-google-maps.js"></script>
<script type="text/javascript">
var map;
function InitGoogleMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.681236, lng: 139.767124 },
zoom: 10,
});
google.maps.event.addListenerOnce(map, "tilesloaded", function () {
InitVectorTiles();
});
}
function InitVectorTiles() {
var options = {
//任意のベクトルタイル配信サーバーのURLに変更してください
url: "http://localhost:3000/tiles/{z}/{x}/{y}",
};
var mvtSource = new MVTSource(map, options);
map.overlayMapTypes.insertAt(0, mvtSource);
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=GoogleMapKey=InitGoogleMap&libraries=&v=weekly"
defer
></script>
</body>
</html>
おわりに
今回はVector-Tiles-Google-Mapsを使用してGoogle Map上にベクトルタイルを描画してみました。
ライブラリを使用して意外と簡単にベクトルタイルを描画することができました。ただ、Google Mapの機能ではなく外部ライブラリの利用について、色々と考慮しなければいけない点もありますので、Google Mapでmvtやpbf形式のベクトルタイルの表示はまだまだ難しいと思います。
Google Mapにベクトルタイルを描画してみる試しとして、deck.glを使う記事を公開しました。
Google Map以外の地図ライブラリでのベクトルタイル表示について、MapLibreを利用した記事がこちらになります。
では、以上になります。最後まで読んでいただき有難うございました。