Erste 3D-Karte mit SwiftUI erstellen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie mit dem Maps 3D SDK for iOS eine 3D-Karten-App in SwiftUI erstellen.

Informationen in diesem Dokument:

• So steuern Sie die Kamera, um sich Orte anzusehen und über die Karte zu schweben.
• Markierungen und Modelle hinzufügen
• Linien und Polygone zeichnen
• Umgang mit Nutzerklicks auf Ortsmarkierungen

Vorbereitung

• Ein Google Console-Projekt mit aktivierter Abrechnung
• Einen API-Schlüssel, der optional auf das Maps 3D SDK for iOS beschränkt ist.
• Grundkenntnisse in der iOS-Entwicklung mit SwiftUI

Aufgaben

• Xcode einrichten und das SDK mit dem Swift Package Manager einbinden
• App für die Verwendung eines API-Schlüssels konfigurieren
• Einfache 3D-Karte in App einbinden
• Kamera so steuern, dass sie zu bestimmten Orten fliegt und diese umkreist
• Karte Markierungen, Linien, Polygone und Modelle hinzufügen

Voraussetzungen

• Xcode 15 oder höher.

2. Einrichten

Für den nächsten Aktivierungsschritt müssen Sie das Maps 3D SDK für iOS aktivieren.

Google Maps Platform einrichten

Wenn Sie noch kein Google Cloud-Konto und kein Projekt mit aktivierter Abrechnung haben, lesen Sie den Leitfaden Erste Schritte mit der Google Maps Platform, um ein Rechnungskonto und ein Projekt zu erstellen.

1. Klicken Sie in der Cloud Console auf das Drop-down-Menü „Projekt“ und wählen Sie das Projekt aus, das Sie für dieses Codelab verwenden möchten.

2. Aktivieren Sie die für dieses Codelab erforderlichen APIs und SDKs der Google Maps Platform im Google Cloud Marketplace. Folgen Sie dazu der Anleitung in diesem Video oder dieser Dokumentation.
3. Erstellen Sie auf der Seite Anmeldedaten der Cloud Console einen API-Schlüssel. Eine Anleitung dazu findest du in diesem Video oder in dieser Dokumentation. Für alle Anfragen an die Google Maps Platform ist ein API-Schlüssel erforderlich.

Maps 3D SDK für iOS aktivieren

Das Maps 3D SDK for iOS finden Sie in der Console über den Menülink „Google Maps Platform“ > „APIs und Dienste“.

Klicken Sie auf „Aktivieren“, um die API für das ausgewählte Projekt zu aktivieren.

3. Einfache SwiftUI-App erstellen

Hinweis: Den Lösungscode für jeden Schritt finden Sie im Codelab-Repository für die Beispiel-App auf GitHub .

Erstellen Sie eine neue App in Xcode.

Den Code für diesen Schritt finden Sie im Ordner GoogleMaps3DDemo auf GitHub.

Öffnen Sie Xcode und erstellen Sie eine neue App. Geben Sie „SwiftUI“ an.

Nennen Sie Ihre App GoogleMaps3DDemo und geben Sie den Paketnamen com.example.GoogleMaps3DDemo an.

GoogleMaps3D-Bibliothek in Ihr Projekt importieren

Fügen Sie das SDK Ihrem Projekt mit Swift Package Manager hinzu.

Wählen Sie in Ihrem Xcode-Projekt oder -Arbeitsbereich „Datei“ > „Paketabhängigkeiten hinzufügen“ aus. Geben Sie https://github.com/googlemaps/ios-maps-3d-sdk als URL ein, drücken Sie die Eingabetaste, um das Paket einzubinden, und klicken Sie auf „Paket hinzufügen“.

Prüfen Sie im Fenster „Paketprodukte auswählen“, ob GoogleMaps3D dem ausgewählten Hauptziel hinzugefügt wird. Klicken Sie abschließend auf „Paket hinzufügen“.

Rufen Sie den Bereich „Allgemein“ des Ziels auf, um die Installation zu überprüfen. Unter „Frameworks“, „Bibliotheken“ und „Eingebettete Inhalte“ sollten die installierten Pakete angezeigt werden. Sie können sich auch den Bereich „Paketabhängigkeiten“ im Projektnavigator ansehen, um das Paket und seine Version zu überprüfen.

Eigenen API-Schlüssel hinzufügen

Sie können Ihren API-Schlüssel in die App hartcodieren, dies ist jedoch nicht empfehlenswert. Wenn Sie eine Konfigurationsdatei hinzufügen, können Sie Ihren API-Schlüssel geheim halten und vermeiden, ihn in die Versionskontrolle einzuchecken.

Neue Konfigurationsdatei im Stammverzeichnis des Projekts erstellen

Achten Sie darauf, dass in Xcode das Fenster „Project Explorer“ geöffnet ist. Klicken Sie mit der rechten Maustaste auf den Projektstamm und wählen Sie „Neue Datei aus Vorlage“ aus. Scrollen Sie nach unten zu „Datei mit Konfigurationseinstellungen“. Wählen Sie diese Option aus und klicken Sie auf „Weiter“. Benennen Sie die Datei in Config.xcconfig um und achten Sie darauf, dass der Projektstammordner ausgewählt ist. Klicken Sie auf „Erstellen“, um die Datei zu erstellen.

Fügen Sie der Konfigurationsdatei im Editor die folgende Zeile hinzu: MAPS_API_KEY = YOUR_API_KEY

Ersetzen Sie dabei YOUR_API_KEY durch Ihren eigenen API-Schlüssel.

Fügen Sie diese Einstellung zu Info.plist hinzu.

Wählen Sie dazu den Projektstamm aus und klicken Sie auf den Tab „Info“.

Fügen Sie eine neue Property namens MAPS_API_KEY mit dem Wert $(MAPS_API_KEY) hinzu.

Der Beispielcode für die App enthält eine Info.plist-Datei, in der diese Eigenschaft angegeben ist.

Karte hinzufügen

Öffnen Sie die Datei GoogleMaps3DDemoApp.swift. Dies ist der Einstiegspunkt und die Hauptnavigation Ihrer App.

Es ruft ContentView() auf, wodurch eine „Hello World“-Nachricht angezeigt wird.

Öffnen Sie ContentView.swift im Editor.

Fügen Sie eine import-Erklärung für GoogleMaps3D hinzu.

Löschen Sie den Code im Codeblock var body: some View {}. Deklarieren Sie eine neue Map() innerhalb der body.

Für die Initialisierung eines Map ist mindestens eine MapMode erforderlich. Es gibt zwei mögliche Werte:

• .hybrid – Satellitenbilder mit Straßen und Labels oder
• .satellite – nur Satellitenbilder.

.hybrid ist die richtige Wahl!

Ihre ContentView.swift-Datei sollte so aussehen.

import GoogleMaps3D
import SwiftUI

@main
struct ContentView: View {
    var body: some View {
      Map(mode: .hybrid)
    }
}

Legen Sie Ihren API-Schlüssel fest.

Der API-Schlüssel muss vor der Initialisierung der Karte festgelegt werden.

Dazu müssen Sie Map.apiKey im init()-Ereignishandler einer View festlegen, die eine Karte enthält. Sie können sie auch in GoogleMaps3DDemoApp.swift festlegen, bevor ContentView() aufgerufen wird.

Legen Sie in GoogleMaps3DDemoApp.swift den Wert Map.apiKey im onAppear-Ereignis-Handler des WindowGroup fest.

API-Schlüssel aus der Konfigurationsdatei abrufen

Verwenden Sie Bundle.main.infoDictionary, um auf die MAPS_API_KEY-Einstellung zuzugreifen, die Sie in Ihrer Konfigurationsdatei erstellt haben.

import GoogleMaps3D
import SwiftUI

@main
struct GoogleMaps3DDemoApp: App {
  var body: some Scene {
    WindowGroup {
      ContentView()
    }
    .onAppear {
      guard let infoDictionary: [String: Any] = Bundle.main.infoDictionary else {
        fatalError("Info.plist not found")
      }
      guard let apiKey: String = infoDictionary["MAPS_API_KEY"] as? String else {
        fatalError("MAPS_API_KEY not set in Info.plist")
      }
      Map.apiKey = apiKey
    }
  }
}

Erstellen Sie Ihre App und führen Sie sie aus, um zu prüfen, ob sie richtig geladen wird. Es sollte eine Weltkarte angezeigt werden.

4. Kamera zur Steuerung der Kartenansicht verwenden

Kamerastatusobjekt erstellen

3D-Kartenansichten werden über die Klasse Camera gesteuert. In diesem Schritt erfahren Sie, wie Sie den Standort, die Höhe, den Kurs, die Neigung, die Rollung und den Bereich angeben, um die Kartenansicht anzupassen.

Hilfsklasse zum Speichern von Kameraeinstellungen erstellen

Fügen Sie eine neue leere Datei mit dem Namen MapHelpers.swift hinzu. Importieren Sie GoogleMaps3D in die neue Datei und fügen Sie der Klasse Camera eine Erweiterung hinzu. Fügen Sie eine Variable namens sanFrancisco hinzu. Initialisieren Sie diese Variable als neues Camera-Objekt. Suchen Sie die Kamera unter latitude: 37.39, longitude: -122.08.

import GoogleMaps3D

extension Camera {
 public static var sanFrancisco: Camera = .init(latitude: 37.39, longitude: -122.08)
}

Ihrer App eine neue Ansicht hinzufügen

Erstellen Sie eine neue Datei mit dem Namen CameraDemo.swift: Fügen Sie der Datei den grundlegenden Umriss einer neuen SwiftUI-Ansicht hinzu.

Fügen Sie eine @State-Variable namens camera vom Typ Camera hinzu. Initialisieren Sie es mit der sanFrancisco-Kamera, die Sie gerade definiert haben.

Mit @State können Sie die Karte an den Kamerastatus binden und als „Source of Truth“ verwenden.

@State var camera: Camera = .sanFrancisco

Ändern Sie den Map()-Funktionsaufruf so, dass er eine camera-Eigenschaft enthält. Verwenden Sie die Kamerastatusbindung $camera, um die Eigenschaft camera für das Kameraobjekt @State (.sanFrancisco) zu initialisieren.

import SwiftUI
import GoogleMaps3D

struct CameraDemo: View {
  @State var camera: Camera = .sanFrancisco
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid)
    }
  }
}

Ihrer App eine grundlegende Navigations-UI hinzufügen

Fügen Sie dem Haupteinstiegspunkt der App, GoogleMaps3DDemoApp.swift, ein NavigationView hinzu.

So können Nutzer eine Liste der Demos aufrufen und auf die einzelnen Demos klicken, um sie zu öffnen.

Bearbeiten Sie GoogleMaps3DDemoApp.swift, um eine neue NavigationView hinzuzufügen.

Fügen Sie ein List mit zwei NavigationLink-Deklarationen hinzu.

Die erste NavigationLink sollte ContentView() mit einer Text-Beschreibung Basic Map öffnen.

Der zweite NavigationLink sollte CameraDemo() öffnen.

...
      NavigationView {
        List {
          NavigationLink(destination: ContentView()) {
            Text("Basic Map")
          }
          NavigationLink(destination: CameraDemo()) {
            Text("Camera Demo")
          }
        }
      }
...

Xcode-Vorschau hinzufügen

Vorschauen sind eine leistungsstarke Xcode-Funktion, mit der Sie Ihre App sehen und mit ihr interagieren können, während Sie Änderungen daran vornehmen.

Wenn Sie eine Vorschau hinzufügen möchten, öffnen Sie CameraDemo.swift. Fügen Sie einen #Preview {}-Codeblock außerhalb des struct hinzu.

#Preview {
 CameraDemo()
}

Öffnen oder aktualisieren Sie den Vorschaubereich in Xcode. Auf der Karte sollte San Francisco zu sehen sein.

Benutzerdefinierte 3D-Ansichten einrichten

Sie können zusätzliche Parameter angeben, um die Kamera zu steuern:

• heading: Die Richtung in Grad, in die die Kamera zeigen soll, ausgehend vom Norden.
• tilt: der Neigungswinkel in Grad, wobei 0 Grad der Zenit und 90 Grad der Horizontalwinkel ist.
• roll: Rollwinkel um die vertikale Ebene der Kamera, in Grad
• range: Die Entfernung der Kamera in Metern vom Breiten- und Längengrad
• altitude: die Höhe der Kamera über dem Meeresspiegel

Wenn Sie keinen dieser zusätzlichen Parameter angeben, werden Standardwerte verwendet.

Wenn in der Kameraansicht mehr 3D-Daten angezeigt werden sollen, legen Sie die ersten Parameter so fest, dass eine nähere, geneigte Ansicht angezeigt wird.

Bearbeiten Sie die in MapHelpers.swift definierte Camera, um Werte für altitude, heading, tilt, roll und range anzugeben.

public static var sanFrancisco: Camera = .init(
  latitude: 37.7845812,
  longitude: -122.3660241,
  altitude: 585,
  heading: 288.0,
  tilt: 75.0,
  roll: 0.0,
  range: 100)

Erstellen Sie die App und führen Sie sie aus, um die neue 3D-Ansicht zu sehen und zu erkunden.

5. Grundlegende Kameraanimationen

Bisher haben Sie mit der Kamera einen einzelnen Standort mit Neigung, Höhe, Richtung und Reichweite angegeben. In diesem Schritt erfahren Sie, wie Sie die Kameraansicht verschieben, indem Sie diese Eigenschaften von einem Anfangszustand in einen neuen Zustand animieren.

Zu einem Ort fliegen

Mit der Methode Map.flyCameraTo() animieren Sie die Kamera vom ursprünglichen Standort zu einem neuen Standort.

Die Methode flyCameraTo() verwendet eine Reihe von Parametern:

• ein Camera für den Endpunkt.
• duration: Dauer der Animation in Sekunden.
• trigger: ein beobachtbares Objekt, das die Animation auslöst, wenn sich sein Status ändert.
• completion: Code, der ausgeführt wird, wenn die Animation abgeschlossen ist.

Zielort festlegen

Öffnen Sie Ihre MapHelpers.swift-Datei.

Definieren Sie ein neues Kameraobjekt, um Seattle anzuzeigen.

public static var seattle: Camera = .init(latitude:
47.6210296,longitude: -122.3496903, heading: 149.0, tilt: 77.0, roll: 0.0, range: 4000)

Fügen Sie eine Schaltfläche hinzu, um die Animation auszulösen.

Öffnen Sie CameraDemo.swift. Deklarieren Sie eine neue boolesche Variable in struct.

Nennen Sie sie animate mit einem Anfangswert von false.

@State private var animate: Bool = false

Fügen Sie unter VStack ein Button hinzu. Mit der Button wird die Kartenanimation gestartet.

Geben Sie der Button einen geeigneten Text, z. B. „Starten“.

import SwiftUI
import GoogleMaps3D

struct CameraDemo: View {
  @State var camera:Camera = .sanFrancisco
  @State private var animate: Bool = false

  var body: some View {
    VStack{
      Map(camera: $camera, mode: .hybrid)
      Button("Start Flying") {
      }
    }
  }
}

Fügen Sie im Schaltflächen-Schließer Code hinzu, um den Status der Variablen animate umzuschalten.

      Button("Start Flying") {
        animate.toggle()
      }

Starten Sie die Animation.

Fügen Sie den Code hinzu, um die flyCameraTo()-Animation auszulösen, wenn sich der Status der Variablen animate ändert.

  var body: some View {
    VStack{
      Map(camera: $camera, mode: .hybrid)
        .flyCameraTo(
          .seattle,
          duration: 5,
          trigger: animate,
          completion: {  }
        )
      Button("Start Flying") {
        animate.toggle()
      }
    }
  }

Um einen Ort herumfliegen

Mit der Methode Map.flyCameraAround() können Sie einen Ort umrunden. Diese Methode verwendet mehrere Parameter:

• eine Camera, die den Standort und die Ansicht definiert.
• duration Sekunden.
• rounds: die Anzahl der Wiederholungen der Animation.
• trigger: ein beobachtbares Objekt, das die Animation auslöst.
• callback: Code, der beim Ausführen der Animation ausgeführt wird.

Definieren Sie eine neue @State-Variable namens flyAround mit dem Anfangswert false.

Fügen Sie dann direkt nach dem Aufruf der flyCameraTo()-Methode einen Aufruf von flyCameraAround() hinzu.

Die Dauer des Rundflugs sollte relativ lang sein, damit sich die Ansicht reibungslos ändert.

Starten Sie die flyCameraAround()-Animation, indem Sie den Status des Triggerobjekts ändern, wenn flyCameraTo() abgeschlossen ist.

Ihr Code sollte so aussehen.

import SwiftUI
import GoogleMaps3D

struct CameraDemo: View {
  @State var camera:Camera = .sanFrancisco
  @State private var animate: Bool = false
  @State private var flyAround: Bool = false

  var body: some View {
    VStack{
      Map(camera: $camera, mode: .hybrid)
        .flyCameraTo(
          .seattle,
          duration: 5,
          trigger: animate,
          completion: { flyAround = true }
        )
        .flyCameraAround(
          .seattle,
          duration: 15,
          rounds: 0.5,
          trigger: flyAround,
          callback: {  }
        )
      Button("Start Flying") {
        animate.toggle()
      }
    }
  }
}

#Preview {
  CameraDemo()
}

Sehen Sie sich eine Vorschau an oder starten Sie die App, um zu sehen, ob die Kamera das Ziel umkreist, sobald die flyCameraTo()-Animation abgeschlossen ist.

6. Fügen Sie Ihrer Karte eine Markierung hinzu.

In diesem Schritt erfahren Sie, wie Sie eine Markierung auf der Karte setzen.

Sie erstellen ein Marker-Objekt und fügen es Ihrer Karte hinzu. Das SDK verwendet ein Standardsymbol für die Markierung. Zum Schluss passen Sie die Höhe der Markierung und andere Eigenschaften an, um die Darstellung zu ändern.

Erstellen Sie eine neue SwiftUI-Ansicht für Ihre Markierungsdemo.

Fügen Sie Ihrem Projekt eine neue Swift-Datei hinzu. Nennen Sie es MarkerDemo.swift.

Fügen Sie den Umriss einer SwiftUI-Ansicht hinzu und initialisieren Sie die Karte wie in Ihrer CameraDemo.

import SwiftUI
import GoogleMaps3D

struct MarkerDemo: View {
  @State var camera: Camera = .sanFrancisco
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid)
    }
  }
}

Markierungsobjekt initialisieren

Deklarieren Sie eine neue Markierungsvariable namens mapMarker. Oben im struct-Codeblock in MarkerDemo.swift.

Platzieren Sie die Definition in der Zeile unter Ihrer camera-Erklärung. In diesem Beispielcode werden alle verfügbaren Properties initialisiert.

  @State var mapMarker: Marker = .init(
    position: .init(
      latitude: 37.8044862,
      longitude: -122.4301493,
      altitude: 0.0),
    altitudeMode: .absolute,
    collisionBehavior: .required,
    extruded: false,
    drawsWhenOccluded: true,
    sizePreserved: true,
    zIndex: 0,
    label: "Test"
  )

Fügen Sie die Markierung Ihrer Karte hinzu.

Fügen Sie die Markierung einer Sperrung hinzu, die beim Erstellen der Karte aufgerufen wird, um sie zu zeichnen.

struct MarkerDemo: View {
  @State var camera: Camera = .sanFrancisco
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        mapMarker
      }
    }
  }
}

Fügen Sie GoogleMaps3DDemoApp.swift eine neue NavigationLink mit dem Ziel MarkerDemo() und der Beschreibung „Markierungsdemo“ hinzu.Text

...
      NavigationView {
        List {
          NavigationLink(destination: Map()) {
            Text("Basic Map")
          }
          NavigationLink(destination: CameraDemo()) {
            Text("Camera Demo")
          }
          NavigationLink(destination: MarkerDemo()) {
            Text("Marker Demo")
          }
        }
      }
...

App in der Vorschau anzeigen und ausführen

Aktualisieren Sie die Vorschau oder führen Sie die App aus, um die Markierung zu sehen.

Extrudierte Markierungen

Mit altitude und altitudeMode können Markierungen über dem Boden oder dem 3D-Mesh platziert werden.

Kopieren Sie die mapMarker-Deklaration in MarkerDemo.swift in eine neue Marker-Variable namens extrudedMarker.

Legen Sie einen Wert ungleich 0 für altitude fest. 50 ist ausreichend.

Ändern Sie altitudeMode in .relativeToMesh und extruded in true. Verwenden Sie latitude und longitude aus dem Code-Snippet hier, um die Markierung auf einem Wolkenkratzer zu platzieren.

  @State var extrudedMarker: Marker = .init(
    position: .init(
      latitude: 37.78980534,
      longitude:  -122.3969349,
      altitude: 50.0),
    altitudeMode: .relativeToMesh,
    collisionBehavior: .required,
    extruded: true,
    drawsWhenOccluded: true,
    sizePreserved: true,
    zIndex: 0,
    label: "Extruded"
  )

Starten Sie die App noch einmal oder sehen Sie sich die Vorschau an. Die Markierung sollte auf einem 3D-Gebäude angezeigt werden.

7. Fügen Sie Ihrer Karte ein Modell hinzu.

Model-Objekte können auf dieselbe Weise hinzugefügt werden wie Marker-Objekte. Sie benötigen eine Modelldatei, auf die über eine URL zugegriffen werden kann oder die Ihrem Projekt als lokale Datei hinzugefügt werden kann. Für diesen Schritt verwenden wir eine lokale Datei, die Sie aus dem GitHub-Repository für dieses Codelab herunterladen können.

Projekt eine Modelldatei hinzufügen

Erstellen Sie in Ihrem Xcode-Projekt einen neuen Ordner mit dem Namen Models.

Laden Sie das Modell aus dem GitHub-Repository für Beispiel-Apps herunter. Fügen Sie sie Ihrem Projekt hinzu, indem Sie sie in der Xcode-Projektansicht in den neuen Ordner ziehen.

Achten Sie darauf, dass das Ziel das Hauptziel für Ihre App ist.

Prüfen Sie die Einstellungen für Ihr Projekt unter „Build Phases“ > „Copy Bundle Resources“. Die Modelldatei sollte sich in der Liste der Ressourcen befinden, die in das Bundle kopiert wurden. Wenn sie nicht vorhanden ist, klicken Sie auf „+“, um sie hinzuzufügen.

Fügen Sie das Modell Ihrer App hinzu.

Erstellen Sie eine neue SwiftUI-Datei mit dem Namen ModelDemo.swift.

Fügen Sie wie in den vorherigen Schritten import-Anweisungen für SwiftUI und GoogleMaps3D hinzu.

Deklarieren Sie in Ihrem body ein Map in einem VStack.

import SwiftUI
import GoogleMaps3D

struct ModelDemo: View {
  @State var camera: Camera = .sanFrancisco
  
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        
      }
    }
  }
}

Rufen Sie den Modellpfad aus Ihrem Bundle ab. Fügen Sie den Code dafür außerhalb von struct ein.

private let fileUrl = Bundle.main.url(forResource: "balloon", withExtension: "glb")

Deklarieren Sie eine Variable für Ihr Modell innerhalb der Struktur.

Geben Sie einen Standardwert an, falls fileUrl nicht angegeben wird.

  @State var balloonModel: Model = .init(
    position: .init(
      latitude: 37.791376,
      longitude: -122.397571,
      altitude: 300.0),
    url: URL(fileURLWithPath: fileUrl?.relativePath ?? ""),
    altitudeMode: .absolute,
    scale: .init(x: 5, y: 5, z: 5),
    orientation: .init(heading: 0, tilt: 0, roll: 0)
  )

3. Verwenden Sie das Modell mit Ihrer Karte.

Wie beim Hinzufügen eines Marker geben Sie einfach die Referenz auf Ihren Model in der Map-Deklaration an.

  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        balloonModel
      }
    }
  }

App in der Vorschau ansehen und ausführen

Fügen Sie GoogleMaps3DDemoApp.swift eine neue NavigationLink mit dem Ziel ModelDemo() und der Text „Modelldemo“ hinzu.

...
          NavigationLink(destination: ModelDemo()) {
            Text("Model Demo")
          }
...

Aktualisieren Sie die Vorschau oder führen Sie die App aus, um das Modell zu sehen.

8. Zeichnen Sie eine Linie und ein Polygon auf der Karte.

In diesem Schritt erfahren Sie, wie Sie Ihrer 3D‑Karte Linien und Polygonformen hinzufügen.

Zur Vereinfachung definieren Sie die Formen als Arrays von LatLngAltitude-Objekten. In einer echten Anwendung können die Daten aus einer Datei, einem API-Aufruf oder einer Datenbank geladen werden.

Erstellen Sie einige Formobjekte, um die Formdaten zu verwalten.

Fügen Sie MapHelpers.swift eine neue Camera-Definition hinzu, die sich auf die Innenstadt von San Francisco bezieht.

  public static var downtownSanFrancisco: Camera = .init(latitude: 37.7905, longitude: -122.3989, heading: 25, tilt: 71, range: 2500) 

Fügen Sie Ihrem Projekt eine neue Datei mit dem Namen ShapesDemo.swift hinzu. Fügen Sie eine struct mit dem Namen ShapesDemo hinzu, die das View-Protokoll implementiert, und fügen Sie ihr eine body hinzu.

struct ShapesDemo: View {
  @State var camera: Camera = .downtownSanFrancisco

  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {

      }
    }
  }
}

Die Klassen, die Sie zum Verwalten von Formdaten verwenden, sind Polyline und Polygon. Öffnen Sie ShapesDemo.swift und fügen Sie sie struct wie unten beschrieben hinzu.

var polyline: Polyline = .init(coordinates: [
    LatLngAltitude(latitude: 37.80515638571346, longitude: -122.4032569467164, altitude: 0),
    LatLngAltitude(latitude: 37.80337073509504, longitude: -122.4012878349353, altitude: 0),
    LatLngAltitude(latitude: 37.79925208843463, longitude: -122.3976697250461, altitude: 0),
    LatLngAltitude(latitude: 37.7989102378512, longitude: -122.3983408725656, altitude: 0),
    LatLngAltitude(latitude: 37.79887832784348, longitude: -122.3987094864192, altitude: 0),
    LatLngAltitude(latitude: 37.79786443410338, longitude: -122.4066878788802, altitude: 0),
    LatLngAltitude(latitude: 37.79549248916587, longitude: -122.4032992702785, altitude: 0),
    LatLngAltitude(latitude: 37.78861484290265, longitude: -122.4019489189814, altitude: 0),
    LatLngAltitude(latitude: 37.78618687561075, longitude: -122.398969592545, altitude: 0),
    LatLngAltitude(latitude: 37.7892310309145, longitude: -122.3951458683092, altitude: 0),
    LatLngAltitude(latitude: 37.7916358762409, longitude: -122.3981969390652, altitude: 0)
  ])
  .stroke(GoogleMaps3D.Polyline.StrokeStyle(
    strokeColor: UIColor(red: 0.09803921568627451, green: 0.403921568627451, blue: 0.8235294117647058, alpha: 1),
    strokeWidth: 10.0,
    outerColor: .white,
    outerWidth: 0.2
    ))
  .contour(GoogleMaps3D.Polyline.ContourStyle(isGeodesic: true))

  var originPolygon: Polygon = .init(outerCoordinates: [
    LatLngAltitude(latitude: 37.79165766856578, longitude:  -122.3983762901255, altitude: 300),
    LatLngAltitude(latitude: 37.7915324439261, longitude:  -122.3982171091383, altitude: 300),
    LatLngAltitude(latitude: 37.79166617650914, longitude:  -122.3980478493319, altitude: 300),
    LatLngAltitude(latitude: 37.79178986470217, longitude:  -122.3982041104199, altitude: 300),
    LatLngAltitude(latitude: 37.79165766856578, longitude:  -122.3983762901255, altitude: 300 )
  ],
  altitudeMode: .relativeToGround)
  .style(GoogleMaps3D.Polygon.StyleOptions(fillColor:.green, extruded: true) )

  var destinationPolygon: Polygon = .init(outerCoordinates: [
      LatLngAltitude(latitude: 37.80515661739527, longitude:  -122.4034307490334, altitude: 300),
      LatLngAltitude(latitude: 37.80503794515428, longitude:  -122.4032633416024, altitude: 300),
      LatLngAltitude(latitude: 37.80517850164195, longitude:  -122.4031056058006, altitude: 300),
      LatLngAltitude(latitude: 37.80529346901115, longitude:  -122.4032622466595, altitude: 300),
      LatLngAltitude(latitude: 37.80515661739527, longitude:  -122.4034307490334, altitude: 300 )
  ],
  altitudeMode: .relativeToGround)
  .style(GoogleMaps3D.Polygon.StyleOptions(fillColor:.red, extruded: true) )

Beachten Sie die verwendeten Initialisierungsparameter.

• Mit altitudeMode: .relativeToGround werden die Polygone auf eine bestimmte Höhe über dem Boden extrudiert.
• Mit altitudeMode: .clampToGround wird die Polylinie so erstellt, dass sie der Form der Erdoberfläche folgt.
• Stile werden für die Polygon-Objekte festgelegt, indem nach dem Aufruf von .init() ein Methodenaufruf an styleOptions() angehängt wird.

Formen zur Karte hinzufügen

Wie in den vorherigen Schritten können die Formen direkt dem Map-Schluss hinzugefügt werden. Erstellen Sie Ihre Map in einem VStack.

...
  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid) {
        polyline
        originPolygon
        destinationPolygon
      }
    }
  }
...

App in der Vorschau anzeigen und ausführen

Fügen Sie Vorschaucode hinzu und prüfen Sie Ihre App im Vorschaubereich in Xcode.

#Preview {
  ShapesDemo()
}

Wenn Sie Ihre App ausführen möchten, fügen Sie GoogleMaps3DDemoApp.swift eine neue NavigationLink hinzu, um die neue Demoansicht zu öffnen.

...
          NavigationLink(destination: ShapesDemo()) {
            Text("Shapes Demo")
          }
...

Führen Sie die App aus und sehen Sie sich die hinzugefügten Formen an.

9. Tipp-Ereignisse für Ortsmarkierungen verarbeiten

In diesem Schritt erfahren Sie, wie Sie auf Nutzertippen auf Ortsmarkierungen reagieren.

Hinweis: Damit Ortsmarkierungen auf der Karte angezeigt werden, müssen Sie MapMode auf .hybrid festlegen.

Für die Verarbeitung des Tippens muss die Methode Map.onPlaceTap implementiert werden.

Das Ereignis onPlaceTap enthält ein PlaceTapInfo-Objekt, über das Sie die Orts-ID der angetippten Markierung abrufen können.

Mit der Orts-ID können Sie mit dem Places SDK oder der Places API weitere Details abrufen.

Neue Swift-Ansicht hinzufügen

Fügen Sie den folgenden Code in eine neue Swift-Datei namens PlaceTapDemo.swift ein.

import GoogleMaps3D
import SwiftUI

struct PlaceTapDemo: View {
  @State var camera: Camera = .sanFrancisco
  @State var isPresented = false
  @State var tapInfo: PlaceTapInfo?

  var body: some View {
    Map(camera: $camera, mode: .hybrid)
      .onPlaceTap { tapInfo in
        self.tapInfo = tapInfo
        isPresented.toggle()
      }
      .alert(
        "Place tapped - \(tapInfo?.placeId ?? "nil")",
        isPresented: $isPresented,
        actions: { Button("OK") {} }
      )
  }
}
#Preview {
  PlaceTapDemo()
}

App in der Vorschau anzeigen und ausführen

Öffnen Sie das Vorschaufenster, um sich eine Vorschau der App anzusehen.

Wenn Sie die App ausführen möchten, fügen Sie GoogleMaps3DDemoApp.swift eine neue NavigationLink hinzu.

...
          NavigationLink(destination: PlaceTapDemo()) {
            Text("Place Tap Demo")
          }
...

10. (Optional) Weiterführende Informationen

Erweiterte Kameraanimationen

Bei einigen Anwendungsfällen muss eine Sequenz oder Liste von Orten oder Kamerastatus flüssig animiert werden, z. B. in einem Flugsimulator oder bei der Wiedergabe einer Wanderung oder eines Laufs.

In diesem Schritt erfahren Sie, wie Sie eine Liste von Orten aus einer Datei laden und die einzelnen Orte nacheinander animieren.

Laden Sie eine Datei mit einer Sequenz von Standorten hoch.

Laden Sie flightpath.json aus dem GitHub-Repository für Beispiel-Apps herunter.

Erstellen Sie in Ihrem Xcode-Projekt einen neuen Ordner mit dem Namen JSON.

Ziehen Sie flightpath.json in Xcode in den Ordner JSON.

Legen Sie das Ziel als Hauptziel Ihrer App fest. Prüfen Sie, ob diese Datei in den Einstellungen für die Kopie von Bundle-Ressourcen Ihres Projekts enthalten ist.

Erstellen Sie in Ihrer App zwei neue Swift-Dateien mit den Namen FlightPathData.swift und FlightDataLoader.swift.

Kopieren Sie den folgenden Code in Ihre App. Mit diesem Code werden Strukturen und Klassen erstellt, die eine lokale Datei namens „flighpath.json“ lesen und als JSON decodieren.

Die FlightPathData- und FlightPathLocation-Strukturen stellen die Datenstruktur in der JSON-Datei als Swift-Objekte dar.

Die Klasse FlightDataLoader liest die Daten aus der Datei und decodiert sie. Dabei wird das ObservableObject-Protokoll verwendet, damit Ihre App Änderungen an den Daten beobachten kann.

Die geparsten Daten werden über eine veröffentlichte Property bereitgestellt.

FlightPaths.swift

import GoogleMaps3D

struct FlightPathData: Decodable {
  let flight: [FlightPathLocation]
}

struct FlightPathLocation: Decodable {
  let timestamp: Int64
  let latitude: Double
  let longitude: Double
  let altitude: Double
  let bearing: Double
  let speed: Double
}

FlightDataLoader.swift

import Foundation

public class FlightDataLoader : ObservableObject {

  @Published var flightPathData: FlightPathData = FlightPathData(flight:[])
  @Published var isLoaded: Bool = false

  public init() {
    load("flightpath.json")
  }
  
  public func load(_ path: String) {
    if let url = Bundle.main.url(forResource: path, withExtension: nil){
      if let data = try? Data(contentsOf: url){
        let jsondecoder = JSONDecoder()
        do{
          let result = try jsondecoder.decode(FlightPathData.self, from: data)
          flightPathData = result
          isLoaded = true
        }
        catch {
          print("Error trying to load or parse the JSON file.")
        }
      }
    }
  }
}

Kamerafahrt zu den einzelnen Standorten

Wenn Sie die Kamera zwischen einer Abfolge von Schritten animieren möchten, verwenden Sie ein KeyframeAnimator.

Jede Keyframe wird als CubicKeyframe erstellt, damit die Änderungen des Kamerastatus flüssig animiert werden.

Wenn Sie flyCameraTo() verwenden, springt die Ansicht zwischen den einzelnen Standorten hin und her.

Deklarieren Sie zuerst in MapHelpers.swift eine Kamera namens „innsbruck“.

public static var innsbruck: Camera = .init(
  latitude: 47.263,
  longitude: 11.3704,
  altitude: 640.08,
  heading: 237,
  tilt: 80.0,
  roll: 0.0,
  range: 200)

Richten Sie jetzt eine neue Ansicht in einer neuen Datei mit dem Namen FlyAlongRoute.swift ein.

Importieren Sie SwiftUI und GoogleMaps3D. Fügen Sie Map und Button in VStack ein. Richten Sie die Button so ein, dass sie den Status der booleschen Variablen animation umschaltet.

Deklariere ein State-Objekt für FlightDataLoader, das die JSON-Datei beim Initialisieren lädt.

import GoogleMaps3D
import SwiftUI

struct FlyAlongRoute: View {
  @State private var camera: Camera = .innsbruck
  @State private var flyToDuration: TimeInterval = 5
  @State var animation: Bool = true

  @StateObject var flightData: FlightDataLoader = FlightDataLoader()

  var body: some View {
    VStack {
      Map(camera: $camera, mode: .hybrid)
      Button("Fly Along Route"){
        animation.toggle()
      }
    }
  }
}

Keyframes erstellen

Dazu erstellen Sie eine Funktion, die einen neuen Frame in der Animationssequenz zurückgibt. Jeder neue Frame definiert den nächsten Kamerastatus, den der Animator animieren soll. Rufen Sie diese Funktion nach dem Erstellen nacheinander mit jedem Speicherort aus der Datei auf.

Fügen Sie der Struktur FlyAlongRoute zwei Funktionen hinzu. Die Funktion makeKeyFrame gibt einen CubicKeyframe mit einem Kamerastatus zurück. Die Funktion makeCamera nimmt einen Schritt in der Flugdatensequenz an und gibt ein Camera-Objekt zurück, das den Schritt darstellt.

func makeKeyFrame(step: FlightPathLocation) -> CubicKeyframe<Camera> {
  return CubicKeyframe(
    makeCamera(step: step),
    duration: flyToDuration
  )
}

func makeCamera(step: FlightPathLocation) -> Camera {
  return .init(
    latitude: step.latitude,
    longitude: step.longitude,
    altitude: step.altitude,
    heading: step.bearing,
    tilt: 75,
    roll: 0,
    range: 200
  )
}

Animation zusammenstellen

Rufen Sie keyframeAnimator nach der Map-Initialisierung auf und legen Sie die Anfangswerte fest.

Sie benötigen einen Anfangskamerastatus, der auf dem ersten Standort im Flugpfad basiert.

Die Animation sollte basierend auf einer Variablen ausgelöst werden, die den Status ändert.

Der keyframeAnimator-Inhalt muss eine Karte sein.

Die eigentliche Liste der Frames wird generiert, indem alle Positionen im Flugpfad durchlaufen werden.

   VStack {
      Map(camera: $camera, mode: .hybrid)
        .keyframeAnimator(
          initialValue: makeCamera(step: flightData.flightPathData.flight[0]),
          trigger: animation,
          content: { view, value in
            Map(camera: .constant(value), mode: .hybrid)
          },
          keyframes: { _ in
            KeyframeTrack(content: {
              for i in  1...flightData.flightPathData.flight.count-1 {
                makeKeyFrame(step: flightData.flightPathData.flight[i])
              }
            })
          }
        )
   }

Rufen Sie eine Vorschau Ihrer App auf und führen Sie sie aus.

Öffnen Sie das Vorschaufenster, um eine Vorschau der Ansicht aufzurufen.

Fügen Sie eine neue NavigationLink mit dem Ziel FlightPathDemo() zu GoogleMaps3DDemoApp.swift hinzu und führen Sie die App aus, um sie zu testen.

11. Glückwunsch

Sie haben eine Anwendung erstellt, die

• Ihrer App wird eine einfache 3D-Karte hinzugefügt.
• Hiermit können Sie Markierungen, Linien, Polygone und Modelle auf der Karte hinzufügen.
• Hier wird Code implementiert, um die Kamera so zu steuern, dass sie über die Karte und um bestimmte Orte herumfliegt.

Das haben Sie gelernt

• So fügen Sie einer Xcode-SwiftUI-App das GoogleMaps3D-Paket hinzu.
• So initialisieren Sie eine 3D‑Karte mit einem API-Schlüssel und einer Standardansicht.
• So fügen Sie Ihrer Karte Markierungen, 3D‑Modelle, Linien und Polygone hinzu.
• Kamera steuern, um die Bewegung zu einem anderen Ort zu animieren
• So verarbeiten Sie Klickereignisse für Ortsmarkierungen.

Nächste Schritte

• Weitere Informationen zu den Möglichkeiten mit dem Maps 3D SDK für iOS finden Sie im Entwicklerleitfaden.
• Hilf uns dabei, Inhalte zu erstellen, die für dich am nützlichsten sind. Beantworte dazu einfach die folgenden Fragen:

Welche anderen Codelabs würden Sie sich wünschen?

Datenvisualisierung auf Karten Weitere Informationen zum Anpassen des Stils meiner Karten 3D-Interaktionen in Karten