Erste Schritte mit dem 3D Area Explorer

Image

Übersicht

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

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

  • Gebiete besser erkunden:Nutzer können Stadtteile virtuell mit einem hohen Maß an visuellen Details erkunden und so mehr über lokale Besonderheiten und Sehenswürdigkeiten erfahren.

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

  • Entwicklung mit den 3D-Funktionen von Google Maps inspirieren:Die Lösung zeigt das Potenzial der 3D-Kartendaten von Google für die Erstellung immersiver, interaktiver Karten.

Erste Schritte:

Aktivieren Sie

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 Lösung 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 (Points of Interest) im erkundeten Gebiet ermitteln und anzeigen, wodurch die Nutzerfreundlichkeit durch lokales Wissen verbessert wird.
  • Die automatische Vervollständigung hilft Nutzern bei der Suche nach bestimmten Orten oder interessanten Gebieten.

CesiumJS

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

Kamerasteuerung:CesiumJS bietet die Tools zum Steuern der Kameraposition, -ausrichtung und -bewegung. Dazu zählen:

  • Festlegen des anfänglichen Blickwinkels, um beim Laden der App auf den angegebenen Stadtteil zu fokussieren
  • Implementieren dynamischer Kamerabewegungen, z. B. automatisierter Orbit-Animationen für die Erkundung
  • Verarbeiten von Nutzerinteraktionen mit dem Globus, wenn solche Funktionen enthalten sind (Schwenken, Zoomen, Drehen)

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

Hauptkomponenten

Die Anwendung ist in zwei verschiedene Apps unterteilt:

  • Admin-App
  • Demo-App

Dieses Diagramm gibt einen Überblick über die Unterschiede und die Beziehung zwischen den beiden Anwendungen:

Image

Es ist sinnvoll, sich die einzelnen Apps genauer anzusehen:

Admin-App

Diese Anwendung bietet eine nutzerfreundliche Oberfläche, mit der Sie die 3D-Darstellung anpassen können:

  • Standortsuche :Verwenden Sie die integrierte Suchleiste für die automatische Vervollständigung der Google Maps Platform, um das gewünschte Gebiet zu finden. Sobald Sie einen Standort ausgewählt haben, wird die Kamera nahtlos zu diesem Gebiet bewegt.

  • Kamera:Passen Sie die Geschwindigkeit der Kamerabewegung und den Orbit-Typ an, um die gewünschte Darstellung zu erstellen.

  • Orte (POIs) : Definieren Sie die Dichte, den Suchradius und die Arten von POIs (z.B. Restaurants, Cafés, Sehenswürdigkeiten), die Sie präsentieren möchten.

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

Eine detaillierte Beschreibung aller Anpassungen des 3D Area Explorer finden Sie hier.

Demo-App

Dies ist die endgültige, nutzerorientierte Anwendung, die die in der Admin-App erstellte Konfiguration lädt. In dieser immersiven 3D-Umgebung können Nutzer die ausgewählten Gebiete 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 über den Quellcode ausführen.

User Experience

Image

Einige der wichtigsten Funktionen der Anwendung sind:

  1. Nutzer können ein Gebiet interaktiv in 3D erkunden, einschließlich Gebäude, 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 Inhalte zu diesem Ort aufrufen.

  4. Entwickler können die Erkundung mithilfe von Einstellungen und Steuerelementen personalisieren (wenn sie die Admin-App verwenden).

  5. Die automatische Drehung ist aktiviert, sodass sich die Kamera automatisch um das Zentrum des ausgewählten Gebiets dreht.

Vorbereitung

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

  2. Webserver: Sie können die Anwendung über einen der folgenden Server bereitstellen:

    • Lokaler Webserver (z.B. mit Node.js, http-server)
    • Statischer Webhostingdienst (die Anwendung wird mit einem Dockerfile geliefert)

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

Bereitstellung

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

Image

  • In dieser Architektur befindet sich der Code in einem GitHub-Projekt.
  • Cloud Build ruft den Code bei jedem Push in „main“ ab 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 der Artifact Registry gespeichert wird.
  • Schließlich wird das neueste stabile Image aus der Artifact Registry in Cloud Run bereitgestellt.
  • Außerdem werden Systemdiagnosen und Monitoring ausgeführt, um den Status der bereitgestellten Apps zu prüfen.

Zahlungsinformationen

Die Lösung „3D Area Explorer“ verwendet Google Maps Platform-Dienste, um eine immersive, dynamische Darstellung 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:

Die Storytelling-Lösung 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 Pricing.

Google Maps Platform – Places API:

Die Places API wird für standortbezogene Daten verwendet und fügt der Storytelling-Darstellung umfassende Informationen hinzu. Informationen zu den Kosten für die Google Places API finden Sie unter Google Maps Platform – Places API Preise.

Google Maps Platform – Autocomplete API:

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

CesiumJS:

CesiumJS wird für die 3D-Globus visualisierung verwendet. CesiumJS ist zwar Open Source, für zusätzliche Funktionen oder Dienste fallen jedoch möglicherweise Kosten an. Informationen zu Premium-Angeboten finden Sie in der CesiumJS-Dokumentation.

Es ist wichtig, die Preisinformationen für die jeweilige API zu prüfen, da die Gebühren individuell auf Grundlage der Nutzung festgelegt werden. Die Google Maps Platform bietet ein kostenloses Kontingent mit einer bestimmten Nutzung kostenlos. Die Preise können je nach Faktoren wie der Anzahl der Anfragen und der Nutzungsregion variieren.

Die genauesten und aktuellsten Informationen zu den Nutzungskosten der Google Maps Platform und von CesiumJS finden Sie immer auf den offiziellen Preisseiten. Achten Sie darauf, die Nutzungsbedingungen dieser Dienste einzuhalten, um alle 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.

Mit den 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.

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