はじめに
2023年4月21日、ジオ展2023が開催されました。会場は大盛況で、皆様の地図に対する熱い思いを感じることができました。
さて、その中で国土地理院が最適化ベクトルタイルのデモを行っていました。そこで、この記事では最適化ベクトルタイルをMapbox GL JS v2上で表示してみます。
最適化ベクトルタイルとは
最適化ベクトルタイルは従来から公開されている国土地理院ベクトルタイルを改良したベクタータイルセットです。特にデータ量を削減することでより高速に地図を描画することができるようになったそうです。ズームレベル毎に
- 特定の面積未満の建物のポリゴンを削除
- 特定の幅未満の道路を削除
といった方法でデータを間引くことでタイルサイズを削減したそうです。
提供されているスタイルを使って表示
Githubでスタイルのサンプルが提供されているので早速使ってみましょう。以下のようにstyleにスタイルのURLを入れるだけでOKです。
mapboxgl.accessToken = YOUR_API_KEY_HERE;
const map = new mapboxgl.Map({
container: 'map',
style: 'https://raw.githubusercontent.com/gsi-cyberjapan/optimal_bvmap/52ba56f645334c979998b730477b2072c7418b94/style/std.json',
center: [139.768435, 35.681054],
zoom: 14,
});
結果は以下のとおりです。
国土地理院からもMapbox GL JS v1.13.0を用いたデモサイトが公開されています。v1とv2の違いは、Mapboxのアクセストークンが必要かどうかです。v2からはMapboxのサーバにホストされたデータを使用しない場合もアクセストークンの設定が必要です。
自分でスタイルを作って表示
URL
「Mapboxのスタイルを体験する」と同様に、道路のみのレイヤーを表示するスタイルを作成します。ソースとレイヤーを定義するのは同じですが、今回はタイルセットのURLをurlではなくtilesで指定します。
そもそもベクタータイルを取得するAPIはこの国土地理院のURLのようにXYZ方式と呼ばれるものが一般的です。これはタイルの座標(X/Y)とズームレベル(Z)を指定してアクセスし、表示するタイルをダウンロードする形式です。それに対し、MapboxはTileJSON APIという機能を提供しています。これは、ベクタータイルのメタ情報を提供するAPIで、この情報の中にXYZ方式のURLが含まれています。
例えば、以下のURLにアクセスすると
https://api.mapbox.com/v4/mapbox.mapbox-streets-v8.json?access_token=YOUR_API_KEY_HERE
以下の様なデータが取得できます。
今回はTileJSONがないので、tilesにXYZ方式のURLを設定します。
帰属表示
国土地理院のデータを使用するので帰属表示(Attribution)を適切に行う必要があります。Mapboxのタイルを使用している場合にはTileJSON APIで取得できる情報を表示していますが、今回はTileJSONを使用していないので手動で表示させる必要があります。
国土地理院のスタイルのサンプルのようにスタイルの中で定義することもできますし、コードで定義することもできます。ここではMapオブジェクト作成時のオプション(customAttribution)で設定します。
帰属表示についてはMapbox GL JS でAttributionをコントロールする -調査編-やMapbox GL JS でアトリビューションをコントロールする -利用編-も合わせてご参照ください。
また、通常左下に表示されるMapboxロゴ（旧称wordmark）の注意点です。以前の規約では「Mapboxのデータ・デザイン・API等を使用しない場合は表示しなくて良い」となっていましたが、現在は必ず表示する必要があります。詳細はヘルプドキュメントをご参照ください。
コード
以上より、JavaScriptのコードは以下のようになります。
const map = new mapboxgl.Map({
container: "map",
style: {
version: 8,
name: "Simple Style",
sources: {
gsi: {
type: "vector",
tiles: [
"https://cyberjapandata.gsi.go.jp/xyz/optimal_bvmap-v1/{z}/{x}/{y}.pbf"
]
}
},
layers: [
{
id: "road",
type: "line",
source: "gsi",
"source-layer": "RdCL",
paint: {
"line-color": "#00ff00",
"line-width": 3
}
}
]
},
center: [139.768435, 35.681054],
zoom: 14,
customAttribution: '<a href="https://github.com/gsi-cyberjapan/optimal_bvmap">国土地理院最適化ベクトルタイル</a>'
});
結果は以下のとおりです。
まとめ
Mapbox以外のベクタータイルでもスタイルが設定できることを確認しました。
Discussion