SwiftUI で 電子コンパスの値を取得

概要

iOSアプリで電子コンパスを使いたいので
SwiftUIでコンパス情報取得して地図を回すだけの単純なサンプルを作成してみた。

CoreLocationサービスを使うための準備

アプリの info.plist の
Information Property List に
Privacy - Location When In Use Usage Description
を追加し、
「地図、電子コンパス情報を取得するために使います」
といった適当な文字列を設定する。

ソースコード

LocationManager.swiftファイルを追加して北方向への角度情報(heading)を @Published で発行する
ContentView.swift 内でMap(...) を使って地図を表示し、角度情報(heading)を受け取って地図を回転させます。

LocationManager.swift

import MapKit

class LocationManager: NSObject, ObservableObject, CLLocationManagerDelegate {

    @Published var heading:CLLocationDirection = 0.0
    let manager = CLLocationManager()

    override init() {
        super.init()
        
        manager.delegate = self
        manager.requestWhenInUseAuthorization()
        
        //電子コンパス設定
        manager.headingFilter      = kCLHeadingFilterNone
        manager.headingOrientation = .portrait
        manager.startUpdatingHeading()
    }
    
    //電子コンパス値取得
    func locationManager(_ manager: CLLocationManager, didUpdateHeading newHeading: CLHeading) {
        self.heading = newHeading.magneticHeading
    }
    
}

LocationManagerクラスが発行した regionを取り出してMapで地図を表示し、headingを取り出して rotationEffect()で地図を回転させる。

ContentView.swift

import SwiftUI
import MapKit

struct ContentView: View {
    
    @ObservedObject var manager = LocationManager()
    @State var region = MKCoordinateRegion()
    @State var trackingMode = MapUserTrackingMode.follow
    
    var body: some View {
        let heading   = $manager.heading.wrappedValue
        let latitude  = $region.center.latitude.wrappedValue
        let longitude = $region.center.longitude.wrappedValue

        VStack{
            Text("緯度：\(latitude) 経度： \(longitude)")
            Text("北方向: \(heading)")

            Map(coordinateRegion: $region,
                showsUserLocation: true,
                userTrackingMode: $trackingMode)
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.white, lineWidth: 4))
                .shadow(radius: 10)
                .padding(40)
                .edgesIgnoringSafeArea(.bottom)
                .rotationEffect(Angle(degrees: -heading))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

画面表示

上部に緯度経度、北方向を表示し、中心に丸く切り取った地図を表示します。
iPhoneを動かすことで地図が回転します。

感想

R03/06/04

想像以上に簡単にできた

R03/06/10

ソースを簡略化