Xamarin逆引きTips
Xamarin.iOSで地図に図形を表示するには？（MapKit使用）
Xamarin.iOSでiOS標準の地図ライブラリ「MapKit」を使って、ライン、ポリゴン、円などの図形を地図上に表示する方法を解説する。
前回に引き続き、Xamarin.iOSでMapKitを使用する。今回はライン、ポリゴン、円などの図形を表示する方法を解説する。「Tips：Xamarin.iOSで地図を表示するには？（MapKit使用）」の続きとして解説するので、プロジェクトの準備は前回を参照してほしい。
1. 画面を準備する
前回終了時点で、MainStoryboard.storyboardファイルを開くと、以下の画面のようになっているはずだ。
これに「ライン」「ポリゴン」「円」を描画するためのボタンをそれぞれ追加する。［Name］は、それぞれbuttonLine、buttonPolygon、buttonCircleとする（図2）。
2. ラインを描画する
MapKitSampleViewController.csファイルに、［Line］ボタンを押した時にラインを追加するコードを、以下のように記述する。
|
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;
};
}
}
|
1で、ボタンを押した時に、MKPolylineオブジェクトを生成して、MKMapViewオブジェクトにオーバーレイとして追加している。ここでは川崎駅、蒲田駅、多摩川駅付近を結ぶ線分だ。次に2で、オーバーレイを描画するためのレンダラーを返す関数を設定する。関数の第2引数が描画されるオーバーレイなので、この型がMKPolylineである場合に、ラインを描画するためのMKPolylineRendererオブジェクトを生成して返す。ここでは線色を青、線幅を5ピクセルとしている。
3. ポリゴンを描画する
続いて、［Polygon］ボタンを押した時にポリゴンを追加するコードを、以下のように記述する。
|
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;
};
}
}
|
1で、ボタンを押した時に、MKPolygonオブジェクトを生成してオーバーレイとして追加する。ここでは東京駅、品川駅、新宿駅付近を結ぶ三角形だ。図形を「閉じる」ために、最終点は１点目と同じ座標値を設定する。次に2では、オーバーレイの型がMKPolygonである場合に、ポリゴンを描画するためのMKPolygonRendererオブジェクトを生成して返す。ここでは塗りつぶし色を赤、透過率を50％としている。
4. 円を描画する
最後に、［Circle］ボタンを押した時に円を追加するコードを、以下のように記述する。
|
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;
};
}
}
|
1で、ボタンを押した時に、MKCircleオブジェクトを生成してオーバーレイとして追加する。ここでは秋葉原駅から半径2kmの円としている。次に2で、オーバーレイの型がMKCircleである場合に、円を描画するためのMKCircleRendererオブジェクトを生成して返す。ここでは塗りつぶし色を黄色、透過率を20％（非透過率80％）としている。
【コラム】ネイティブとの違い
ここまで、OverlayRendererによる図形の描画について解説したが、iOSネイティブの開発者であれば、これらはMKMapViewクラスのrendererForOverlayメソッドの実装と同じだと気付くだろう。Xamarin.iOSにもRendererForOverlayメソッドは存在するが、C#言語の仕様上、サブクラス無しに実装することができないので、代替手段としてMKMapViewクラスにOverlayRendererプロパティ（＝型はMKRendererForOverlayDelegateというデリゲート）が用意されている。
5. 図形の削除
図形の削除は、MKMapViewクラスのRemoveOverlayメソッドで行う。また、追加されているオーバーレイはMKMapViewクラスのOverlaysプロパティで取得できるので、これらを利用して、「円が追加されていたらそれを削除する、存在しなければ追加する」というコードは、以下のようになる。
|
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
));
};
……省略……
}
}
|
ここまでのプログラムを実行すると、図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マップを表示するまでの手順を説明する。
