ベクタータイルを Xamarin.Forms で表示!

1 Kudo

Xamarin.Forms でのアプリ開発については、これまで「Xamarin.Forms で地図の種類を切り替えるロジックを実装する」や「Xamarin.Forms で色々な地図を表示する」で背景地図の表示方法を中心に紹介してきました。

今回も背景地図をテーマとして、ベクタータイルの利用についてご紹介します。標準のベクタータイルをそのまま使用するだけでなく、その特長を生かすためにスタイルを変更して、変更後のベクタータイルを ArcGIS Runtime SDK for .NET ※1 を利用して Xamarin.Forms で表示しました。その方法についてご紹介していきます。

※1 ArcGIS Runtime SDK for .NET は、ArcGIS プラットフォームを利用した地図開発用の SDK です。Windows プラットフォーム向けの開発キットですが、Xamarin.Forms を使用した iOS/Android アプリ開発にも対応しています。

1．ベクタータイルとは

ベクタータイルは、背景地図等に使用されるタイル配信型のレイヤーをベクター形式のタイルで提供するものです。ArcGIS Online の最新の背景地図もベクタータイルで提供されています。その他、国土地理院の背景地図もベクタータイルでの提供実験が開始されており、ArcGIS Runtime SDK for .NET を利用することで Xamarin.Forms でも簡単に背景地図として組み込むことが可能です。

ベクタータイルは、その名の通りベクターデータとして配信されますので、地図を拡大しても地物をシャープに表示できます。また、注記の文字をラベルとして動的に表示し、地図を回転しても注記を適切な向きで表示することができます。さらに道路や建物などのスタイルを好みで変更することも可能です。

ベクタータイルの配信には、データ転送を効率良く行うためのバイナリフォーマット（Google Protocol Buffers）が利用されています。そのため、タイルで区切られたベクターデータを、クライアント側で描画することで、従来のベクターデータよりも高速で表示することが可能になりました。

2．ベクタータイルのスタイル編集

通常、ベクタータイルのスタイルを変えるには、スタイルファイルをダウンロードして、JSON ファイルを書き換えるなどのステップを踏む必要があります。そうしたステップ無しに簡単にベクタータイルのスタイルを変更できる、GitHub に公開されている mapstyler を使用してスタイルを変更しました。

mapstyler の使用方法については ArcGIS ブログの「ベクタータイルベースマップのスタイルをかんたんにかえてみよう」をご参照ください。

3．ベクタータイルを Xamarin.Forms で表示

mapstyler で変更したスタイルは ArcGIS Online 上にタイルレイヤーとしてアップロードされますので、それを使用して Xamarin.Forms で表示しました。以下の画面は実際に mapstyler でスタイルを変更して Xamairn.Forms（iOS）で表示した例です。

以下に、ArcGIS Online に登録してから Xamarin.Forms で表示するまでの手順についてご紹介します。

3-1．ArcGIS Online のアイテム URL の確認

mapstyler から登録したベクタータイルは ArcGIS Online にアイテムとして登録されます。アイテム詳細ページのURL（https://xxxxx.maps.arcgis.com/home/item.html?id=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx）がアイテム URL となり、アプリでベクタータイルを表示する際この URL を使用します。

3-2．ArcGIS Runtime SDK for .NET の利用

ArcGIS Runtime SDK for .NET では、ベクタータイルを表示するための ArcGISVectorTiledLayer クラスが用意されていますので、そのクラスを利用することで簡単に表示することができます。

コードの実装（C#）

ArcGIS Online にアイテムとして登録したベクタータイルは、ArcGISVectorTiledLayer クラスのコンストラクタでアイテムの URL を指定することで呼び出せます。「3-1. ArcGIS Online のアイテム URL の確認」で登録したアイテム URL を使用します。

// ArcGIS Online のアイテム URL
private string _vectorTiledLayerUrl = "http://www.arcgis.com/home/item.html?id=dcbbba0edf094eaa81af19298b9c6247";‍‍
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ArcGISVectorTiledLayer クラスのコンストラクタに指定する URL には、ArcGIS Online 以外で配信されているベクタータイルの URL も設定できます。

例えば、地理院が提供するベクタータイルの URL（https://cyberjapandata.gsi.go.jp/xyz/{dataID}/{z}/{x}/{y}.{拡張子}）を指定することも可能です。

// URL を指定して、新しい ArcGISVectorTiledLayer のインスタンスを作成
_vectorTiledLayer = new ArcGISVectorTiledLayer(new Uri(_vectorTiledLayerUrl));
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

作成した ArcGISVectorTiledLayer のインスタンスを Basemap クラスに指定してベースマップとして呼び出します。

private void Initialize()
{
    // URL を指定して、新しい ArcGISVectorTiledLayer のインスタンスを作成
    _vectorTiledLayer = new ArcGISVectorTiledLayer(new Uri(_vectorTiledLayerUrl));
    // ベクター タイルを使用して新しいベースマップを作成
    Map myMap = new Map(new Basemap(_vectorTiledLayer));
    // 作成したマップを MapView に割り当て
    MyMapView.Map = myMap;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

4．最後に

今回はベクタータイルのスタイルを変更する方法として mapstyler を使用しましたが、それ以外の方法でスタイルを変更して、自分だけのオリジナルの地図を作成・表示することも可能です。ご興味のある方は挑戦してみてください！

今回作成したサンプルアプリケーションは、ESRIジャパンの GitHub にも公開していますので、ぜひ、触ってみてください！

GitHub - EsriJapan/arcgis-samples-dotnet: ArcGIS Runtime SDK for .NET のサンプル集

■関連リンク

ArcGIS for Developers（Esri | ESRIジャパン）
ArcGIS for Developers 開発リソース集
Esri Japan GitHub

ベクター タイル を Xamarin.Forms で表示!