ベクターMBTilesビューアー：ベクタータイルを無料でオンライン表示

ブラウザで使えるベクターMBTilesビューアー

MBTilesファイルは、タイル化された地図を丸ごと1つのファイルにまとめたものです。中身は小さなSQLiteデータベースで、タイルを入れたテーブルと、その情報を入れたテーブルがあります。ベクターMBTilesにはMapbox Vector Tilesが入っています。道路、建物、川、境界とその属性を収めたコンパクトなバイナリのタイルで、地図アプリが自由にスタイルを付けられます。tippecanoe、Planetiler、OpenMapTiles、QGISなどのツールで作られ、多くのオフライン地図や自前で配信するMBTiles地図の土台になっています。

困るのは中身を見たいときです。パソコンではファイルを開けず、画像ビューアーでは何も見えず、オンラインのビューアーの多くはラスタータイルしか表示しません。ベクターMBTilesを見るには、ふつうタイルサーバー、スタイル、少しのJavaScript、あるいは本格的なGISソフトが必要です。このベクターMBTilesビューアーはそのすべてを省きます。ファイルをドロップすると、データベースを読み、ブラウザの中でベクタータイルをデコードし、レイヤーごとに色を変えて地図に描きます。

表示するだけでなく、検証するためのツールとしても作られています。地物をクリックして属性を読んだり、レイヤーの表示を切り替えたり、ズームレベルごとのタイルの大きさや最大のタイルを確認したり、MBTilesとベクタータイルの仕様に沿ってファイルをチェックしたりできます。最後に、表示範囲の地物をGeoJSONで出力したり、地図のPNGを保存したり、同僚や顧客に渡せる技術レポートをダウンロードしたりできます。私のおすすめは、タイルセットをサーバーに置く前にチェックを実行することです。「地図が真っ白」という問題の多くは、メタデータの行の不足やズーム範囲の誤りが原因で、公開前のほうがずっと簡単に直せます。

ベクターMBTilesビューアーでできること

ツールの機能を、使う順番に紹介します。

1. ファイルを開く. .mbtilesファイルを地図にドラッグするか、「MBTilesを開く」をクリックします。300 MBまでのファイルは、SQLiteエンジンsql.jsでブラウザ内で開けます。「サンプルを試す」を押すと、国、湖、川、都市が入った小さな世界のタイルセットが読み込まれ、すぐに動作を確認できます。
2. すぐに地図を表示. メタデータから範囲と中心を読み取り、データの位置にズームします。各レイヤーはそれぞれの色でキャンバスに描かれます。ポリゴンは淡い塗り、ラインは線、ポイントは円です。water、landuse、building、transportation、placeなどのよくあるレイヤー名には自然な色が付きます。
3. レイヤーを操作する. 「レイヤー」タブには、メタデータとタイルにあるすべてのレイヤーが、ジオメトリの種類、サンプル内の地物の数、値の例を添えた全フィールドとともに表示されます。レイヤーの表示を切り替えたり、「これだけ」で1つのレイヤーだけを表示したり、色の四角をクリックして好きな色を選んだりできます。
4. クリックして地物を調べる. 地図をクリックすると、その場所にある表示中のレイヤーの地物が、レイヤー、ジオメトリの種類、ID、全属性とともにカードに表示されます。地物は地図上で強調され、GeoJSONとしてコピーしたり、タイル全体を生の.pbfファイルとして保存したりできます。
5. ファイル情報を読む. 「ファイル情報」タブでは、メタデータをわかりやすく表示します。名前、説明、出典、バージョン、形式、圧縮、ズーム範囲、範囲、中心、作成ツール（例：tippecanoe）、ファイルとタイルデータのサイズです。
6. タイルを確認する. 「タイル」タブでは、ズームレベルごとのタイル数、合計・平均・最大のサイズと、ファイル内で最大の10枚のタイルを確認できます。「表示」でそのタイルに移動します。タイル境界をオンにすると、各タイルの境界がz/x/yとサイズ付きで描かれます。
7. チェックを実行する. 「チェック」タブでは、tilesテーブル、メタデータ、形式、圧縮、jsonのvector_layers一覧、メタデータにないレイヤー、範囲、中心、実際のタイルとズーム範囲の一致、500 KBを超えるタイル、出典を検証します。各チェックはOK、警告、エラーで示され、わかりやすい説明が付きます。
8. データ以上に拡大する. ベクタータイルは最後のズームレベルを超えて拡大してもくっきりしたままなので、ビューアーは最も深いタイルを拡大して描き続けます（「オーバーズーム」）。最初のズームレベルより縮小しているときは、拡大するよう案内が出ます。
9. 表示を調整する. 塗りの不透明度と線の太さを変え、地名ラベルをオン・オフし、位置の目安に道路地図や衛星地図を追加できます。背景地図がなければ、他のサーバーからは何も読み込まれません。
10. 出力する. 表示中の地物をGeoJSONで、地図の表示をPNGで、メタデータをJSONで保存できます。チェック結果、レイヤー、フィールド、タイル統計、改善の提案をまとめた技術レポートもダウンロードできます。

ファイルはブラウザのタブの中で、JavaScriptとWebAssemblyによって読み込まれます。アップロードされることはないので、非公開のデータやライセンス付きのデータでも安心して使えます。

ベクターMBTilesファイルの見方（ステップごと）

サンプルの世界タイルセット（Natural Earthのデータ、ズーム0〜5）を使った実際の例です。

1

ステップ1: ベクターMBTilesビューアーを開く

ツールは空の地図とドロップ領域で開きます。.mbtilesファイルをドラッグするか、クリックしてファイルを選ぶか、「サンプルを試す」を押します。

2

ステップ2: ファイルを読み込む

ビューアーはSQLiteデータベースを読み、範囲にズームして4つのレイヤーを描きます。国は灰色の塗り、湖は青、川は青い線、都市はラベル付きの赤い点です。

3

ステップ3: レイヤーを見る

「レイヤー」タブには、各レイヤーのジオメトリ、サンプル内の地物、値の例付きの全フィールドが表示されます。ここでは川と都市だけを表示し、ヨーロッパ周辺を見ています。

4

ステップ4: 地物をクリックする

都市をクリックします。カードにはレイヤー、ジオメトリの種類、ID、全属性が表示され、地物が強調されます。GeoJSONとしてコピーしたり、元のタイルを保存したりできます。

5

ステップ5: ファイル情報を読む

「ファイル情報」タブでは、metadataテーブルの内容を、名前、出典、形式、gzip圧縮、ズーム0〜5、範囲、中心、ファイルサイズとしてわかりやすく表示します。

6

ステップ6: タイルを確認する

「タイル」タブには、ズームレベルごとのタイル数とサイズ、最大のタイルが表示されます。タイル境界をオンにすると、各タイルの境界がz/x/yと保存サイズ付きで描かれます。

7

ステップ7: チェックを実行する

「チェック」タブでは、MBTilesとベクタータイルのルールに沿ってファイルを検証します。サンプルはすべてのチェックに合格します。実際のファイルでは警告が1つか2つ出ることが多く、それぞれに説明が付きます。

8

ステップ8: レポートをダウンロードする

技術レポートには、概要、地図のプレビュー、チェック結果、メタデータ、全レイヤーとフィールド、タイル統計、改善の提案が1ページにまとめられています。印刷するか、PDFとして保存できます。

MBTilesファイルの開き方：選べる方法

MBTilesファイルを開く方法はいくつかあります。中身を見たいだけか、検証したいか、プロジェクトで使いたいかによって、適した方法が変わります。

1. ブラウザで、このビューアーを使う. ベクターファイルの中身を最も早く確認できる方法です。インストールもサーバーも不要で、Windows、Mac、Linux、タブレットで使えます。タイルセットの確認、属性の確認、レポートの共有に向いています。ラスターMBTiles（PNG、JPEG、WebPのタイル）は、このサイトのMBTilesビューアーを使ってください。
2. QGISで開く. QGIS 3.14以降はベクターMBTilesを直接開けます。ファイルを地図にドラッグするか、「レイヤー」→「レイヤーを追加」→「ベクタータイルレイヤーを追加」を使います。ラスターMBTilesは「レイヤー」→「レイヤーを追加」→「ラスタレイヤを追加」で開きます。他のGISデータと組み合わせたいときに便利です。
3. タイルサーバーで配信する. TileServer GL、Martin、mbtileserverはMBTilesファイルを読み、タイルをHTTPで配信します。これによりMapLibre GL JS、Mapbox GL JS、LeafletのWeb地図から使えます。MBTiles地図は多くの場合この方法で公開されます。
4. PMTilesにする. ファイルをPMTilesに変換し（このサイトに無料の変換ツールがあります）、その1つのファイルを静的ホスティングやオブジェクトストレージに置きます。MapLibreはタイルサーバーなしで直接読めます。
5. スマートフォンやGPS端末で使う. 多くのオフライン地図アプリは、通信なしで使うためにMBTilesファイルを読み込めます。アプリが想定するタイル形式を確認してください。ラスタータイルしか受け付けないアプリもあります。
6. データベースとして開く. MBTilesはSQLiteなので、DB Browser for SQLiteやsqlite3のコマンドラインでも開けます。見えるのはテーブルとバイナリのデータで地図ではありませんが、メタデータの行を直すときに便利です。

どの方法でも共通する点があります。MBTilesファイルに入っているのはデータで、スタイルではありません。レイヤーの色はアプリごとに決まります。このビューアーは色を自動で選ぶので、先にスタイルを書かなくても構造を確認できます。

ビューアーがベクタータイルを読んで描く仕組み

ベクターMBTilesを開くには4つの段階があります。SQLiteデータベースを読み、必要なタイルを探し、展開してデコードし、描画します。実際に何が起きているかを数式とともに説明します。

CREATE TABLE metadata (name text, value text);
CREATE TABLE tiles (zoom_level integer, tile_column integer,
                    tile_row integer, tile_data blob);

metadataの行:  name, format = pbf, minzoom, maxzoom, bounds,
               center, attribution, description, json, …
統計:          SELECT zoom_level, COUNT(*), SUM(LENGTH(tile_data)),
               MAX(LENGTH(tile_data)) FROM tiles GROUP BY zoom_level

n = 2^z                                   ズームzでの一辺のタイル数
x = ⌊(λ + 180) / 360 × n⌋
y = ⌊(1 − ln(tan φ + sec φ) / π) / 2 × n⌋   Web地図の行（北から）

tile_row = n − 1 − y                        MBTilesの行（南から）

例  z = 5, x = 16, y = 10  →  tile_row = 32 − 1 − 10 = 21

1F 8B …        gzip       （ほとんどのファイル：tippecanoe、Planetiler、OpenMapTiles）
78 01/5E/9C/DA zlib       （一部の古いツール）
それ以外       圧縮なし

89 50 4E 47    PNG  ┐
FF D8          JPEG ├  ラスタータイル：ベクターファイルではない
52 49 46 46    WebP ┘

varint   300 = 1010 1100  0000 0010  → 0101100 + 0000010 × 128 = 300
zigzag   0 → 0,  −1 → 1,  1 → 2,  −2 → 3,  2 → 4
         デコード: n = (z >>> 1) ^ −(z & 1)

Tile     { layers = 3 }
Layer    { name = 1, features = 2, keys = 3, values = 4, extent = 5, version = 15 }
Feature  { id = 1, tags = 2, type = 3, geometry = 4 }
tags     [キーの番号, 値の番号, キーの番号, 値の番号, …]

コマンド = (回数 << 3) | id     MoveTo = 1, LineTo = 2, ClosePath = 7

9  = (1 << 3) | 1   MoveTo、1点
     引数 50, 34  →  +25, +17   カーソル (25, 17)
18 = (2 << 3) | 2   LineTo、2点
     引数 0, 18, 18, 0  →  (25, 26), (34, 26)
15 = (1 << 3) | 7   ClosePath

ポリゴンのリング: 面積 > 0  外側のリング（画面上で時計回り）
                  面積 < 0  穴
面積 = ½ Σ (x_j·y_i − x_i·y_j)       座標法（ガウスの面積公式）、yは下向き

縮尺 = 256 × f / extent          f = 2^(z_地図 − z_データ)
ずらし量 = (x mod f, y mod f) × 256   表示する親タイルの部分

例  データはz 14まで、地図はz 16
  f = 4、縮尺 = 256 × 4 / 4096 = 1単位あたり0.25 px
  地図のタイル (x, y) はデータのタイル (⌊x/4⌋, ⌊y/4⌋) を使う

1ピクセルあたりの単位 = extent / (256 × 2^(z_地図 − z_データ))

ポイント  距離 ≤ 7 px なら選択
ライン    線分までの距離 ≤ 5 px なら選択
          d² = |p − a − t(b − a)|²,  t = clamp(((p − a)·(b − a)) / |b − a|², 0, 1)
ポリゴン  点から出した半直線がリングと奇数回交われば選択

保存サイズ   = LENGTH(tile_data)          バイト（圧縮されたまま）
平均サイズ   = SUM(サイズ) / COUNT(*)     ズームレベルごと
カバー率     = タイル数 / 4^z             世界全体のグリッドに対する割合

目安         最大のタイル < 500 KB  （512,000バイト）

MBTilesと出力形式の詳細

MBTilesファイルの中身、ベクターとラスターのMBTilesの違い、このビューアーからダウンロードできる各ファイルの内容を説明します。

metadata.json = {
  "vector_layers": [
    { "id": "cities", "minzoom": 0, "maxzoom": 5,
      "fields": { "name": "String", "pop_max": "Number" } } ],
  "tilestats": { "layerCount": 1, "layers": [ … ] }
}

{ "type": "Feature", "id": 812,
  "properties": { "name": "Lyon", "pop_max": 1423000,
                  "_layer": "cities", "_tile": "5/16/11" },
  "geometry": { "type": "Point", "coordinates": [4.8320114, 45.7578137] } }

すべての出力は、開いたファイルからブラウザの中で作られます。サーバーには何も送られません。

ベクターMBTilesビューアーを使う人

ベクタータイルはデータと地図の間にあるので、さまざまな立場の人が中身を確認する必要があります。

1. Web地図の開発者. MapLibreやMapbox GLのスタイルを書く前に、どのレイヤーがあるか、フィールドの名前、どのズームレベルからデータが現れるかを確認できます。フィールド一覧と値の例があれば、推測に頼らずに済みます。
2. GISアナリスト. tippecanoe、Planetiler、QGISで出力したファイルに、正しい属性とズーム範囲で必要なものが入っているかを、納品前に確認できます。
3. DevOpsとタイルサーバーの管理者. TileServer GL、Martin、CDNに展開する前に、大きすぎるタイル、メタデータの不足、ズーム範囲の誤りを見つけ、レポートを記録として残せます。
4. オフライン・現地での地図作業. タブレットや現場用端末に入れるMBTiles地図が、正しい範囲とズームレベルを含んでいるかを、圏外になる前に確認できます。
5. データの購入者とレビュー担当者. 供給元のベクタータイルセットを、何もインストールせずに確認し、属性を見て、レポートを返せます。
6. 学生と先生. タイル境界をオンにし、ズームレベルごとのタイルサイズを比べ、オーバーズームで線がくっきりしたままになる様子を見て、ベクタータイルの実際の仕組みを学べます。
7. オープンデータの公開者. タイルセットを公開する前に、メタデータの出典、範囲、説明を確認し、利用者に正しい出典と最初の表示位置が伝わるようにできます。
8. サポートと不具合報告. 地図に欠けや壊れた地物があれば、そのタイルを探して.pbfとして保存し、レポートと一緒にチケットに添付できます。

MBTilesとベクタータイルについてのよくある質問

MBTilesファイルとこのビューアーについて、よく寄せられる20の質問です。

仕様、ソフトウェア、データの出典

このビューアーは、オープンな仕様とソフトウェアで作られています：

• MBTiles Specification (Mapbox) · Specification
  MapboxのMBTiles仕様：ファイルのSQLiteの構成、TMSの行の順序、ビューアーが確認するメタデータの行。
• Mapbox Vector Tile Specification · Specification
  Mapbox Vector Tileの仕様：デコーダーが従うprotobufの構成、ジオメトリのコマンド、リングの向きのルール。
• sql.js · MIT
  WebAssemblyにコンパイルされたSQLite。ブラウザで.mbtilesデータベースを開くのに使います。
• Leaflet 1.9 · BSD-2-Clause
  インタラクティブ地図と、タイルを描くキャンバスのグリッドレイヤー。
• Natural Earth · Public domain
  サンプルのタイルセット（1:50mの国、湖、川、都市）の作成に使ったパブリックドメインのデータ。
• Protomaps (hosted by KONAKTIVE), CARTO, OpenStreetMap, Esri World Imagery · ODbL and provider terms
  任意の背景地図：KONAKTIVEがホストする独自のベクタータイル（予備としてCARTOとOpenStreetMap）と、Esri World Imagery。

ベクタータイルのデコーダー、レンダラー、チェック、すべての出力は当サイトのために書かれたもので、すべてブラウザの中で動きます。

関連するタイルとGISファイルのツール