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

Document created by takahiro_kamiyaesrij-esridist Employee on Oct 31, 2017Last modified by masanobu_hiranoesrij-esridist on Nov 5, 2017
Version 8Show Document
  • View in full screen mode

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.FormsiOS)で表示した例です。

 

 

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

 

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

 

mapstyler から登録した ベクター タイルは ArcGIS Online にアイテムとして登録されます。アイテム詳細ページのURLhttps://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 のサンプル集

 

関連リンク

Attachments

    Outcomes