マップにタイルレイヤーを追加する (Android SDK)

[アーティクル]
04/15/2024

Note

Azure Maps Android SDK の廃止

Android 用 Azure Maps Native SDK は非推奨となり、2025 年 3 月 31 日に廃止されます。サービスの中断を回避するには、2025 年 3 月 31 日までに Azure Maps Web SDK に移行します。詳細については、「Azure Maps Android SDK 移行ガイド」を参照してください。

この記事では、Azure Maps Android SDK を使用してマップにタイルレイヤーをレンダリングする方法を示します。タイルレイヤーを使用すると、Azure Maps ベースマップタイルの上に画像を重ねることができます。 Azure Maps のタイルシステムの詳細については、ズームレベルとタイルグリッドのドキュメントを参照してください。

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

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

ヒント

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} - サブドメインの値のプレースホルダー (サブドメインの値が指定される場合)。
azmapsdomain.invalid - タイル要求のドメインと認証を、マップで使用されているものと同じ値に合わせるためのプレースホルダー。 Azure Maps によってホストされているタイルサービスを呼び出すときにこれを使用します。

前提条件

この記事のプロセスを完了するには、Azure Maps Android SDK をインストールしてマップを読み込む必要があります。

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

このサンプルは、タイルのセットを指すタイルレイヤーを作成する方法を示しています。このサンプルでは、"x、y、ズーム" タイルシステムを使用します。このタイルレイヤーのソースは、クラウドソーシングされた海図が含まれている OpenSeaMap プロジェクトです。多くの場合、タイルレイヤーを表示するときは、マップ上の都市のラベルをはっきりと確認できることが求められます。この動作は、マップラベルレイヤーの下にタイルレイヤーを挿入することによって実現できます。

TileLayer layer = new TileLayer(
    tileUrl("https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"),
    opacity(0.8f),
    tileSize(256),
    minSourceZoom(7),
    maxSourceZoom(17)
);

map.layers.add(layer, "labels");

val layer = TileLayer(
    tileUrl("https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"),
    opacity(0.8f),
    tileSize(256),
    minSourceZoom(7),
    maxSourceZoom(17)
)

map.layers.add(layer, "labels")

次のスクリーンショットは、上記のコードによって、濃いグレースケールスタイルが設定されたマップ上に航海情報のタイルレイヤーが表示されている状態を示しています。

タイルレイヤーを表示している Android マップ

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

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

TileLayer layer = new TileLayer(
    tileUrl("https://mrdata.usgs.gov/services/gscworld?FORMAT=image/png&HEIGHT=1024&LAYERS=geology&REQUEST=GetMap&STYLES=default&TILED=true&TRANSPARENT=true&WIDTH=1024&VERSION=1.3.0&SERVICE=WMS&CRS=EPSG:3857&BBOX={bbox-epsg-3857}"),
    tileSize(1024)
);

map.layers.add(layer, "labels");

val layer = TileLayer(
    tileUrl("https://mrdata.usgs.gov/services/gscworld?FORMAT=image/png&HEIGHT=1024&LAYERS=geology&REQUEST=GetMap&STYLES=default&TILED=true&TRANSPARENT=true&WIDTH=1024&VERSION=1.3.0&SERVICE=WMS&CRS=EPSG:3857&BBOX={bbox-epsg-3857}"),
    tileSize(1024)
)

map.layers.add(layer, "labels")

次のスクリーンショットは、上記のコードで、アメリカ地質調査所 (USGS) の地質データの Web マッピングサービスを、地図上でラベルの下にオーバーレイしています。

WMS タイルレイヤーを表示している Android マップ

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

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

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

TileLayer layer = new TileLayer(
    tileUrl("https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS/tile/1.0.0/USGSImageryOnly/default/GoogleMapsCompatible/{z}/{y}/{x}"),
    tileSize(256),
    bounds(-173.25000107492872, 0.0005794121990209753, 146.12527718104752, 71.506811402077),
    maxSourceZoom(18)
);

map.layers.add(layer, "transit");

val layer = TileLayer(
    tileUrl("https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/WMTS/tile/1.0.0/USGSImageryOnly/default/GoogleMapsCompatible/{z}/{y}/{x}"),
    tileSize(256),
    bounds(-173.25000107492872, 0.0005794121990209753, 146.12527718104752, 71.506811402077),
    maxSourceZoom(18)
)

map.layers.add(layer, "transit")

次のスクリーンショットは、上記のコードで、アメリカ地質調査所 (USGS) 全国地図の画像の Web マッピングタイルサービスを、地図上で道路とラベルの下にオーバーレイしています。

WMTS タイルレイヤーを表示している Android マップ

次のステップ

地図上で画像をオーバーレイする各種方法の詳細については、次の記事を参照してください。

イメージレイヤー

マップにタイル レイヤーを追加する (Android SDK)

前提条件

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

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

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

次のステップ

その他のリソース

マップにタイルレイヤーを追加する (Android SDK)

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

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

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