Erste Schritte mit dem 3D Area Explorer

Übersicht

Mit dem 3D Area Explorer können Sie Orte auf ganz neue Weise entdecken und erleben. Diese Lösung nutzt die Funktionen der fotorealistischen 3D-Kacheln der Google Maps Platform und der Places API, um ansprechende, interaktive 3D-Umgebungen zu erstellen.

Der 3D Area Explorer ist für verschiedene Zwecke konzipiert:

• Gebietserkundung verbessern: Nutzer können Stadtteile virtuell mit einem hohen Maß an visuellen Details erkunden und sich so einen Überblick über lokale Besonderheiten und Sehenswürdigkeiten verschaffen.

• Standortbezogene Geschichten erzählen: Durch die Möglichkeit, POIs (Points of Interest) mit ausführlichen Beschreibungen einzubinden, können Sie Geschichten erzählen, die Nutzer über bestimmte Orte informieren.

• Inspiration für die Entwicklung mit den 3D-Funktionen von Google Maps: Es zeigt das Potenzial der 3D-Kartendaten von Google für die Erstellung immersiver, interaktiver Karten.

Erste Schritte

Aktivieren

• API für fotorealistische 3D-Kacheln
• Places API

Schlüsseltechnologien

Diese Lösung basiert auf zwei Schlüsseltechnologien:

Google Maps Platform APIs

Wir verwenden mehrere APIs der Google Maps Platform, um die Basiskarte und die Daten für diese Anwendung zu erhalten:

• Fotorealistische 3D-Kacheln von Google Maps: Hochauflösende 3D-Modelle von Gebäuden und Gelände bieten eine realistische und visuell ansprechende Darstellung von städtischen Umgebungen.
• Places API: Die App kann detaillierte Informationen zu POIs im erkundeten Bereich identifizieren und anzeigen, um die Nutzerfreundlichkeit mit lokalem Wissen zu verbessern.
• Mit der automatischen Vervollständigung können Nutzer nach bestimmten Orten oder Gebieten suchen.

CesiumJS

CesiumJS ist für das Rendern und Anzeigen des hochauflösenden 3D-Globus verantwortlich. Sie übernimmt das Laden und Visualisieren der fotorealistischen 3D-Kacheln von Google, die ein 3D-Mesh-Modell von Gebäuden und Gelände bieten.

Kameraverwaltung: CesiumJS bietet Tools zum Steuern der Position, Ausrichtung und Bewegung der Kamera. Dazu zählen:

• Der anfängliche Blickpunkt wird so festgelegt, dass beim Laden der App das angegebene Viertel im Fokus steht.
• Implementierung dynamischer Kamerabewegungen, z. B. automatisierte Orbit-Animationen für die Erkundung.
• Nutzerinteraktionen mit dem Globus verarbeiten, wenn solche Funktionen enthalten sind (Schwenken, Zoomen, Drehen).

Informationen zur Verwendung von fotorealistischen 3D-Kacheln mit einem 3D-Kachel-Renderer

Wichtige Komponenten

Die Anwendung ist in zwei verschiedene Apps unterteilt:

• Admin-App
• Demo-App

Dieses Diagramm bietet einen Überblick über die Unterschiede und die Korrelation zwischen den beiden Anwendungen:

Es wäre sinnvoll, jede App genauer zu untersuchen:

Admin-App

Diese Anwendung bietet eine nutzerfreundliche Oberfläche, über die Sie die 3D-Ansicht anpassen können:

• Standortsuche: Verwenden Sie die integrierte Suchleiste für die automatische Vervollständigung der Google Maps Platform, um den Bereich zu finden, den Sie präsentieren möchten. Sobald Sie einen Ort ausgewählt haben, fliegt die Kamera nahtlos dorthin.

• Kamera: Passen Sie die Geschwindigkeit der Kamerabewegung und den Umlaufbahntyp an, um die gewünschte Ansicht zu erstellen.

• Orte (POIs): Legen Sie die Dichte, den Suchradius und die Arten von POIs (z.B. Restaurants, Cafés, Sehenswürdigkeiten) fest, die angezeigt werden sollen.

Mit dieser App können Sie die Nutzung für Ihre Endnutzer anpassen.

• Google-Niederlassung in Chicago mit einer langsamen Kamerafahrt erkunden

• Alle Flughäfen in der Region Chicago ansehen

• Eine dichte Ansicht von Touristenattraktionen rund um den Las Vegas Strip

• Jetzt Las Vegas auf einem sinusförmigen Hochgeschwindigkeits-Kamerapfad erkunden

• Grand Canyon erkunden mit allen wichtigen Touristenattraktionen

Eine detaillierte Beschreibung aller Anpassungen finden Sie unter Anpassungen für den 3D Area Explorer.

Demo-App

Dies ist die endgültige, für Nutzer sichtbare Anwendung, die die in der Admin-App erstellte Konfiguration lädt. In dieser immersiven 3D-Umgebung können Nutzer die ausgewählten Bereiche erkunden und die von Ihnen hervorgehobenen Orte entdecken.

Nachdem Sie das Erscheinungsbild mit der Admin-App angepasst haben, können Sie die Konfiguration herunterladen und Ihre benutzerdefinierte Anwendung aus dem Quellcode ausführen.

User Experience

Zu den wichtigsten Funktionen der Anwendung gehören:

1. Nutzer können ein Gebiet interaktiv in 3D erkunden, einschließlich Gebäuden, Sehenswürdigkeiten und Gelände.
2. Nutzer können nach Orten in der Nähe suchen (z.B. Museen, Parks, Restaurants).

3. Wenn Nutzer einen Ort auswählen, können sie detaillierte Informationen oder Beschreibungen zu diesem Ort aufrufen.

4. Entwickler können die Erkundung über Einstellungen und Steuerelemente personalisieren (wenn sie die Admin-App verwenden).

5. Die automatische Rotation ist aktiviert, sodass sich die Kamera automatisch um die Mitte des ausgewählten Bereichs drehen kann.

Vorbereitung

1. Google Maps API-Schlüssel: Sie benötigen einen gültigen API-Schlüssel, für den die folgenden APIs aktiviert sind:

   • Maps JavaScript API
   • Places API
   • Maps Tiles API

2. Webserver: Sie können die Anwendung über eine der folgenden Optionen bereitstellen:

   • Einen lokalen Webserver (z.B. mit Node.js, http-server)
   • Ein statischer Webhosting-Dienst (die Anwendung wird mit einem Dockerfile geliefert)

Eine detaillierte Beschreibung der Bereitstellungsoptionen finden Sie im Readme-Abschnitt des GitHub-Projekts.

Bereitstellung

Sie können die Anwendung als Knoten-Anwendung oder Docker-Container in einer beliebigen Containerumgebung wie GKE oder GAE bereitstellen. Die gehostete Demo verwendet die folgende Architektur:

• In dieser Architektur befindet sich der Code in einem GitHub-Projekt.
• Cloud Build übernimmt den Code bei jedem Push an „main“ und löst einen Build-Vorgang aus.
• Im Rahmen des Builds wird der API-Schlüssel eingefügt und ein Image erstellt, das dann in Artifact Registry gespeichert wird.
• Schließlich wird das neueste stabile Image aus Artifact Registry in Cloud Run bereitgestellt.
• Außerdem werden einige Systemdiagnosen und Monitoring-Aufgaben ausgeführt, um den Zustand der bereitgestellten Anwendungen zu prüfen.

Zahlungsinformationen

Die 3D Area Explorer-Lösung nutzt Google Maps Platform-Dienste, um eine immersive, dynamische Umgebung zu bieten. Für einige APIs fallen möglicherweise Gebühren an. Hier finden Sie eine Übersicht der APIs und Links zu den Preisen.

Google Maps Platform – 3D Tiles API

Der 3D Area Explorer nutzt die 3D Tiles API, um die visuelle Darstellung mit Geodaten zu verbessern. Preisinformationen zur 3D Tiles API finden Sie unter Google Maps Platform – 3D Tiles API-Preise.

Google Maps Platform – Places API

Die Places API wird für standortbezogene Daten verwendet, um die 3D Area Explorer-Anwendung mit umfangreichen Informationen zu ergänzen. Informationen zu den Kosten für die Google Places API finden Sie auf der Seite Google Maps Platform – Places API – Preise.

Google Maps Platform – Autocomplete API

Die Funktion zur automatischen Vervollständigung verbessert die Nutzerinteraktion. Preisdetails zur Google Maps Autocomplete API finden Sie auf der Google Maps Platform unter Preise für Place Autocomplete.

CesiumJS

CesiumJS wird für die 3D-Globusvisualisierung verwendet. CesiumJS selbst ist zwar Open Source, für zusätzliche Funktionen oder Dienste können jedoch Kosten anfallen. Informationen zu Premium-Angeboten finden Sie in der CesiumJS-Dokumentation.

Es ist wichtig, die Preisdetails für jede API zu prüfen, da die Gebühren individuell auf Grundlage der Nutzung berechnet werden. Die Google Maps Platform bietet eine kostenlose Stufe mit einem bestimmten Nutzungskontingent. Die genauen Preise können je nach Faktoren wie der Anzahl der Anfragen und der Nutzungsregion variieren.

Die genauesten und aktuellsten Informationen zu den Nutzungskosten für die Google Maps Platform und CesiumJS finden Sie immer auf den offiziellen Preisseiten. Achten Sie darauf, die Nutzungsbedingungen dieser Dienste einzuhalten, um die damit verbundenen Kosten effektiv zu verwalten und zu verstehen.

Fazit

Dieses Dokument bietet einen Überblick über die Funktionen, Komponenten, Nutzerfreundlichkeit und technischen Anforderungen des 3D Area Explorer.

Mithilfe der fotorealistischen 3D-Kacheln von Google und der Places API können Sie Stadtteile virtuell erkunden, POIs entdecken und mehr über die lokale Geschichte erfahren.

Ob Sie ein Gebiet präsentieren, die Erkundung verbessern oder digitales Storytelling fördern möchten – der 3D Area Explorer bietet eine visuell beeindruckende Plattform.

Probieren Sie die Demo aus und passen Sie sie mit der Admin-App an, um eine ansprechende und informative 3D-Umgebung zu erstellen.