3D Area Explorer – Erste Schritte

Übersicht

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

Der 3D Area Explorer hat mehrere Zwecke:

• Erweiterte Erkundung von Gebieten:Nutzer können Viertel virtuell mit hoher visueller Detailgenauigkeit erkunden und so Einblicke in lokale Merkmale und Sehenswürdigkeiten gewinnen.

• Standortbezogene Geschichten fördern: Die Möglichkeit, POIs (Points of Interest) mit ausführlichen Beschreibungen einzubinden, ermöglicht die Erstellung von narrativen Inhalten, die Nutzer über bestimmte Orte informieren und ihnen Wissen vermitteln.

• Entwicklung mit den 3D-Funktionen von Google Maps inspirieren:Hier wird das Potenzial der 3D-Kartierungsdaten von Google für die Erstellung immersiver, interaktiver Karten veranschaulicht.

Erste Schritte:

Verwenden Sie die gehostete 3D Area Explorer Admin App.

oder

Holen Sie sich einen API-Schlüssel und laden Sie den Code von GitHub herunter.

Aktivieren

• Photorealistic 3D Tiles API
• Places API

Schlüsseltechnologien

Diese Lösung basiert auf zwei wichtigen Technologien:

Google Maps Platform APIs:

Wir verwenden mehrere APIs der Google Maps Platform, um die Basiskarte und die Daten für diese Funktion abzurufen:

• Fotorealistische 3D-Kacheln in 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 POIs (Points of Interest) im zu erkundenden Gebiet erkennen und detaillierte Informationen dazu anzeigen. So wird die Nutzererfahrung durch lokales Wissen bereichert.
• Die automatische Vervollständigung hilft Nutzern, nach bestimmten Orten oder POIs zu suchen.

CesiumJS

CesiumJS ist für das Rendern und Darstellen des hochauflösenden 3D-Globus verantwortlich. Es kümmert sich um das Laden und Visualisieren der fotorealistischen 3D-Kacheln von Google, die ein 3D-Mesh-Modell von Gebäuden und Gelände darstellen.

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

• Der anfängliche Blickwinkel wird so eingestellt, dass beim Laden der App der Fokus auf das angegebene Viertel gerichtet ist.
• Implementierung dynamischer Kamerabewegungen, z. B. automatisierte Orbit-Animationen für die Erkundung.
• Nutzerinteraktionen mit dem Globus verarbeiten, sofern solche Funktionen vorhanden sind (Schwenken, Zoomen, Drehen)

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

Wichtige Komponenten

Die Anwendung ist in zwei verschiedene Apps unterteilt:

• Admin-App
• Demo-App

Dieses Diagramm gibt 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, mit der Sie die 3D-Darstellung anpassen können:

• Standortsuche :Verwenden Sie die integrierte Suchleiste mit automatischer Vervollständigung der Google Maps Platform, um den gewünschten Bereich zu finden. Sobald Sie einen Ort ausgewählt haben, schwebt die Kamera nahtlos dorthin.

• Kamera:Passen Sie die Kamerabewegungsgeschwindigkeit und den Orbittyp an, um die gewünschte Wiedergabe zu erzielen.

• 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.

Hinweis :Sie können die Admin-App auch als Demo-App verwenden, die dem Endnutzer nur unterschiedliche Konfigurationen präsentiert. So haben wir das hier gemacht:

• Sehen Sie sich das Google-Büro in Chicago an, indem Sie dem langsamen Kamerapfad folgen.

• Alle Flughäfen in der Region Chicago ansehen

• Detaillierte Ansicht der Sehenswürdigkeiten am Las Vegas Strip

• Jetzt können Sie Las Vegas entlang eines sinusförmigen Kamerapfads mit hoher Geschwindigkeit erkunden.

• Grand Canyon mit allen wichtigen Sehenswürdigkeiten entdecken

Eine detaillierte Beschreibung aller Anpassungen finden Sie unter 3D-Erdoberflächen-Explorer – Anpassungen.

Demo-App

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

Nachdem Sie das Erscheinungsbild mit der Admin-App angepasst haben, können Sie die Konfiguration herunterladen und Ihre benutzerdefinierte Anwendung über den 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 und diese entdecken (z.B. Museen, Parks, Restaurants).

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

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

5. Die automatische Drehung ist aktiviert, sodass sich die Kamera automatisch um den Mittelpunkt des ausgewählten Bereichs dreht.

Vorbereitung

1. Google Maps API-Schlüssel: Sie benötigen einen gültigen API-Schlüssel mit den folgenden aktivierten APIs:

   • Maps JavaScript API
   • Places API
   • Maps Tiles API

2. Webserver: Sie können die Anwendung über Folgendes bereitstellen:

   • Lokaler Webserver (z.B. mit Node.js, HTTP-Server)
   • Einen statischen Webhost-Dienst (die Anwendung wird mit einem Dockerfile geliefert)

Eine ausführliche Beschreibung der Bereitstellungsoptionen finden Sie im Abschnitt „Readme“ des GitHub-Projekts.

Bereitstellung

Sie können die Anwendung als Node-Anwendung oder Docker-Container in einer beliebigen Containerumgebung wie GKE oder GAE bereitstellen. Für die gehostete Demo wird die folgende Architektur verwendet:

• In dieser Architektur befindet sich der Code in einem GitHub-Projekt.
• Cloud Build ruft den Code bei jedem Push auf „main“ ab und löst einen Buildvorgang aus.
• Im Rahmen des Builds wird der API-Schlüssel eingefügt und ein Image erstellt, das dann in der Artifact Registry gespeichert wird.
• Schließlich wird das neueste stabile Image aus der Artifact Registry in Cloud Run bereitgestellt.
• Außerdem führen wir einige Systemdiagnosen und Überwachungen durch, um den Zustand der bereitgestellten Apps zu prüfen.

Zahlungsinformationen

Für die Lösung „3D Area Explorer“ werden Google Maps Platform-Dienste verwendet, um eine immersive, dynamische Umgebung zu schaffen. Für einige APIs können Gebühren anfallen. Hier finden Sie eine Übersicht über die APIs und Links zu den Preisen.

Google Maps Platform – 3D Tiles API:

Die Storytelling-Lösung nutzt die 3D Tiles API, um die visuelle Darstellung mit Geodaten zu verbessern. Preisdetails für die 3D Tiles API finden Sie unter Google Maps Platform – Preise für die 3D Tiles API.

Google Maps Platform – Places API:

Die Places API wird für standortbasierte Daten verwendet und bietet umfangreiche Informationen für die Story. Informationen zu den Kosten der Google Places API finden Sie unter Google Maps Platform – Preise für die Places API.

Google Maps Platform – Autocomplete API:

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

CesiumJS:

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

Es ist wichtig, die Preisdetails für die jeweilige API zu prüfen, da die Kosten individuell anhand der Nutzung ermittelt werden. Die Google Maps Platform bietet eine kostenlose Stufe mit einer bestimmten Nutzungsmenge. Die Preisdetails können je nach Faktoren wie der Anzahl der Anfragen und der Region der Nutzung variieren.

Auf den offiziellen Preisseiten finden Sie immer die genauesten und aktuellsten Informationen zu den Nutzungskosten der Google Maps Platform und von CesiumJS. Achten Sie darauf, dass Sie die Nutzungsbedingungen dieser Dienste einhalten, um die damit verbundenen Kosten effektiv zu verwalten und zu verstehen.

Fazit

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

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

Der 3D-Erkunden-Bereich bietet eine visuell ansprechende Plattform, um eine Region zu präsentieren, die Erkundung zu verbessern oder digitales Storytelling zu fördern.

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