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

プラットフォームを選択: Android iOS JavaScript

シアトル、サンフランシスコ、パリの基本地図

このページでは、Maps 3D SDK for iOS を使用して iOS アプリに基本的な 3D 地図を追加する方法の例を紹介します。このページの手順は、[設定] ページの手順が完了しており、次のものが用意されていることを前提としています。

  • 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 に設定し、組織 ID を com.example に設定します。パッケージ名は com.example.Hello3DWorld にします。
  3. SwiftUI インターフェースを選択します。
  4. アプリに Maps 3D ライブラリを追加します。セットアップ セクションの手順をご覧ください。

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

地球のミニマルな 3D 地図

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

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

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

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

    • .hybrid、または
    • .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. initialCamera プロパティを含めるように Map() 関数呼び出しを変更します。initialCamera を初期化して、マンハッタンのダウンタウンのビューを表示します。

    import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
      latitude: 40.748339,
      longitude: -73.985912,
      altitude: 211.1,
      heading: 52,
      tilt: 68,
      range: 1039
    ), mode: .hybrid)
  }
}

上記のコードでは、次のパラメータの値を設定しています。

  • heading: カメラを向ける方向を北からの角度で指定します。
  • tilt: 傾斜の角度（度単位）。0 は真上、90 は水平方向を向いています。
  • roll: カメラの垂直面を中心としたロールの角度（度単位）。
  • range: 緯度、経度の位置からのカメラの距離（メートル単位）
  • altitude: 海抜を基準としたカメラの高さ。

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

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

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

ニューヨーク市の基本的な 3D 地図

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

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

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

    #Preview {
  CameraDemo()
}

  2. アプリを実行する

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

お疲れさまでした

アプリに 3D 地図を正常に追加できました。

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