MKMapSnapshotterを使ってピン有りの地図画像を撮影する

iPhoneアプリでMKMapSnapshotterを使ってピン付きで地図画像を撮影するようにした。

中心にピンをつけるのに少し苦労した。

`MKMapSnapshotter`の公式ドキュメントを参照すると、

Snapshotter objects don’t capture the visual representations of any overlays or annotations that your app creates. If you want those items to appear in the final snapshot, you must draw them on the resulting snapshot image.

要約すると「アノテーションは撮影できません。もし、それらを含めたいのなら自分でスナップショット画像上に描画してください。」

と書かれている。

なぜそのようになっているか分からないが、スナップショットにピンを表示するにはスナップショット画像とピン画像を用意して自分で描画しなければならないらしい。

以下が実装したコード。

        let snapshotter = MKMapSnapshotter(options: options)

        snapshotter.start(completionHandler: {(snapshot, error) in
            if(error != nil){
                completion(UIImage(named: "noimage")!,false)
                return
            }
            
            guard let snapshot = snapshot else {
                completion(UIImage(named: "noimage")!,false)
                return
            }
            
            //スナップショットの上にピン画像を上書きする
            let image = UIGraphicsImageRenderer(size: options.size).image { _ in
                    snapshot.image.draw(at: .zero)

                    let pinView = MKPinAnnotationView(annotation: nil, reuseIdentifier: nil)
                    let pinImage = UIImage(named: "pin")!
                    pinView.image = pinImage
                    
                    //地図上の座標を画像の座標に変換する
                    var point = snapshot.point(for: center)
                    point.x -= pinView.bounds.width / 2
                    point.y -= pinView.bounds.height / 2
                    point.x += pinView.centerOffset.x
                    point.y += pinView.centerOffset.y
                    pinImage.draw(at: point)
                }
            
            completion(image,true)
                        
        })

ImageRendererを使った描画部分のコードが長くなってしまった。

スナップショットを撮影するときに、オプションで1行追加すれば良いようにAppleさんが改善して欲しい。

参考

とても分かりやすいブログでした。

https://muchan611.hatenablog.com/entry/2020/10/31/153137

ABOUTこの記事をかいた人

個人アプリ開発者。Python、Swift、Unityのことを発信します。月間2.5万PVブログ運営。 Twitter:@yamagablog