ベクタータイルとは？モダンなウェブ地図を支えるMVT形式を解説

過去10年間にGoogle Maps、OpenStreetMap、またはモダンなウェブ地図を使ったことがあれば、見ていたすべての道路と建物はほぼ確実にベクタータイルとして読み込まれていたはずです。この形式は、モダンなウェブ地図を高速に読み込み、あらゆる画面で鮮明に見せ、デザイナーが世界全体を再レンダリングすることなく美しいスタイルの地図を出荷できるようにする、縁の下の力持ちです。

このガイドでは、ベクタータイルとは何か、どう機能するか、なぜほとんどのユースケースでラスタータイルを置き換えたか、そしてMapAtlasが本番でどう提供しているかを解説します。

一文で説明すると

ベクタータイルとは、特定のズームレベルでの地図の1タイル分の地理的フィーチャーを、事前レンダリングされた画像としてではなくデータとしてエンコードした、小さなバイナリファイルです。

「画像ではなくデータ」という部分がすべてのポイントです。ラスタータイルではサーバーが各ピクセルの見た目を決定済みです。ベクタータイルでは、クライアントが基盤となるジオメトリ（線、ポリゴン、点）とラベルを受け取り、ユーザーが選んだスタイルに合わせてその場でレンダリングします。

ウェブ地図がタイルを使う仕組み

使ったことのあるすべてのウェブ地図は、世界をタイルグリッドに分割しています。ズーム0では、世界全体が1つのタイルに収まります。ズーム1では4タイル、ズーム2では16タイル、といった具合です。各タイルは3つの数値で識別されます。ズーム（z）、列（x）、行（y）です。パンやズームをすると、地図ライブラリは表示中のタイルだけをフェッチし、キャッシュし、ビューポートから外れたものは破棄します。

ラスタータイルでは、サーバーがすべての（z, x, y）の組み合わせに対してPNGを事前レンダリングします。これは機能しますが制限があります。スタイルはレンダリング時に固定され、スタイル変更のたびに世界全体の再レンダリングが必要になり、Retinaスクリーンで鮮明に見せるために1xと2xの解像度で画像を用意しなければなりません。

ベクタータイルはこのモデルを逆転させます。サーバーはジオメトリを送ります。クライアントがレンダリングします。1つのタイルセットがいくつものスタイルをサポートし、任意のDPIで鮮明に見え、通信量も小さくなります。

MVT形式

デファクトスタンダード形式はMVTです。Mapbox Vector Tile仕様です。MVTは特徴をnamedなレイヤーに整理したProtocol Buffersエンコーディングです。典型的なレイヤーは次の通りです。

• transportation（道路、鉄道）
• buildings（建物フットプリント）
• places（都市、町、地区の名称）
• landuse（公園、住宅地、商業地）
• water（海洋、湖、河川）
• boundaries（行政区域）

レイヤー内の各フィーチャーはジオメトリ（点、線、ポリゴン）と属性セット（名前、タイプ、重要度、言語バリアント）を持っています。ジオメトリ座標はタイルローカルの座標空間で0から4096の整数値であり、これがMVTのコンパクトさの秘密です。

MVTは完全にオープンでベンダー中立であり、主要なレンダリングエンジンすべてでサポートされています。Mapbox GL JS、MapLibre GL JS、OpenLayers、deck.gl、iOS・AndroidのMapbox SDKなどです。

ベクタータイルがラスタータイルを置き換えた理由

モダンなウェブ地図がほぼ例外なくベースレイヤーにベクタータイルを使う理由は5つあります。

スタイルの柔軟性。 1つのタイルセットで、ライトテーマ、ダークテーマ、印刷最適化スタイル、衛星オーバーレイスタイル、マーケティング向けブランドカラースタイルをレンダリングできます。サーバーサイドの再レンダリングは不要です。

任意のDPIで鮮明。 1xのラスタータイルはRetinaスクリーンでぼやけて見えます。ベクタータイルはデバイスのネイティブ解像度でクライアント上で新鮮にレンダリングされます。

小さなペイロード。 複雑な都市部のタイルは、高品質なPNGよりgzip圧縮したMVTの方がしばしば小さくなります。

ランタイムのインタラクティビティ。 クライアントが各ピクセルの内容を知っているため、ホバー時に特定の道路をハイライト、未使用レイヤーをフェードアウト、トランジションをアニメーション、フィーチャークリックへの応答が可能です。

スムーズなズームと回転。 ベクターのジオメトリはエイリアシングなしに回転・拡大縮小できます。ラスタータイルは整数ズームレベル間や軸から外れた回転でピクセル化して見えます。

コストはクライアントのCPUとGPU処理ですが、過去10年以内に製造されたデバイスなら問題ありません。

ランタイムでスタイリングできるもの

スタイルドキュメント（通常はMapbox Style Spec準拠のJSON、MapLibreでも採用されている）は、各レイヤーをどう描画するかを記述します。タイルデータに触れずに変更できる例を挙げます。

• すべての道路クラスの色
• ズームによって変化する道路線の幅
• どのズームレベルでどの地名ラベルを表示するか
• すべてのテキストラベルのフォント、サイズ、ハロー
• レイヤー全体の表示・非表示（1つの切り替えで全行政境界をオフ）
• パターンフィル、破線、グラデーション、ぼかしエフェクト

これがブランド地図を可能にするものです。デザインチームはMapbox スタイルJSON、MapLibreスタイルJSON、またはMapAtlasスタイルプリセットを渡せば、同じタイルセットがそのブランドアイデンティティでレンダリングされます。

キャッシングとパフォーマンス

世界のジオメトリは毎分変わるわけではないため、ベクタータイルは非常によくキャッシュされます。CDNエッジキャッシュは通常MVTタイルを数時間から数日間保持します。地図ライブラリはユーザーがパンしそうな方向のタイルを先読みし、最近表示したタイルをメモリに保持します。ユーザーが都市をパンするとき、次のビューポートのタイルがたいてい既に読み込み済みのため、スムーズな体験が実現します。

本番タイルサービスは通常/{z}/{x}/{y}.pbfのようなパスでタイルを公開します（PBFはprotoバイナリの拡張子）。モダンなHTTP/2またはHTTP/3接続は、数十のタイルリクエストを並行して多重化します。

MapAtlasの位置付け

MapAtlasはダイナミックマッププロダクト向けにMVT互換ベクタータイルを提供しており、EU限定ホスティング、予測可能な料金、下流のスタイリングとAIアノテーション向けに設計されたタイルスキーマを備えています。可視地図を駆動する同じデータレイヤー（場所、交通機関、建物、POI）は、GeocodingとSearch APIを通じて構造化データとしても公開されているため、地図上で見たフィーチャーを自分のロジック用のタイプ付きJSONレコードとして取得できます。

レンダリングレイヤーの詳細については、カスタムマップスタイリングガイドでブランドに合わせたベクタータイルスタイルをエンドツーエンドで実装する方法を説明しています。