OnlineMapMaker logo

ベクターPMTilesビューアー:PMTiles地図を無料でオンライン表示

ベクターの.pmtilesファイルを開くか、Web上にあるアーカイブのURLを貼り付けると、数秒で地図として表示されます。この無料のオンラインPMTilesベクタービューアーは、すべてのレイヤーとフィールドを一覧にし、レイヤーを色分けし、クリックした地物の属性を表示し、ズームレベルごとのタイルサイズを示し、PMTiles v3とベクタータイルの仕様に沿ってアーカイブを検証します。ローカルファイルがブラウザの外に出ることはありません。 全画面で開く ↗

Rate this tool:
広告
広告
Loading viewer…
GISプロジェクトでお困りですか?サービスを見る

ブラウザで動くベクターPMTilesビューアー

PMTilesはタイル地図のための単一ファイル形式です。1つの.pmtilesアーカイブに、ズーム0の世界全体から街路レベルまでのタイルのピラミッドと、各タイルがファイル内のどこにあるかを示すインデックスがまとめて入っています。地図アプリは1回のHTTP範囲リクエストで任意のタイルを読めるので、ファイルを普通のクラウドストレージに置くだけで、タイルサーバーなしで地図として使えます。そのためPMTiles地図は、OpenStreetMapのデータを公開する一般的な方法になりました。Protomapsのベースマップや、Planetilerで作られた多くの都市・国の地図が、OpenStreetMapのPMTilesファイルとして配布されています。

中身を見るのは簡単ではありません。.pmtilesはバイナリなので普通のソフトでは開けず、ベクタータイルを見るにはふつうMapLibre、スタイル、そして少しのコードが必要です。このオンラインのPMTilesベクタービューアーがその作業を代わりに行います。ファイルをドロップするか、すでにWeb上にあるアーカイブのURLを貼り付けると、ヘッダーとディレクトリを読み、表示範囲のタイルだけを取得し、ブラウザでデコードして、各レイヤーをそれぞれの色で描画します。

これはビューアーであると同時にチェックツールです。地物をクリックして属性を読み、レイヤーを切り替え、ズームレベルごとのタイルサイズを確認し、PMTiles v3とベクタータイル仕様に沿ってアーカイブを検証できます。ヘッダー、圧縮、クラスター化、ルートディレクトリのサイズ、メタデータ、範囲、タイル数、ETagをチェックします。そのあと、表示中の地物をGeoJSONで出力したり、PNGを保存したり、技術レポートをダウンロードしたりできます。私のおすすめは、公開を告知する前に本番のURLでアーカイブを開いてみることです。「PMTiles地図が表示されない」という問題の多くはバケットのCORSや範囲リクエストの設定が原因で、このビューアーならワンクリックでわかります。

広告
広告

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

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

  1. ファイルまたはURLを開く. .pmtilesファイルを地図にドラッグするか、「PMTilesを開く」をクリックするか、URLを貼り付けて「開く」を押します。サイズの制限はありません。ビューアーはディスク上のファイルやサーバーから、ヘッダー、ディレクトリ、必要なタイルだけを読み込みます。「サンプルを試す」はパリ中心部の小さなOpenStreetMap PMTilesファイルを読み込み、例のリンクはpmtiles.ioにあるフィレンツェのアーカイブを開きます。
  2. すぐに地図を表示. ヘッダーから範囲を読み取り、データの位置へズームします。各レイヤーはそれぞれの色でキャンバスに描画されます。ポリゴンは薄い塗り、ラインは線、ポイントはラベル付きの点です。Protomaps、OpenMapTiles、Shortbreadのスキーマのレイヤー名(water、landuse、buildings、roads、placesなど)には自然な色が付きます。
  3. レイヤーを操作. 「レイヤー」タブには、メタデータとタイルにあるすべてのレイヤーが、ジオメトリの種類、サンプル内の地物数、値の例付きの全フィールドとともに並びます。レイヤーの表示を切り替えたり、「これだけ」で1つのレイヤーだけを表示したり、色の四角をクリックして好きな色を選んだりできます。
  4. クリックして地物を確認. 地図をクリックすると、その地点にある表示中のレイヤーの地物がカードに表示されます。レイヤー、ジオメトリの種類、ID、すべての属性(たとえばOpenStreetMapの道路のkind、name、min_zoom)です。地物は強調表示され、GeoJSONとしてコピーしたり、タイル全体を.pbfファイルとしてダウンロードしたりできます。
  5. アーカイブ情報を読む. 「アーカイブ情報」タブは、ヘッダーとメタデータをわかりやすく表示します。名前、出典、タイルの種類、タイルとディレクトリの圧縮、ズーム範囲、範囲、中心、作成ツール(たとえばPlanetiler)、アーカイブのサイズ、アドレス付きタイル数と固有タイル数、ディレクトリのサイズです。
  6. タイルを確認. ディレクトリのすべてのエントリーを読み、ズームレベルごとのタイル数、合計・平均・最大サイズと、最大のタイル10枚を示します。「表示」を押すとそのタイルへ移動します。タイル境界をオンにすると、各タイルの境界がz/x/yと保存サイズ付きで描かれます。
  7. チェックを実行. 「チェック」タブはアーカイブを検証します。ヘッダーのバージョン、タイルの種類、圧縮、クラスター化、ルートディレクトリが先頭16 KBに収まるか、メタデータとvector_layers、範囲と中心、ディレクトリと比べたズーム範囲とタイル数、500 KBを超えるタイル、重複排除、出典、そしてURLの場合はETagです。各項目にOK、警告、エラーの印とわかりやすい説明が付きます。
  8. リンクを共有. URLからアーカイブを開いた場合、「このアーカイブへのリンクをコピー」で、同じファイルを開くこのページへのリンクが得られます。同僚に送れば、同じ地図とチェック結果を見られます。
  9. データより先まで拡大. ベクタータイルは最後のズームレベルを超えて拡大してもくっきりしたままなので、ビューアーは最も深いタイルを拡大して描画し続けます(オーバーズーム)。最初のズームレベルより小さいときは、拡大するよう案内が出ます。
  10. 出力. 表示中の地物をGeoJSONで、地図の表示をPNGで、ヘッダーとメタデータをJSONでダウンロードできます。チェック、ヘッダー、レイヤー、フィールド、タイル統計、推奨事項をまとめた技術レポートも出力できます。

ローカルファイルはブラウザのタブ内でJavaScriptにより少しずつ読み込まれ、アップロードされることはありません。URLの場合は、ブラウザがそのサーバーから直接読み込みます。このサイトがデータを見ることはありません。

PMTilesファイルを表示する手順

パリ中心部のOpenStreetMap PMTilesサンプル(Protomapsベースマップのスキーマ、ズーム0〜12)を使った実際の例です。

空の地図、ドロップエリア、PMTilesのURLを開く入力欄があるベクターPMTilesビューアー
1
ステップ 1: ベクターPMTilesビューアーを開く

空の地図、ドロップエリア、URL欄が表示されます。.pmtilesファイルを地図にドラッグするか、クリックしてファイルを選ぶか、URLを貼り付けるか、「サンプルを試す」を押します。

OpenStreetMapのPMTilesファイルから描いたパリ中心部の地図。水、公園、建物、道路が色分けされている
2
ステップ 2: アーカイブを読み込む

ヘッダーとルートディレクトリを読み、範囲へズームして、OpenStreetMapデータの全レイヤーを描画します。水は青、公園は緑、建物は茶色、道路はオレンジ、地名は赤です。

チェックボックス付きのレイヤータブと、道路と水だけを表示したパリの地図
3
ステップ 3: レイヤーを調べる

「レイヤー」タブには、各レイヤーのジオメトリ、サンプルで見つかった地物、すべてのフィールドが並びます。ここではroadsとwaterだけをオンにして、道路網とセーヌ川を表示しています。

パリの道路の属性を示すインスペクターのカードと、黄色で強調された道路
4
ステップ 4: 地物をクリック

道路をクリックします。カードにレイヤー、ジオメトリ、ID、kind、kind_detail、nameなどのOpenStreetMap属性が表示され、道路が地図上で強調されます。

PMTilesのヘッダーとメタデータをわかりやすく一覧にしたアーカイブ情報タブ
5
ステップ 5: アーカイブ情報を読む

「アーカイブ情報」タブは、ヘッダーとメタデータをわかりやすく示します。タイルの種類MVT、gzip圧縮、ズーム0〜12、範囲、中心、タイル数、ディレクトリのサイズです。

ズームレベルごとのサイズ表と、パリの上に描かれたタイル境界があるタイルタブ
6
ステップ 6: タイルを確認

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

合格したPMTilesの検証チェックが並ぶチェックタブ
7
ステップ 7: チェックを実行

「チェック」タブは、PMTiles v3とベクタータイルの規則に沿ってアーカイブを検証します。サンプルはすべてのチェックに合格します。URLから開いたアーカイブにはETagのチェックも加わります。

概要、チェック、ヘッダー表を含むベクターPMTiles技術レポート
8
ステップ 8: レポートをダウンロード

技術レポートには、概要、地図のプレビュー、チェック、ヘッダー全体、メタデータ、全レイヤーとフィールド、タイル統計、推奨事項が1ページにまとまっています。印刷するかPDFで保存できます。

広告
広告

PMTilesファイルの開き方:選択肢

.pmtilesファイルを開く方法はいくつかあります。中身を見たいのか、検証したいのか、地図を作りたいのかで、適した方法が変わります。

  1. このビューアーでブラウザから. ディスク上のファイルでもURLでも、ベクターアーカイブの中身をいちばん速く確認できます。インストール不要、サーバー不要で、Windows、Mac、Linux、タブレットで使えます。アーカイブの検証、属性の確認、レポートの共有に最適です。ラスターのPMTiles(PNG、JPEG、WebPタイル)には、このサイトのPMTilesビューアを使ってください。
  2. pmtiles.ioのビューアーで. Protomapsの公式ビューアーは、ヘッダー、メタデータ、タイルインスペクターを表示します。技術的にさっと確認するのに向いています。このビューアーはさらに、レイヤーの色分け、属性フィールド、タイル統計、チェック、出力機能を備えています。
  3. MapLibre GL JSで. pmtilesライブラリを追加し、プロトコルを登録して、ベクターソースをpmtiles://https://example.com/file.pmtilesに向けます。スタイル(たとえばProtomapsベースマップのスタイル)と組み合わせれば、完成した高速なWeb地図になります。ほとんどのPMTiles地図はこの方法で公開されています。
  4. QGISで. GDAL 3.8以降を使うQGISなら、GDALのPMTilesドライバーで.pmtilesファイルを開けます。「レイヤー → レイヤーを追加 → ベクターレイヤーを追加」でファイルを選びます。各タイルレイヤーがベクターレイヤーになります。ほかのGISデータと組み合わせたいときに便利です。
  5. pmtilesコマンドラインツールで. go-pmtilesプログラムは、ヘッダーの表示(「pmtiles show」)、範囲の切り出し(「pmtiles extract」)、MBTilesからの変換(「pmtiles convert」)、z/x/yタイルとしての配信(「pmtiles serve」)ができます。
  6. MBTilesとして. MBTilesしか読めないツールには、「pmtiles convert file.pmtiles file.mbtiles」でアーカイブを変換します。中のタイルは変わりません。逆方向には、このサイトの無料のMBTiles→PMTiles変換ツールがあります。

どの方法でも共通なのは、PMTilesアーカイブにはデータが入っていて、スタイルは入っていないということです。レイヤーの色は各アプリが決めます。このビューアーはレイヤー名から色を選ぶので、スタイルを書かなくても構造がわかります。

ビューアーがPMTilesアーカイブを読み、タイルを描く仕組み

PMTilesアーカイブを開くには5つの段階があります。ヘッダーを読む、地図上の位置をタイルIDに変換する、そのIDをディレクトリで探す、範囲リクエストでバイトを取得する、そしてタイルを展開・デコード・描画する、です。パリのサンプルの数値を使って、実際に何が起きているかを説明します。

1. アーカイブの構成と127バイトのヘッダー

PMTiles v3アーカイブには、決まった順序で5つのセクションがあります。先頭の127バイトがヘッダーで、マジックワード「PMTiles」、バージョン、ほかの各セクションの位置と長さ、タイル数、圧縮、タイルの種類、ズーム範囲、範囲、中心が入っています。ビューアーは1回のリクエストで先頭16,384バイトを読みます。ここには必ずヘッダーとルートディレクトリが含まれます。

バイト 0–126      ヘッダー          "PMTiles" + バージョン 3 + 位置、件数、ズーム、範囲
ルートディレクトリ バイト 16,384 より前で終わること
JSONメタデータ    name, attribution, vector_layers, …
リーフディレクトリ 任意、大きなアーカイブ用
タイルデータ      タイルが順に並ぶ

パリのサンプル    ルート 127 + 142 バイト   メタデータ 269 + 870 バイト
                  タイル 1,139 + 2,929,805 バイト   24 タイル、ズーム 0–12
                  範囲 2.197266, 48.748945, 2.460938, 48.922499

座標は10⁻⁷度単位の整数で保存されるため、2.197266°は21972660として保存されます。ビューアーはこれを元に戻し、地図を範囲に合わせます。

2. z/x/yからタイルIDへ:ヒルベルト曲線

PMTilesは世界中のすべてのタイルに1つの番号、タイルIDを付けます。まずズーム0のタイルがすべて並び、次にズーム1のタイルがすべて並ぶ、という順序です。同じズームレベルの中では、タイルはヒルベルト曲線に沿って並びます。これはすべてのタイルを通り、隣り合うタイルを近くに保つ線です。

ズーム z の最初のID = (4^z − 1) / 3       0, 1, 5, 21, 85, …
タイルID = ズーム z の最初のID + ヒルベルト番号 d(x, y)

ズーム 1:  1/0/0 → 1   1/0/1 → 2   1/1/1 → 3   1/1/0 → 4

パリ     12/2074/1409
         ズーム 12 の最初のID = (16,777,216 − 1) / 3 = 5,592,405
         d(2074, 1409)        = 14,248,941
         タイルID             = 19,841,346

ヒルベルト曲線では隣り合うタイルがID順でも近くになるため、1つの都市のタイルはファイル内でまとまって並びます。都市の上で地図を動かすと隣り合ったバイト範囲を読むことになり、キャッシュやCDNが効率よく処理できます。

3. ディレクトリ:ランレングス付きエントリーとリーフディレクトリ

ディレクトリはエントリーの並んだリストです。各エントリーは「このタイルIDから、連続するこの枚数のタイル(ランレングス)が、この位置にあるこの長さのバイトを使う」ことを表します。リストは列ごとにvarintで保存され、タイルIDは差分で記録され、最後にgzipで圧縮されます。これはパリのサンプルの最初の4つのエントリーで、ズーム0〜3にある都市タイルの親タイルです。

エントリー   タイルID   ラン   位置       長さ
0/0/0              0       1          0     65,269
1/1/0              4       1     65,269     76,322
2/2/1             18       1    141,591    124,909
3/4/2             75       1    266,500    116,768

保存形式     24 | 0, 4, 14, 57 | 1, 1, 1, 1 | 65269, 76322, … | 1, 0, 0, …
             件数  IDの差分      ランレングス  長さ             位置(0 = 直前のタイルのすぐ後)

ランレングス 0  → エントリーはタイルではなくリーフディレクトリを指す

ランレングスが1より大きいことで、PMTilesは同じタイルを何度でも追加コストなしで保存できます。同じ海のタイル1万枚が1つのエントリーになります。ルートディレクトリが16 KBに収まらない場合は、エントリーをリーフディレクトリに分け、ルートはそれらを指すだけになります。タイルを探すとき、ビューアーはルートを検索し、最大3階層のリーフをたどり、読んだディレクトリをすべてキャッシュします。

4. 必要な部分だけを読む:範囲リクエスト

URLの場合、読み込みはすべてHTTPの範囲リクエストです。ローカルファイルの場合は、Fileオブジェクトの一部分を切り出します。どちらでも、アーカイブを開くにはヘッダーとルートに1回、メタデータに1回、その後はタイルごとに1回の読み込みが必要です(ある地域を初めて表示するときはリーフディレクトリの読み込みも加わります)。

GET /florence.pmtiles
Range: bytes=0-16383                 → 206 Partial Content   ヘッダー + ルート
Range: bytes=525-22237               → 206                   JSONメタデータ
Range: bytes=22238-456635            → 206                   タイル 0/0/0

サーバーに必要    Accept-Ranges: bytes、範囲にはステータス 206
                  CORS:あなたのサイト向けの Access-Control-Allow-Origin
                  差し替えに気付くための ETag

サーバーがRangeヘッダーを無視してステータス200でファイル全体を送った場合や、CORSでリクエストがブロックされた場合、ビューアーはそれをわかりやすく伝えます。PMTiles地図がノートパソコンでは動くのにWebでは失敗する原因は、たいていこの2つの設定です。

5. タイルを数える:ディレクトリの走査

「タイル」タブのために、ビューアーはルートディレクトリ全体を読み、リーフディレクトリの合計が64 MB以下(URLでは8 MB以下)なら、すべてのリーフディレクトリを1回で読みます。そして各ランを展開し、各ズームの最初のIDを使ってズームレベルごとに分けます。

タイルID t のズーム = (4^z − 1) / 3 ≤ t を満たす最大の z
ズームごとのタイル数 = そのズーム内のランレングスの合計
ズームごとのサイズ   = Σ ランレングス × 長さ
カバー率             = タイル数 / 4^z

重複排除による節約 = 1 − tile_contents_count / addressed_tiles_count

合計はヘッダーにある3つの数(アドレス付きタイル数、エントリー数、内容数)と比較されます。食い違いがあれば、不具合のあるツールで書かれたか、アーカイブが途中で切れています。リーフディレクトリが数百MBになる惑星規模のアーカイブでは走査を省略しますが、地図はそのまま使えます。

6. ベクタータイルの展開とデコード

タイルの圧縮方式はヘッダーに書かれています。gzipはブラウザ内蔵のDecompressionStreamで展開します。結果はMapbox Vector TileというProtocol Buffersのメッセージで、このサイトのベクターMBTilesビューアーと同じデコーダーで読みます。

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

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

ポリゴンのリング 面積 > 0  外側のリング、面積 < 0  穴

属性名と値はレイヤーごとに1回だけ保存され、各地物はインデックスの組だけを持ちます。そのため、数千の建物を含むOpenStreetMapのタイルでも100〜200 KB程度に収まります。デコーダーは35万件以上の地物でMapboxの参照デコーダーと比較し、違いはありませんでした。

7. 描画、オーバーズーム、クリック判定

地図の各タイルは256 × 256ピクセル(高解像度画面では512)のキャンバスです。0〜4096のタイル単位をピクセルに変換します。最後のズームレベルを超えると、親タイルを拡大してずらします。クリックはタイル単位に変換され、地物と照合されます。

倍率     = 256 × f / extent        f = 2^(z_地図 − z_データ)
ずれ     = (x mod f, y mod f) × 256

ポイント   距離 ≤ 7 px ならヒット
ライン     線分までの距離 ≤ 5 px ならヒット
ポリゴン   クリック地点からの半直線がリングと奇数回交わればヒット

データはベクターなので、線はどの倍率でも描き直され、くっきりしたままです。ラベルは、Protomapsや多くのPlanetilerビルドが各地物に付けるmin_zoom属性に従います。名前はそのズームに達したときに初めて表示され、場所が足りないときは地名がPOI名より優先されます。外接矩形による簡単な判定でほとんどの地物を先に除外してから正確なクリック判定を行うので、密集した都市のタイルでもすぐに反応します。

8. タイルサイズの目安

大きなタイルは地図を遅くします。何かが表示される前に、各タイルをダウンロードし、展開し、デコードする必要があるからです。tippecanoeは既定でタイルを500 KBに制限しており、同じ上限はベクタータイルサービスで広く使われています。ビューアーはディレクトリから保存されたタイルの長さをすべて取り出し、上限を超えるズームレベルに印を付けます。

保存サイズ   = ディレクトリエントリーの長さ    バイト、圧縮後
平均サイズ   = ズームごとのサイズ / ズームごとのタイル数
目安         最大のタイル < 500 KB(512,000 バイト)

フィレンツェ(pmtiles.io)  最大のタイル 0/0/0 = 434,398 バイト  → OK

OpenStreetMapのPMTilesファイルでは、国や大陸全体を含む低ズームのタイルと、ズーム12〜14の密集した都心部のタイルが最も大きくなりがちです。「最大のタイル」の一覧からすぐにそこへ移動できます。

広告
広告

PMTilesと出力形式の詳細

PMTilesアーカイブの中身、MBTilesとの違い、このビューアーの各ダウンロードの内容を説明します。

ベクターPMTiles .pmtiles

タイルの種類がMVTのPMTiles v3アーカイブです。各タイルは、名前付きレイヤーを持つgzip圧縮のMapbox Vector Tileです。JSONメタデータにはふつうname、attribution、descriptionと、各レイヤーのフィールドを記したvector_layersの一覧が入っています。Planetilerで作ったアーカイブには、作成時刻やOpenStreetMapのレプリケーション情報も記録されます。

metadata = {
  "name": "Paris, OpenStreetMap sample",
  "attribution": "© OpenStreetMap contributors",
  "vector_layers": [
    { "id": "roads", "minzoom": 3, "maxzoom": 12,
      "fields": { "kind": "String", "kind_detail": "String",
                  "name": "String", "min_zoom": "Number", … } } ]
}

ファイル1つでサーバー不要、都市1つから地球全体まで、どんなサイズでも扱えます。範囲リクエストに対応したリーダー(pmtilesライブラリを使うMapLibre、OpenLayers、Leafletのプラグイン、QGIS、このビューアー)と、完成した地図に見せるためのスタイルが必要です。

ラスターPMTiles .pmtiles

構成は同じですが、タイルはPNG、JPEG、WebP、AVIFの画像です。スタイルがピクセルに焼き込まれているため、スタイルの変更や地物の問い合わせはできず、最後のズームレベルを超えるとぼやけます。

ヘッダーのタイルの種類で両者を区別します。このビューアーはラスターのアーカイブを、画像用に作られたこのサイトのPMTilesビューアへ案内します。

PMTilesとMBTilesの比較 .pmtiles / .mbtiles

どちらも同じタイルを保存します。MBTilesはSQLiteデータベースで、SQLを実行するプログラムやサーバーが必要です。PMTilesは独自のインデックスを持つ単純なファイルで、ブラウザがHTTPで1枚ずつタイルを読めます。PMTilesはさらに、同じタイルをランレングスで重複排除し、タイルをヒルベルト曲線に沿って並べます。

編集やMBTilesを前提とするツールにはMBTilesを、Webでの公開にはPMTilesを使います。両者の間で変換しても、各タイルはバイト単位でまったく同じままです。

GeoJSON(表示範囲) .geojson

現在の表示範囲を覆うタイルにある表示中レイヤーのすべての地物を、現在のデータズームで、WGS84のRFC 7946 FeatureCollectionとして出力します。各地物は属性を保ち、_layerと_tileが追加されます。ポリゴンは穴とともにまとめられます。

{ "type": "Feature", "id": 35184380521390,
  "properties": { "kind": "highway", "kind_detail": "motorway", "name": "Avenue de Paris",
                  "min_zoom": 4, "_layer": "roads", "_tile": "11/1037/705" },
  "geometry": { "type": "LineString",
                "coordinates": [[2.3650217, 48.7375971], [2.3645496, 48.7386726], …] } }

地物は保存されているとおりタイルの境界で切れています。1回の出力は最大64枚のタイルです。小さく詳しい範囲が必要なら拡大してください。OpenStreetMapのデータを再利用する前には、ODbLライセンスを確認してください。

PNG(表示範囲) .png

地図ウィンドウに見えているとおりのベクターレイヤーの画像です。白い背景に、名前とズームレベルを示すタイトルバー、メタデータの出典が入ります。

ドキュメントや簡単なプレビューに便利です。背景地図は含まれないので、第三者の画像の権利を気にする必要はありません。

ヘッダーとメタデータ(JSON) .json

PMTilesヘッダーの全項目(位置、長さ、件数、圧縮、タイルの種類、ズーム、範囲、中心)、JSONメタデータ、ズームレベルごとのディレクトリ統計、タイル内で見つかったレイヤーの一覧です。

アーカイブの2つのビルドを比較したり、vector_layersの一覧をMapLibreのスタイルにコピーしたりするのに便利です。

タイル(.pbf) .pbf

クリックした位置のベクタータイル1枚を、MapLibreが受け取るのと同じ展開済みの形で保存します。ファイル名にはz/x/yが入ります。

ほかのツール(たとえばvt2geojsonやprotobufビューアー)に渡して、1枚のタイルを詳しくデバッグできます。

技術レポート .html

アーカイブの概要、地図のプレビュー、すべての検証チェック、ヘッダーの全項目の表、メタデータ、ジオメトリの種類とフィールド付きのレイヤー、ズームレベルごとのタイル、最大のタイル、推奨事項、アーカイブの使い方をまとめた1枚のHTMLページです。

きれいにPDFへ印刷できます。チケットや納品物に添付すれば、受け取った人はアーカイブを開かずに中身を把握できます。

すべての出力は、開いたアーカイブからブラウザ内で作られます。このサイトには何も送られません。

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

PMTilesによって地図の配信はタイルサーバーから単純なファイルへ移りました。そのため、多くの人がそのファイルの中を見る必要が出てきました。

  1. Web地図の開発者. MapLibreのスタイルを書く前にアーカイブを確認できます。どのレイヤーがあるか、フィールド名は何か、どのズームレベルでデータが現れるか。本番のURLを開いて、公開前に範囲リクエストとCORSが動くか確かめましょう。
  2. OpenStreetMapのマッパーとデータ利用者. ProtomapsやPlanetilerビルドのOpenStreetMap PMTiles抽出データを開き、道路、建物、場所をクリックして、どのOSMタグがタイルに入ったかを正確に確認できます。
  3. GISアナリスト. tippecanoe、Planetiler、「pmtiles convert」の出力に正しいレイヤー、属性、ズーム範囲が入っているかを確認し、レポートとともに引き渡せます。
  4. DevOpsとクラウドの担当者. S3、R2、Google Cloud Storageのバケットをテストできます。CORSエラー、範囲リクエスト非対応、ETagがないことをわかりやすく示し、チェックで大きすぎるタイルやクラスター化されていないアーカイブも見つけます。
  5. データの公開者. PMTiles地図を公開する前に、出典、範囲、中心、説明を確認できます。利用者に正しいクレジットと正しい初期表示を届けられます。
  6. オフライン地図と現地調査. 「pmtiles extract」で切り出したアーカイブが正しい範囲とズームレベルを含んでいるかを、電波の届かない場所で使う端末にコピーする前に確認できます。
  7. 学生と教員. クラウドネイティブな地図の仕組みを学べます。タイル境界をオンにし、ズームレベルごとのタイルサイズを比べ、ヘッダーを読み、タイルIDがディレクトリをたどる様子を追えます。
  8. サポートと不具合報告. PMTiles地図に欠けた部分があれば、そのタイルを探して.pbfとしてダウンロードし、レポートとともにチケットに添付できます。

PMTilesについてよくある質問

PMTilesファイルとこのビューアーについて、特によく聞かれる20の質問です。

1. PMTilesファイルとは何ですか?

PMTilesはProtomapsが作った、地図タイルのための単一ファイルのアーカイブ形式です。すべてのズームレベルのタイルとコンパクトなインデックス(ディレクトリ)を持つので、リーダーはHTTPの範囲リクエストで任意のタイルを1枚ずつ取得できます。普通の静的ストレージに置くだけで、タイルサーバーなしで地図として使えます。

2. PMTilesファイルはどうやって開きますか?

さっと確認するなら、このビューアーにドロップするかURLを貼り付けてください。インストールもアップロードも不要です。Web地図を作るなら、pmtilesプロトコルを使ったMapLibre GL JSを使います。QGISはGDAL 3.8以降を使っていればベクターレイヤーとして開けます。pmtilesコマンドラインツールはヘッダーを表示し、MBTilesへ変換できます。上の「PMTilesファイルの開き方」ですべての選択肢を比較しています。

3. このPMTilesビューアーは無料ですか?

はい。無料で、アカウント不要、1日の利用制限なし、出力にウォーターマークも入りません。すべてブラウザ内で動くので、サーバー費用が利用者にかかることもありません。

4. ファイルはアップロードされますか?

いいえ。ローカルファイルはブラウザのFile APIで少しずつ読み込まれ、タイルはタブ内でデコード・描画されます。URLを開いた場合は、ブラウザがそのサーバーから直接データを取得します。このサイトがデータを受け取ることはありません。背景地図をオンにした場合だけ、その提供元から地図が読み込まれます。

5. アーカイブのサイズに上限はありますか?

決まった上限はありません。ビューアーはファイル全体を読み込まず、ヘッダー、ディレクトリ、表示中のタイルだけを読むので、数GBの惑星規模のアーカイブも小さなものと同じ速さで開きます。非常に大きなアーカイブでは、ディレクトリだけで数百MBになるため、ズームごとのタイル統計は省略されます。

6. PMTilesのURLが開けないのはなぜですか?

ほとんどの場合、CORSか範囲リクエストが原因です。サーバーは別のサイトからのリクエストを許可し(Access-Control-Allow-Originヘッダー)、要求されたバイトだけをステータス206で返す必要があります。クラウドのバケットにはGETとHEADのCORSルールが必要で、一部のCDNではバイト範囲のキャッシュを有効にする必要があります。ビューアーのエラーメッセージが、どちらが原因かを教えてくれます。

7. OpenStreetMapのPMTilesとは何ですか?

OpenStreetMapのデータから作られたPMTilesファイルです。たとえばProtomapsのベースマップ(レイヤーearth、water、landuse、landcover、roads、buildings、pois、places、boundaries、transit)や、PlanetilerによるOpenMapTilesスキーマのビルドがあります。毎日更新される地球全体のビルドをダウンロードしたり、地域を切り出したりできます。ODbLライセンスで、「© OpenStreetMap contributors」というクレジットが必要です。

8. PMTilesとMBTilesの違いは何ですか?

どちらも同じタイルを保存します。MBTilesはSQLiteデータベースで、読むにはプログラムかタイルサーバーが必要です。PMTilesは独自のインデックスを持つ単純なファイルで、ブラウザがHTTPで読めます。PMTilesは同じタイルを1回だけ保存します。「pmtiles convert」やこのサイトのMBTiles→PMTiles変換ツールで相互に変換でき、タイルは変わりません。

9. ここでラスターのPMTilesを表示できますか?

このページはベクタータイル用です。ラスターのアーカイブ(PNG、JPEG、WebP、AVIFタイル)を開くと、ビューアーはヘッダーからそれを判別し、画像タイルを表示できるこのサイトのPMTilesビューアへのリンクを示します。

10. 「クラスター化」とはどういう意味ですか?

クラスター化されたアーカイブは、タイルをタイルIDの順に保存しています。そのため、地図上で近いタイルはファイル内でも近くにあります。リーダーは隣のタイルをまとめて取得でき、CDNのキャッシュも効きやすくなります。「pmtiles convert」、tippecanoe、Planetilerが書き出すアーカイブはクラスター化されています。

11. ルートディレクトリが16 KBに収まる必要があるのはなぜですか?

先頭16,384バイトを1回要求すれば、必ずヘッダーとルートディレクトリが一緒に返るようにするためです。リーダーは1往復だけで、各タイルやリーフディレクトリがどこにあるかを知ることができます。ルートがそれより大きいと仕様違反になり、多くのリーダーが失敗します。「チェック」タブで確認できます。

12. タイルIDとは何ですか?

世界中の各タイルに付けられた1つの番号です。まずズーム0のタイルがすべて並び、次にズーム1、という順で、同じズームレベルの中ではヒルベルト曲線に沿って並びます。たとえばパリのタイル12/2074/1409のIDは19,841,346です。ディレクトリがこのIDとバイト範囲を対応付けます。

13. PMTilesの重複排除とは何ですか?

高ズームの外洋や何もない陸地など、多くのタイルはまったく同じです。PMTilesはそのようなタイルを1回だけ保存し、多くのタイルIDから参照させます。長く続く部分にはランレングスを使います。ヘッダーにはアドレス付きタイル数と固有の内容数が記録され、ビューアーはそれでどれだけ容量を節約しているかを示します。

14. オーバーズームとは何ですか?

タイルセットには最後のズームレベルがあり、OpenStreetMapのデータでは14や15がよく使われます。それ以上拡大すると、ビューアーはそのタイルを使い続けて大きく描きます。ベクターデータは描き直されるので、線はくっきりしたままです。ベースマップがズーム15を超えることがほとんどないのはこのためです。

15. 地物がタイルの境界で切れているのはなぜですか?

各ベクタータイルには、その中に入る地物の部分と少しの余白だけが入っています。長い道路はタイルごとに複数の断片として保存され、レンダラーがそれらを並べて描くので、切れ目は見えません。GeoJSON出力では断片は別々のままで、それぞれに_tile属性が付きます。

16. PMTilesをGeoJSONに変換できますか?

ある範囲なら可能です。その範囲まで拡大して「GeoJSON(表示範囲)」を押すと、最大64枚のタイルから表示中のレイヤーが出力されます。アーカイブ全体が必要なら、元のデータから出力するほうが確実です。タイルは単純化され、境界で切られているからです。

17. ここでPMTilesファイルを編集できますか?

いいえ、このビューアーは読むだけです。データを変えるには、元データを編集してtippecanoeやPlanetilerでアーカイブを作り直してください。メタデータだけを変える場合は、コマンドラインツールの「pmtiles edit」を使います。

18. ベクターPMTilesを作れるツールは何ですか?

tippecanoe(GeoJSON、CSV、FlatGeobufから)、Planetiler(OpenStreetMapから。ProtomapsやOpenMapTilesのスキーマにも対応)、GDAL 3.8以降、そしてMBTilesからの「pmtiles convert」です。メタデータに記録されていれば、「アーカイブ情報」タブに作成ツールが表示されます。

19. MLTとは何で、なぜ表示されないのですか?

MLT(MapLibre Tile)は、列ごとの符号化とより高い圧縮率を持つ新しいベクタータイル形式です。PMTilesはタイルの種類6としてこれを保存できます。このビューアーがデコードできるのはMapbox Vector Tiles(MVT)だけで、アーカイブにMLTが含まれている場合はその旨を表示します。MapLibre GL JSならそのようなアーカイブを表示できます。

20. スマートフォンやタブレットでも使えますか?

はい。iOS、Android、Windows、macOS、Linuxの最新のブラウザで使えます。表示中のタイルだけをダウンロードするので、URLから開く方法はスマートフォンで特に便利です。広く使いたいときは全画面版を使ってください。

仕様、ソフトウェア、データのクレジット

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

  • PMTiles (Protomaps) · BSD-3-Clause
    ProtomapsによるPMTiles v3仕様とpmtiles JavaScriptライブラリ:アーカイブの構成、ヒルベルト曲線によるタイルID、ディレクトリ、ファイルやURLからのヘッダー・ディレクトリ・タイルの読み込み。
  • Mapbox Vector Tile仕様:デコーダーが従うprotobufの構成、ジオメトリコマンド、リングの向きの規則。
  • Leaflet 1.9 · BSD-2-Clause
    インタラクティブな地図と、タイルを描画するキャンバスのグリッドレイヤー。
  • OpenStreetMap · ODbL 1.0
    パリのサンプルとフィレンツェの例の地図データ:© OpenStreetMap contributors、Open Database Licenseのもとで提供。
  • Protomaps Basemap and pmtiles.io · BSD-3-Clause / ODbL
    サンプルのベースマップスキーマと、pmtiles.ioにあるフィレンツェの例のアーカイブ。
  • 任意の背景地図:KONAKTIVEがホストする独自のベクタータイル(予備としてCARTOとOpenStreetMap)、およびEsri World Imagery。

ディレクトリの走査、ベクタータイルのデコーダー、レンダラー、チェック、すべての出力機能はこのサイトのために書かれたもので、すべてブラウザ内で動作します。

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

チェックはPMTiles v3とMapbox Vector Tile 2.1の仕様、および一般的な慣習に従っています。チェックに合格しても、すべての地図アプリがアーカイブを受け付けることを保証するものではありません。 Sample data © OpenStreetMap contributors (ODbL), Protomaps. Optional base maps © OpenStreetMap contributors, Protomaps (hosted by KONAKTIVE), CARTO, Esri.

Muhammad Gulraiz Khan、GIS専門家、KONAKTIVEおよびOnlineMapMaker.comの創業者

著者について

Muhammad Gulraiz Khan

GIS専門家・コンサルタント、KONAKTIVE創業者

Muhammad Gulraiz Khanは、エネルギー分野向けに地理空間ソリューションを提供してきた10年以上のプロフェッショナル経験を持つGIS専門家です。世界銀行、国際金融公社(IFC)、USAIDのプロジェクトにも携わってきました。彼はプロフェッショナル品質の地図作成ツールを誰もが無料で利用できるようにするため、OnlineMapMaker.comを立ち上げました。

広告
広告