選択した地点から周りを見回せる「Look Around」
Look Aroundとはその名の通り、周りを見回すという意味です。マップ上の選択した地点から周りを見回せるという、Google ストリートビューと同様の機能です。この機能も、iOS16以降は開発者が作成するアプリで利用できるようになりました。
Look Aroundを利用する
地図のある地点の周りの画像情報は、MKLookAroundSceneというオブジェクトで扱います。3Dデータと同様に、MKLookAroundSceneオブジェクトは地図のすべての地点に存在するわけではなく、存在しないこともあります。まず最初に、MKLookAroundSceneを管理するクラスを定義します。
// MKLookAroundSceneを参照するためのオブジェクト
class LookAroundLoader: ObservableObject {
@Published var scene: MKLookAroundScene?
}
MKLookAroundSceneオブジェクトが存在しないことも考慮して、オプショナル型のプロパティとして定義します。また、MKLookAroundSceneを参照できるのは、MKLookAroundViewControllerクラスというViewControllerなので、こちらもUIViewRepresentableプロトコルを用いてViewを作成します。
// MKLookAroundViewControllerをSwiftUIで使えるように
struct LookAroundView: UIViewRepresentable {
@EnvironmentObject var lookAroundLoader: LookAroundLoader
let view = MKLookAroundViewController()
func makeUIView(context: Context) -> UIView {
return view.view
}
func updateUIView(_ uiView: UIView, context: Context) {
// MKLookAroundViewがあれば表示する
if let scene = lookAroundLoader.scene {
view.scene = scene
}
}
}
作成したLookAroundLoaderクラスをEnvironmentObjectプロパティで定義することで、Viewの外部と接続できるようにします。
地図からLook Aroundを検索する
前項で作成した処理は、MKLookAroundSceneオブジェクトを管理し表示する準備するものでした。次は、MKLookAroundSceneオブジェクトを検索して取得するという処理を作成します。地図上のタップした地点でMKLookAroundSceneオブジェクトを取得して画面と共有するために、MapView構造体内にLookAroundLoaderクラスをEnvironmentObject型のプロパティとして宣言します。
struct MapView: UIViewRepresentable {
@EnvironmentObject var mapSetting: MapSetting
@EnvironmentObject var lookAroundLoader: LookAroundLoader
# 略
MKLookAroundSceneオブジェクトを取得するには、MKLookAroundSceneRequestクラスを用います。MKLookAroundSceneRequestクラスには、位置情報が必要です。そこで、地図上のタップした地点にアノテーションを生成し、位置情報を取得します。その後で、アノテーションの位置情報からMKLookAroundSceneオブジェクトを取得するという処理をMKMapViewDelegateのメソッドを利用して作成します。
class MapViewCoordinator: NSObject, MKMapViewDelegate {
# 略
// アノテーション生成
func mapView(_ mapView: MKMapView, viewFor annotation: MKAnnotation) -> MKAnnotationView? {
let markerView = MKMarkerAnnotationView(annotation: annotation, reuseIdentifier: "LookAroundPlace")
markerView.animatesWhenAdded = true
markerView.titleVisibility = .adaptive
return markerView
}
// アノテーション選択時
func mapView(_ mapView: MKMapView, didSelect annotation: MKAnnotation) {
// アノテーションからMKLookAroundSceneを検索
let sceneRequest = MKLookAroundSceneRequest(coordinate: annotation.coordinate) // -------- ①
sceneRequest.getSceneWithCompletionHandler { [unowned self] scene, error in
if let error {
print(error)
} else if let scene {
// MKLookAroundSceneがあればセットする
self.mapView.lookAroundLoader.scene = scene // -------- ②
}
}
}
}
アノテーションを生成する／アノテーションを選択するというメソッドは、MKMapViewDelegateに存在しますので、これらをそのまま利用しています。アノテーションを生成した処理の直後に、アノテーションを選択したという処理が自動的に実行されます。選択したアノテーションのcoordinateプロパティで位置情報が参照できますので、この位置情報からMKLookAroundSceneRequestを実行し（①）、MKLookAroundSceneオブジェクトが取得できた場合は、MapViewのプロパティであるlookAroundLoader.sceneにセットします。
Look Aroundを表示する
最後にContentView側の処理を作成します。地図をタップした地点でLook Aroundのデータが存在すれば表示する、という処理を作成します。前項までで定義した処理をバインディング変数を用いて画面側と接続します。
struct ContentView: View {
@ObservedObject var mapSetting = MapSetting()
@ObservedObject var lookAroundLoader = LookAroundLoader() // -------- ①
var body: some View {
ZStack {
MapView().environmentObject(mapSetting).environmentObject(lookAroundLoader) // -------- ②
.edgesIgnoringSafeArea(.all)
}.overlay(alignment: .bottom) {
VStack {
// MKLookAroundViewがあれば表示する
if lookAroundLoader.scene != nil { // -------- ③
HStack {
LookAroundView().environmentObject(lookAroundLoader)
.frame(width: 160).frame(height: 120)
Spacer()
}.padding([.leading, .top], 20)
}
# 略
ObservedObject型のプロパティとしてLookAroundLoaderクラスのインスタンスを宣言します（①）。MapViewと接続（②）、MKLookAroundViewが存在する場合は、オーバーレイの上部にLookAroundViewを表示する（③）、という処理を作成します。バインディング変数を利用して複数のViewでデータを共有することで、Look Aroundの機能も比較的短いコードでSwiftUIで利用できます。
地図上の選択できる地点は、最初の節のサンプルの通りselectableMapFeaturesプロパティで指定しています。例えば地図上の「東京ステーションギャラリー」を選択すると、その地点にアノテーションが生成され、Look Aroundも取得され、表示されます。Look Aroundのサムネイルをクリックすると、MKLookAroundViewControllerが起動されGoogleストリートビューのように周りの景色を閲覧することができます。
まとめ
iOS16以降で利用できる地図の新機能について説明しました。プレインストールされている地図アプリと同様の機能が、開発者が作成するアプリでも利用できることが実感できたと思います。次回はChartsの機能について説明します。
