【Swift】MKOverlayの使い方。地図に円や多角形を描く。(Swift 2.1、XCode 7.2)

2020年6月16日

円や多角形も地図に描画できる

過去の記事でMKMapView(以下、マップビュー)のピンとピンの間に直線を引く方法を説明したことがある。⇒「記事

ピンとピンの間に直線を引く

 

マップビューには直線以外の円や多角形も描くことができる。例えば、ある地点からの半径10m以内の領域を表示したり、区画を四角で囲んだりなど、地図上の対象領域を表示するのに役に立ちそうだ。

そこで本記事ではピンの座標にもとづいて地図の上に図形を描く方法を説明する。

 

実装イメージ

地図に刺したピンをタップすると、ピンを頂点とした多角形が描画される動きを実装する。ただし、ピンが1個の状態でタップしたときはピンを中心とした半径100mの円が描画され、ピンが2個の状態でタップするとピンとピンの間の直線を直径とした円を描画するようにする。

地図上に円や多角形を描く

 

以降の手順は「Map Kit Viewの使い方」の続きから行うので、実装を試してみる人は先に読んでおくことをお勧めする。

実装する

デバイス画面にLong Press Gesture Recognizerを配置する(下図赤矢印)。紫枠のアシスタントエディタボタンを押してViewController.swiftを開く。Ctrlキーを押しながら黄緑枠のジェスチャーリコグナイザーをドラッグ&ドロップでソースコードまで運んで吹き出しの設定画面を表示させる。

Connectionに「Action」、Nameに「pressMap」、Typeに「UILongPressGestureRecognizer」を設定しConnectボタンを押す。これで地図を長押ししたときのイベントをソースコードで受けれるようになった。

Long Press Gesture Recognizerをデバイス画面に配置する

 

ViewController.swiftを以下のコードに変更する。

地図にピンを刺すときに、クラス変数の「ピンのリスト」に刺したピンを追加している。ピンがタップされたら「ピンのリスト」に格納されているピンの個数を確認し、個数に応じて多角形または円を地図に描画し、「ピンのリスト」を空にする。

「ピンのリスト」を空にすることで、図形を描画したあとに続けて別の図形を描画できるようになる。

 

以下は実際のプレイ動画