2
27
2026
MapboxでカスタムWebmap作りに挑戦 #3（地理院のベクタータイルを表示する）
ベクタータイルについて
前回の記事『MapboxでカスタムWebmap作りに挑戦 #2』からかなり間が開いてしまったが、国土地理院のベクタータイルをMapbox等のフレームワークを用いて、WEBサイト上に表示させる方法について概要を説明していくことにする．
前回までの記事では、Mapbox GL を用いてベクタータイル地図を表示する際にとても重要な役割を果たしているスタイルについて簡単にその概要を紹介した．このスタイルを自分で作成するのはかなりの力量と地図作りのデザインセンスが要求されるが、既存のスタイルをベースに部分的にカスタマイズを加える程度であれば、Mapbox Studioなどのツールを使って割と簡単に地図のスタイルを変更することが可能だ．
スタイルについてある程度理解できたところで、今度はベクター形式の地図データの中身であるベクタータイルデータセットについて、その構造をほんの少し探ってみることにする．
Mapboxが使用しているベクタータイルの仕様はCreative Commons 3.0ライセンスで一般に公開されており、最新のバージョンは “Vector Tile Specification V2.1“としてGitHub上に置かれている．
このベクタータイルの仕様はMapbox社が2014年にV1.0として公開したものであるが、ベクタータイルの規格としては最も一般的なもので、ベクタータイルのデファクトスタンダード的な位置づけのものだ．このドキュメントの目的にも書かれているが、タイル形式のベクターデータをクライアントのブラウザーやサーバサイドで効率的かつ高速にレンダリングさせることを目的として開発されている．
ベクタータイルのデータはテキストではなくバイナリデータで、Google Protocol Bufferというエンコード方式が用いられている．
私はProtocol Bufferについてはきちんとした知識や知見を持ち合わせていないので、Protocol Bufferについての解説はできないが、Googleさんによると『”language-neutral, platform-neutral,extensible mechanism for serializing structured data”（言語やプラットフォームに依存しない構造化されたデータをシリアライズ化するための拡張可能な機構）』だそうな．
エンコードされたデータはXMLやJSONなどのテキスト形式ではなくバイナリーデータなので、データ通信量を大幅に削減することが可能になる．ベクター地図タイルデータのような構造化されたデータをこのProtocol Bufferを用いて汎用的なバイナリデータに変換することで、地図データサイズの大幅な圧縮を実現しているとのことだ．
Protocol BufferでエンコードすることでJSONやXMLなどのテキスト化されたデータと較べると数分の1から数十分の1までデータを圧縮可能となるそうだ．ベクター地図データのような膨大なデータを取り扱うにはProtocol Bufferの利用は理にかなっているのだろう．
ベクタータイルの仕様書の内容を要約すると、
データ形式はGoogle Protocol Buffersでエンコードされたもので、ファイルの拡張子は “.mvt” とする．MIME形式は “application/vnd.mapbox-vector-tile” とする．
ベクタータイルは、投影法により規定される正方形の領域に区切られた範囲内の地物に関するベクトルデータで、データの中身には境界や投影法に関する情報は含めない．デコーダ側では予め境界と投影法に関する情報を持っているという前提で作成されている．
投影法として、Web Mercator projection (Wikipedia)を基準とし、Google Mapsや地理院地図で用いられているタイル座標形式を採用する．
タイルデータを配信する際のURLのスキームは https://domain/Z/X/Y.mvt のような形式を用いる．
なお、URLのスキームで指定する Z(Zoomレベル）、X（タイルのX座標）、Y（タイルのY座標）の値は、国土地理院のホームページ 『タイル座標確認ページ』で調べると、目的のタイルを簡単に探し出すことが可能だ．
実際のベクタータイルのProtocol Buffer形式のデータ構造は、“Vector Tile protobuf schema document” で定義されている．
このドキュメントの中で、実際のジオメトリデータがどのようにエンコードされるのかが具体的に説明されているので、ベクタータイルの中身のイメージを掴みやすいのではないかと思う．とりあえずベクタータイルの中身がこのようなバイナリデータの塊であるということを知っているだけで良いだろう
『国土地理院ベクトルタイル提供実験』について
国土地理院ではこれまでのラスターイメージ形式の地理院地図以外に、試験的な位置づけではあるが『地理院地図Vector』と称する新しいベクタータイル形式のWEBマップを一般に公開している．
地理院地図Vectorで公開されているベクタータイル形式の地図データに関しては、国土地理院のGitHubサイト https://github.com/gsi-cyberjapan 上で地図のサンプルや詳しい仕様等が公開されている．
ベクトルタイル提供実験で提供されているタイルの仕様やスタイル定義等については、GitHubリポジトリの “gsimaps-vector-experiment” に詳細が記載されている．
ベクタータイルの仕様
従来のラスタイメージタイルと同じタイル座標形式で配布されており、タイルデータにアクセスするURLは
https://cyberjapandata.gsi.go.jp/xyz/{t}/{z}/{x}/{y}.{ext}
となっている．ファイルの拡張子は、”.mvt” ではなく”.pbf”を用いている．
ベクタータイルのズームレベルは、ラスタータイルのズームレベルよりも1レベル小さな値となっており、ラスターのズームレベルが14の場合と同じスケールで表示するには、ズームレベルを13に設定する必要がある．
ベクタータイルにどのような項目がデータとして記載されているのかは、下記のドキュメントに記載されているので、目的の地物の表示スタイルを自分で調整する場合は、この内容を確認しながら自分でスタイルファイルの該当する項目を編集することになる．
・地物コード及び表示ズームレベル一覧 （PDF版）
地物情報の一覧
・地物等の属性一覧 （PDF版）
対象となる地物のコードや属性を基に、自分でスタイルの定義を変更することによって地図を自分の好みのスタイルで表示することができるようになる．地理院のベクタータイルに含まれていない地物や自分だけのマップを作成することも可能だが、Mapbox GLの機能を駆使しなければ難しいだろう．
ベクトルタイル提供実験で提供されているスタイル定義ファイルは 地理院地図の標準スタイルに近づけた”std.json”, “std2.json”、淡色系の ”pale.json”, “pale2.json” 、白地図系の “blank.json”, “blank2.json” が提供されているが、これらのJSONデータはMapboxのスタイル定義ファイルの仕様 “Mapbox Style Specification” とは異なるので、Mapboxで直接読み込むことはできないので注意が必要だ．
Mapboxのスタイルファイル形式で作成されたスタイルのサンプルは、GitHubの https://github.com/gsi-cyberjapan/gsivectortile-mapbox-gl-jsから入手することができる．
https://maps.gsi.go.jp/vector/data/std.json （標準地図） https://maps.gsi.go.jp/vector/data/std2.json （標準地図2） https://maps.gsi.go.jp/vector/data/pale.json （淡色地図） https://maps.gsi.go.jp/vector/data/pale2.json （淡色地図2） https://maps.gsi.go.jp/vector/data/blank.json （白地図） https://maps.gsi.go.jp/vector/data/blank2.json （白地図2）
上記のスタイルファイルの名前の末尾に数字の2が付いているのは、道路の立体交差を表現しているマイナーチェンジバージョンということのようだが、該当部分を拡大表示しない限り違いは殆ど分からないので、デモでは道路の立体交差バージョンは省略している．
これらのスタイル定義ファイルの仕様については、『地理院地図 Vector(仮称)地図デザインファイル仕様』で、その内容が公開されている．
個々のJSON形式のスタイル定義ファイルはテキストエディタ等でその内容を見たり内容を変更することが可能だが、改行やインデント等の整形を施すと10万行以上にもなる巨大なデータなので、このファイルの中身を書き換えて自分専用のスタイルを作成するのはかなり大変だ．
属性値に関する情報
Mapbox GLを用いて国土地理院のベクタータイルを表示するデモ
国土地理院のベクタータイルを表示する方法はとても簡単で、
const map = new mapboxgl.Map({
container: 'map', // container ID
// Choose from Mapbox's core styles, or make your own style with Mapbox Studio
style: './oldstyle/std.json', // <=== スタイルファイルを指定する
center: [ 139.069610, 35.360790 ], // starting position [lng, lat]
language: 'ja',
zoom: 14.6 , // starting zoom
testMode: true
});
のように、マップのインスタンスを作成する際に、スタイル定義ファイルへのパスを指定するだけである．ベクタータイルを参照するためのURL情報などは、スタイルファイルの中で定義することになる．
標準スタイル定義ファイル "std.json" の中を覗いてみる．
{
"version": 8,
"glyphs": "https://maps.gsi.go.jp/xyz/noto-jp/{fontstack}/{range}.pbf",
"sources": {
"gsibv-vectortile-source-1-4-16": {
"type": "vector",
"tiles": [
"https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf"
],
"minzoom": 4,
"maxzoom": 16,
"attribution": "\u5730\u7406\u9662\u5730\u56f3Vector\uff08\u4eee\u79f0\uff09"
}
},
"layers": [
{
"id": "gsibv-vectortile-layer-761",
"type": "line",
"source": "gsibv-vectortile-source-1-4-16",
"source-layer": "structurel",
"metadata": {
"layer-id": "layer-577",
"title": "\u5751\u53e3",
"path": "\u69cb\u9020\u7269-\u5751\u53e3",
"added": 1
},
"minzoom": 14,
"maxzoom": 17,
"filter": [
"all",
[
"in",
"ftCode",
4202
]
],
"layout": {
"line-cap": "square",
"visibility": "visible"
},
"paint": {
"line-color": "rgba(100,100,100,1)",
"line-width": 1.5
}
},
...
上記のスタイル切替えデモでは画面左下のセレクターでスタイルを簡単に切り替えることができるようになっているので、スタイルを切り替えて実際に表示される地図の見映えを確認してみて欲しい．
Mapboxのコードを書いたことがあれば、国土地理院のベクタータイルマップを表示させることはそれほど難しいことはないだろう．
『最適化ベクトルタイル試験公開』
ベクトルタイル提供実験で提供されているタイルデータやスタイルファイルはかなり大規模なもので、エンドユーザが取り扱うには結構大変なものだったので、国土地理院ではもう少し軽量化した仕様のベクタータイル（PMTiles ファイル形式）の提供実験を行っている．
この最適化ベクトルタイル試験公開についてもGitHub上で公開されており、タイルの仕様などのドキュメントが公開されている．
・注記分類コード・地物種別コード一覧（PDF版）
・データ項目一覧（PDF版）
・地物等の属性一覧（PDF版）
上記の3つのドキュメントの内容もスッキリと整理されており、だいぶ扱い易くなっているようだ．
デモサイト
・https://gsi-cyberjapan.github.io/optimal_bvmap/
この最適化ベクトルタイル試験公開では、PMTiles形式でベクタータイルが公開されており、PMTiles形式では従来の膨大なファイル数のタイルデータセットではなく、一つのファイルの中にタイルデータセット一式が格納されている形となるので、タイルデータの取り扱いがとても楽になる．
Mapboxでもアイコン画像を一つのイメージファイルに纏めた "sprite"形式のアイコンライブラリを扱っているが、それと同じようなイメージでタイルセットを纏めていると考えると分かり易いかもしれない．
上記のデモサイトでは、WEBマップ表示のフレームワークとして、Mapboxではなく MapLibre GLというオープンソースベースのJavascript フレームワークを用いている．このMapLibre GLは、現在のプロプライエタリなライセンスとなる前のMapbox GL から派生（フォーク）されたプロジェクトで、コミュニティー中心で開発されているのでライセンス利用料の心配がいらない素晴らしいフレームワークだ．
これまでは Mapbox GL を用いてWEBマップシステムの開発を行ってきたが、これからはMapLibre GLを用いた開発へ舵を切って行くことにしようと思う．ライセンス料金の心配をしながら Mapbox GLを利用するのは、精神衛生上よろしくない．
- ・MapboxでカスタムWebmap作りに挑戦 #1
- ・MapboxでカスタムWebmap作りに挑戦 #2
- ・MapboxでカスタムWebmap作りに挑戦 #3（地理院のベクタータイルを表示する）
