タイル化されたウェブマップ

タイル化されたウェブマップ、 スリッピーマップ^[1]（OpenStreetMapの用語）、またはタイルマップは、個別に要求された数十の画像またはベクターデータファイルをシームレスに結合してウェブブラウザに表示される地図です。これは、地図を表示およびナビゲートするための最も一般的な方法で、通常は1つの大きな画像と近くのエリアに移動するための矢印ボタンを表示するWebマップサービス（WMS）などの他の方法に代わるものです。Googleマップは、この技術を使用した最初の主要なマッピングサイトの1つでした。最初のタイル化されたウェブマップでは、ベクタータイルが登場する前はラスタータイルが使用されていました。

タイル マップには、いくつかの利点があります。ユーザーがパンするたびに、タイルのほとんどは関連性があり、新しいタイルが取得される間も表示され続けます。これにより、ビューポート全体の単一のマップ イメージを取得する場合と比較して、ユーザー エクスペリエンスが大幅に向上します。また、個々のタイルを事前に計算できるため、タスクを簡単に並列化できます。また、Web サーバーから提供されるレンダリングされたイメージを表示すると、ブラウザーでイメージをレンダリングするよりも計算負荷が少なくなります。これは、 Web フィーチャ サービス(WFS) などのテクノロジよりも優れています。多くのマップ タイルはラスター形式 ( PNGやJPEGなどのビットマップ ファイル) ですが、ベクター タイルのサプライヤの数が増えています。ベクター タイルはクライアント ブラウザーによってレンダリングされるため、マップにカスタム スタイルを追加できます。ベクター マップ タイルは、テキスト オーバーレイとは別に回転できるため、テキストは読みやすいままです。

規則や標準を必要とするタイル化された Web マップのプロパティには、タイルのサイズ、ズーム レベルの番号付け、使用する投影、個々のタイルの番号付けまたは識別方法、およびタイルの要求方法が含まれます。

ほとんどのタイル ウェブ マップは、特定の Google マップ規則に従います。

• タイルは256x256ピクセルです
• 最も外側のズーム レベル 0 では、世界全体を 1 つのマップ タイルにレンダリングできます。
• 各ズーム レベルは両方の次元で 2 倍になるため、ズームインすると 1 つのタイルが 4 つのタイルに置き換えられます。つまり、ほとんどの実用的な目的には約 22 のズーム レベルで十分です。
• Webメルカトル投影法が使用され、緯度制限は約 85 度です。

事実上のOpenStreetMap標準は、Slippy Map Tilenames ^[2]またはXYZ ^[3]として知られており、これらに従い、さらに以下を追加しています。

• XとYの番号付けスキーム
• タイルのPNG画像
• 画像は、 のような URL を持つWeb サーバーを通じて提供されます。http://.../Z/X/Y.pngここで、Z はズーム レベル、X と Y はタイルを示します。

使用されている番号体系は主に3つあります。^[4]

• Google マップ / OpenStreetMap: (0 ～ 2^ズーム-1、0 ～ 2^ズーム-1)、範囲 (-180、+85.0511) - (+180、-85.0511)
• タイル マップ サービス: (0 ～ 2^ズーム-1、2^ズーム-1 ～ 0)、範囲は (-180、+85.0511) ～ (+180、-85.0511)。 (つまり、Y 値が反転された前のものと同じです。)
• Microsoft が使用するQuadTrees。

いくつかの標準が存在します:

• タイル マップ サービス: OpenLayersでサポートされている初期の標準。違いの 1 つは、TMS では y 軸が北向きで、OpenStreetMap では南向きであることです。
• Web マップ タイル サービス: 最近のOpen Geospatial Consortium (OGC) 標準。
• 上で言及した事実上の XYZ 標準。
• TileJSON: Mapboxによって作成された、ウェブマップに関連付けられたすべてのパラメータの軽量JSON記述。^[5]
• Bing Maps Tile System ^[6]では、アドレス指定にクアッドキーを使用しています。

ブラウザでタイル マップを表示するには、通常、 Web マッピングフレームワークのサポートが必要です。このフレームワークは、タイルの取得、表示、キャッシュ、およびユーザー ナビゲーションを処理します。タイル マップの一般的なフレームワークには、Google Maps API、OpenLayers、Leafletなどがあります。

• 「Web マップはどのように機能しますか?」。Mapbox。
• ボート用のタイル張り海洋地図の例