アプリに 3D 地図を追加する

このページでは、Maps 3D SDK for iOS を使用して基本的な 3D マップを iOS アプリに追加する方法の例について説明します。このページで説明する手順は、 設定ページの手順が すでに完了済みで、次のものが用意されていることを前提としています。

• Maps 3D SDK for iOS が有効になっている Google Cloud プロジェクト
• Maps 3D SDK for iOS の API キー
• Maps 3D SDK for iOS パッケージが 追加された Xcode バージョン 16.0 以降。

これらの前提条件の詳細については、 設定をご覧ください。

より高度な Codelab を行う。

GitHub でその他のコードサンプルを見る。

パート 1: 基本的な SwiftUI アプリを作成する

1. Xcode で新しいアプリを作成します。
2. 商品名 を Hello3DWorld に設定し、組織識別子を com.example に設定します。パッケージ名は com.example.Hello3DWorld にする必要があります。
3. SwiftUI インターフェースを選択します。
4. Maps 3D ライブラリをアプリに追加します。設定セクションの手順をご覧ください。

パート 2: 地図を追加する

1. ContentView.swift というファイルを開きます。これは、アプリのエントリ ポイントとメイン ナビゲーションです。

2. SwiftUI と GoogleMaps3D パッケージをインポートします。

3. body 宣言内のコード全体を Map(mode: .hybrid) に置き換えます。

   Map を初期化するために指定する必要がある最小限の初期構成は MapMode です。

   • .hybrid、
   • .roadmap、または
   • .satellite

   ContentView.swift ファイルは次のようになります。

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   
   #Preview {
     ContentView()
   }
   

パート 3: API キーを設定する。

1. API キーは、地図を初期化する前に設定する必要があります。これを行うには、地図を含む View の init() イベント ハンドラで Map.apiKey を設定します。

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
   
     var body: some View {
       Map(mode: .hybrid)
     }
   }
   

パート 4: カメラを使用して地図ビューを制御する

3D マップビューは Camera クラスによって制御されます。このステップでは、位置、高度、見出し、傾斜、ロール、範囲を指定して地図ビューをカスタマイズする方法について説明します。

1. Map() 関数呼び出しを変更して、initialCamera プロパティを含めます。initialCamera を初期化して、マンハッタンのダウンタウンのビューを表示します。

   import SwiftUI
   import GoogleMaps3D
   
   struct ContentView: View {
     init () {
       Map.apiKey = "YOUR_API_KEY"
     }
     var body: some View {
       Map(initialCamera: .init(
         center: .init(latitude: 40.748339, longitude: -73.985912, altitude: 211.1),
         heading: 52,
         tilt: 68,
         roll: 0.0,
         range: 1039,
         fieldOfView: .degrees(50)
       ), mode: .hybrid)
     }
   }
   

上記のコードでは、次のパラメータの値が設定されます。

• center: カメラの位置を表す LatLngAltitude
• heading: カメラを向ける方向の北からの度数。
• tilt: 傾斜角度（度単位）。0 は真上、90 は水平方向です。
• roll: カメラの垂直面を中心としたロールの角度（度単位）。
• range: 緯度、経度の位置からのカメラの距離（メートル単位）
• fieldOfView: カメラの画角を表す角度

これらの追加パラメータを指定しない場合は、デフォルト値が使用されます。

カメラビューに 3D データをより多く表示するには、初期パラメータを設定して、より近く、傾斜したビューを表示します。

パート 5: アプリをプレビューして実行する

1. Xcode プレビューを追加する

   プレビューは、シミュレータや外部デバイスを使用せずにアプリを表示して操作できる強力な Xcode 機能です。

   プレビューを追加するには、構造体の外側に #Preview {} コードブロックを追加します。

   #Preview {
     ContentView()
   }
   

2. アプリを実行する

アプリをビルドして実行します。

地図の読み込みとエラーの状態

Maps 3D SDK for iOS は、 Map の状態を管理しながら、組み込みの視覚的なフィードバックを自動的に表示します。

• 読み込みオーバーレイ: 地図ビューが最初に初期化されるか、読み込み中の場合は、中央に進行状況インジケーターが表示されます。
• エラー オーバーレイ: 地図の読み込みに失敗すると、エラー オーバーレイが表示されます。

Map で style(mapID:error:) を使用して Cloud ベースのマップのスタイル設定を適用する場合は、 error クロージャーを渡してスタイルの読み込みエラーを処理できます。

地図のタップイベントをリッスンする

地図のタップイベントをリッスンするには、 onTap(_:) 修飾子を Mapに適用します。 ユーザーが地図をタップすると、クロージャーは MapTapInfo 値を受け取ります。この値は location （LatLngAltitude）とタップされた content （MapTapInfo.Content.map または MapTapInfo.Content.place(id:)）を提供します。 スポットの操作の詳細については、 スポットを操作するをご覧ください。

Map(mode: .hybrid)
  .onTap { tapInfo in
    print("Tapped at \(tapInfo.location), content: \(tapInfo.content)")
  }

お疲れさまでした

アプリに 3D マップを追加できました。

次に、カメラパス アニメーション、3D マーカー、ポリゴンなど、Maps 3D SDK for iOS の高度な機能について学習します。