MKMapView 上のタップした地点を中心にして円を描く
検証環境:
Xcode 12
Swift 5.3
地図上(MKMapView)に図形を描画するためにはMKOverlay
プロトコルに適合したオブジェクトをMKMapView#addOverlay
メソッドで追加する必要がある。
まずMapKit
をインポートしておく。
import MapKit
- MKMapView に
UITapGestureRecognizer
を追加してタップを検出する。
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(mapTapped(_:))) mapView.addGestureRecognizer(tapGesture)
- この時呼び出す
mapTapped
メソッドを定義する。
ここではタップ位置を中心としたMKCircle
オブジェクトを作成してMKMapView#addOverlay
で追加する。
@objc func mapTapped(_ sender: UITapGestureRecognizer) { if sender.state == .ended { let tapPoint = sender.location(in: mapView) // タップした座標(CGPoint)を緯度経度(CLLocationCoordinate2D)に変換する let center = mapView.convert(tapPoint, toCoordinateFrom: view) // 半径100m を指定 let circle = MKCircle(center: center, radius: CLLocationDistance(100)) mapView.addOverlay(circle) } }
MKMapViewDelegate
デリゲートを使う準備
mapView.delegate = self
- デリゲートメソッド
mapView(_:rendererFor:)
を実装して、MKCircleRenderer
オブジェクトを生成する。
このデリゲートメソッドはMKMapView#addOverlay
で追加された時に呼ばれる。
extension ViewController: MKMapViewDelegate { func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer { if let circle = overlay as? MKCircle { let renderer = MKCircleRenderer(circle: circle) renderer.strokeColor = UIColor.red // 枠線の色 renderer.fillColor = UIColor.red.withAlphaComponent(0.2) // 内側の色 renderer.lineWidth = 2 // 枠線の太さ return renderer } return MKOverlayRenderer() } }