Xamarin逆引きTips

Xamarin逆引きTips

Xamarin.iOSで地図に図形を表示するには?(MapKit使用)

2014年9月10日

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って、ライン、ポリゴン、円などの図形を地図上に表示する方法を解説する。

奥山 裕紳(@amay077
  • このエントリーをはてなブックマークに追加

 前回に引き続き、Xamarin.iOSでMapKitを使用する。今回はライン、ポリゴン、円などの図形を表示する方法を解説する。「Tips:Xamarin.iOSで地図を表示するには?(MapKit使用)」の続きとして解説するので、プロジェクトの準備は前回を参照してほしい。

1. 画面を準備する

 前回終了時点で、MainStoryboard.storyboardファイルを開くと、以下の画面のようになっているはずだ。

図1 前回終了時のMainStoryboard

 これに「ライン」「ポリゴン」「円」を描画するためのボタンをそれぞれ追加する。[Name]は、それぞれbuttonLinebuttonPolygonbuttonCircleとする(図2)。

図2 ボタンを追加したStoryboard

2. ラインを描画する

 MapKitSampleViewController.csファイルに、[Line]ボタンを押した時にラインを追加するコードを、以下のように記述する。

C#
public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();

    ……省略……

    buttonLine.TouchUpInside += (sender, e) => 
    {
      mapView.AddOverlay(MKPolyline.FromCoordinates(new [] {
        new CLLocationCoordinate2D(35.531d, 139.697d), // 川崎駅付近
        new CLLocationCoordinate2D(35.562d, 139.716d), // 蒲田駅付近
        new CLLocationCoordinate2D(35.589d, 139.668d) // 多摩川駅付近
      })); //<-1
    };

    mapView.OverlayRenderer = (view, overlay) => //<-2
    {
      if (overlay is MKPolyline) 
      {
        return new MKPolylineRenderer(overlay as MKPolyline) //<-3
        { 
          StrokeColor = UIColor.Blue, 
          LineWidth = 5f
        };       }
      return null;
    };
  }
}
ラインを描画するコード(MapKitSampleViewController.cs)

 1で、ボタンを押した時に、MKPolylineオブジェクトを生成して、MKMapViewオブジェクトにオーバーレイとして追加している。ここでは川崎駅、蒲田駅、多摩川駅付近を結ぶ線分だ。次に2で、オーバーレイを描画するためのレンダラーを返す関数を設定する。関数の第2引数が描画されるオーバーレイなので、この型がMKPolylineである場合に、ラインを描画するためのMKPolylineRendererオブジェクトを生成して返す。ここでは線色を青、線幅を5ピクセルとしている。

3. ポリゴンを描画する

 続いて、[Polygon]ボタンを押した時にポリゴンを追加するコードを、以下のように記述する。

C#
public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();

    ……省略……

    buttonPolygon.TouchUpInside += (sender, e) => 
    {
      mapView.AddOverlay(MKPolygon.FromCoordinates(new [] {
        new CLLocationCoordinate2D(35.680d, 139.765d), // 東京駅付近
        new CLLocationCoordinate2D(35.629d, 139.737d), // 品川駅付近
        new CLLocationCoordinate2D(35.690d, 139.699d), // 新宿駅付近
        new CLLocationCoordinate2D(35.680d, 139.765d)  // 東京駅付近
      }));  //<-1
    };

    mapView.OverlayRenderer = (view, overlay) => 
    {
      if (overlay is MKPolyline) 
      {
        ……省略……
      }
      else if (overlay is MKPolygon) 
      {
        return new MKPolygonRenderer(overlay as MKPolygon) //<-2
        { 
          FillColor = UIColor.Red, 
          Alpha = 0.5f 
        };
      }
      return null;
    };
  }
}
ポリゴンを描画するコード(MapKitSampleViewController.cs)

 1で、ボタンを押した時に、MKPolygonオブジェクトを生成してオーバーレイとして追加する。ここでは東京駅、品川駅、新宿駅付近を結ぶ三角形だ。図形を「閉じる」ために、最終点は1点目と同じ座標値を設定する。次に2では、オーバーレイの型がMKPolygonである場合に、ポリゴンを描画するためのMKPolygonRendererオブジェクトを生成して返す。ここでは塗りつぶし色を赤、透過率を50%としている。

4. 円を描画する

 最後に、[Circle]ボタンを押した時に円を追加するコードを、以下のように記述する。

C#
public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();

    ……省略……

    buttonCircle.TouchUpInside += (sender, e) => 
    {
      mapView.AddOverlay(MKCircle.Circle(
        new CLLocationCoordinate2D(35.697d, 139.773d), // 秋葉原駅付近
        2000 // 2km
      ));  //<-1
    };

    mapView.OverlayRenderer = (view, overlay) => 
    {
      if (overlay is MKPolyline) 
      {
        ……省略……
      }
      else if (overlay is MKPolygon) 
      {
        ……省略……
      }
      else if (overlay is MKCircle) 
      {
        return new MKCircleRenderer(overlay as MKCircle) //<-2
        { 
          FillColor = UIColor.Yellow, 
          Alpha = 0.8f 
        };
      }
      return null;
    };
  }
}
円を描画するコード(MapKitSampleViewController.cs)

 1で、ボタンを押した時に、MKCircleオブジェクトを生成してオーバーレイとして追加する。ここでは秋葉原駅から半径2kmの円としている。次に2で、オーバーレイの型がMKCircleである場合に、円を描画するためのMKCircleRendererオブジェクトを生成して返す。ここでは塗りつぶし色を黄色、透過率を20%(非透過率80%)としている。

【コラム】ネイティブとの違い

 ここまで、OverlayRendererによる図形の描画について解説したが、iOSネイティブの開発者であれば、これらはMKMapViewクラスのrendererForOverlayメソッドの実装と同じだと気付くだろう。Xamarin.iOSにもRendererForOverlayメソッドは存在するが、C#言語の仕様上、サブクラス無しに実装することができないので、代替手段としてMKMapViewクラスにOverlayRendererプロパティ(=型はMKRendererForOverlayDelegateというデリゲート)が用意されている。

5. 図形の削除

 図形の削除は、MKMapViewクラスのRemoveOverlayメソッドで行う。また、追加されているオーバーレイはMKMapViewクラスのOverlaysプロパティで取得できるので、これらを利用して、「円が追加されていたらそれを削除する、存在しなければ追加する」というコードは、以下のようになる。

C#
using System.Linq;
……省略……

public partial class MapKitSampleViewController : UIViewController
{
  ……省略……

  public override void ViewDidLoad()
  {
    base.ViewDidLoad();

    ……省略……

    buttonCircle.TouchUpInside += (sender, e) => 
    {
      if (mapView.Overlays != null)
      {
        var hittedCircle = mapView.Overlays.FirstOrDefault(x => x is MKCircle);
        if (hittedCircle != null) 
        {
          mapView.RemoveOverlay(hittedCircle);
          return;
        }
      }

      mapView.AddOverlay(MKCircle.Circle(
        new CLLocationCoordinate2D(35.697d, 139.773d), // 秋葉原駅付近
        2000 // 2km
      ));
    };

    ……省略……
  }
}
図形を削除するコード(MapKitSampleViewController.cs)

 ここまでのプログラムを実行すると、図3のようになる。

図3 プログラムの実行結果(図形の表示)

 [Line]/[Polygon]/[Circle]ボタンを押すと、それぞれ「ライン」「ポリゴン」「円」が地図に追加される。[Circle]ボタンは、押すごとに円の追加/削除が繰り返される。

まとめ

 MapKitでの図形の追加と削除について解説した。Xamarin Developer Center(英語)の、

なども参照されたい。

 次回は、MapKitでマーカーを使用する方法について解説する予定だ。

※以下では、本稿の前後を合わせて5回分(第16回~第20回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

16. Xamarin.iOSでの画面遷移で「戻る」を実現するには?(Storyboard、Unwind Segue使用)

画面遷移で戻る処理を実装する方法として、Xamarin StudioのiOSデザイナーで「Unwind Segue」を使う方法を説明する。

17. Xamarin.iOSで地図を表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って地図を表示する方法を解説。また、地図の種類の変更、ジェスチャの有効/無効の切り替えなども説明する。

18. 【現在、表示中】≫ Xamarin.iOSで地図に図形を表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って、ライン、ポリゴン、円などの図形を地図上に表示する方法を解説する。

19. Xamarin.iOSで地図にマーカーを表示するには?(MapKit使用)

Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って、マーカーを追加/削除するには? また、マーカー選択時の処理や、吹き出し表示、吹き出しタップ時の処理の、基本的な実装方法を説明する。

20. Xamarin.Androidで地図を表示するには?(Google Maps使用)

Androidで最も一般的な地図API「Google Maps Android API v2」を使って、Xamarin.Androidで地図を表示する方法を解説。API利用環境の準備から、まずはGoogleマップを表示するまでの手順を説明する。

サイトからのお知らせ

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社