マップにタイルレイヤーを追加する

[アーティクル]
06/30/2023

この記事では、タイルレイヤーをマップに重ねて配置する方法について説明します。タイルレイヤーを使用すると、Azure Maps ベースマップタイルの上に画像を重ねることができます。 Azure Maps のタイルシステムの詳細については、「ズームレベルとタイルグリッド」を参照してください。

タイルレイヤーでは、サーバーからタイルが読み込まれます。これらの画像は、事前にレンダリングすることも、動的にレンダリングすることもできます。事前にレンダリングされた画像は、タイルレイヤーが認識する名前付け規則を使用して、サーバー上の他の画像と同様に保存されます。動的にレンダリングされた画像は、ほぼリアルタイムで画像を読み込むためのサービスを使用します。 Azure Maps の TileLayer クラスでは、3 種類のタイルサービスの名前付け規則がサポートされています。

X、Y、ズーム表記 - X はタイルグリッド内のタイルの列の位置、Y はそのタイルの行の位置、ズーム表記はズームレベルに基づく値です。
Quadkey 表記 - x、y、ズーム情報を組み合わせて、1 つの文字列値にします。この文字列値は、1 つのタイルの一意識別子になります。
境界ボックス - 境界ボックス座標形式 {west},{south},{east},{north} を使用して画像を指定します。この形式は、Web マッピングサービス (WMS) で一般的に使用されています。

ヒント

TileLayer は、マップ上で大規模なデータセットを視覚化する場合に適しています。画像からタイルレイヤーを生成できるだけでなく、ベクターデータもタイルレイヤーとしてレンダリングできます。ベクターデータをタイルレイヤーとしてレンダリングすることで、マップコントロールでは、タイルが表すベクターデータよりもファイルサイズの小さいタイルを読み込むだけで済みます。この手法は、何百万行ものデータをマップにレンダリングする場合によく使われています。

タイルレイヤーに渡されるタイル URL は、TileJSON リソースへの http または https URL、または次のパラメーターを使用するタイル URL テンプレートにする必要があります。

{x} - タイルの X 位置。 {y} と {z} も必要です。
{y} - タイルの Y 位置。 {x} と {z} も必要です。
{z} - タイルのズームレベル。 {x} と {y} も必要です。
{quadkey} - Bing Maps タイルシステムの名前付け規則に基づくタイルの quadkey 識別子。
{bbox-epsg-3857} - EPSG 3857 空間参照系の {west},{south},{east},{north} 形式の境界ボックス文字列。
{subdomain} - サブドメインの値のプレースホルダー。この値が指定されると、subdomain が追加されます。
{azMapsDomain} - タイル要求のドメインと認証を、マップで使用されているものと同じ値に合わせるためのプレースホルダー。

タイルレイヤーを追加する

このサンプルは、タイルのセットを指すタイルレイヤーを作成する方法を示しています。このサンプルでは、x、y、ズームタイルシステムを使用します。このタイルレイヤーのソースは、クラウドソーシングされた海図が含まれている OpenSeaMap プロジェクトです。ユーザーが、レーダーデータを確認しながら、マップ内を移動するときに、市区町村のラベルがはっきりと確認できることが理想的です。この動作は、labels レイヤーの下にタイルレイヤーを挿入することによって実装できます。

//Create a tile layer and add it to the map below the label layer.
map.layers.add(new atlas.layer.TileLayer({
    tileUrl: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
    opacity: 0.8,
    tileSize: 256,
    minSourceZoom: 7,
    maxSourceZoom: 17
}), 'labels');

x、y、ズームタイリングシステムを使用してタイルのセットを表すタイルレイヤーを作成する方法を示す完全に機能するサンプルについては、「Azure Maps サンプル」の X、Y、Z を使用したタイルレイヤーのサンプルを参照してください。このサンプルのタイルレイヤーのソースは、ODbL の下でライセンスされている OpenStreetMaps プロジェクトである OpenSeaMap プロジェクトの海図です。このサンプルのソースコードについては、X、Y、Z を使用するタイルレイヤーのソースコードを参照してください。

OGC Web マッピングサービス (WMS) を追加する

Web マッピングサービス (WMTS) は、Open Geospatial Consortium (OGC) 標準で、マップデータのイメージを処理します。 Azure Maps で使用できるこの形式のオープンデータセットは数多くあります。この種類のサービスが EPSG:3857 座標参照系 (CRS) をサポートしている場合は、そのサービスをタイルレイヤーで使用できます。 WMS サービスを使用する場合は、幅と高さのパラメーターを、そのサービスでサポートされる値に設定し、必ず tileSize オプションにもこの値を設定してください。書式設定された URL で、 {bbox-epsg-3857} プレースホルダーを使用してサービスの BBOX パラメーターを設定します。

Web Mapping Service (WMS) を表すタイルレイヤーを作成する方法を示す完全に機能するサンプルについては、「Azure Maps サンプル」の WMS タイルレイヤーのサンプルを参照してください。このサンプルのソースコードについては、WMS タイルレイヤーのソースコードを参照してください。

次のスクリーンショットで示されているのは、米国地質調査所 (USGS) の地質データの Web マッピングサービスを、地図上でラベルの下にオーバーレイしている WMS タイルレイヤーのサンプルです。

OGC Web マッピングタイルサービス (WMTS) を追加する

Web マッピングタイルサービス (WMTS) は、Open Geospatial Consortium (OGC) 標準で、マップのタイルベースのオーバーレイを処理します。 Azure Maps で使用できるこの形式のオープンデータセットは数多くあります。この種類のサービスが EPSG:3857 または GoogleMapsCompatible 座標参照系 (CRS) をサポートしている場合は、そのサービスをタイルレイヤーで使用できます。 WMTS サービスを使用する場合は、幅と高さのパラメーターを、そのサービスでサポートされる同じ値に設定し、必ず tileSize オプションにも同じ値を設定してください。書式設定された URL で、以下のプレースホルダーを適宜置換します。

{TileMatrix} =>{z}
{TileRow} =>{y}
{TileCol} =>{x}

Web Mapping Tile Service (WMTS) を表すタイルレイヤーを作成する方法を示す完全に機能するサンプルについては、「Azure Maps サンプル」の WMTS タイルレイヤーのサンプルを参照してください。このサンプルのソースコードについては、WMTS タイルレイヤーのソースコードを参照してください。

次のスクリーンショットで示されているのは、米国地質調査所 (USGS) 全国地図の画像の Web マッピングタイルサービスを、地図上で道路とラベルの下にオーバーレイしている WMTS タイルレイヤーのサンプルです。