3D Area Explorer – Erste Schritte

Image

Ü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 erfüllt 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 detaillierten 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:Es zeigt das Potenzial der 3D-Kartendaten von Google für die Erstellung immersiver, interaktiver Karten.

Erste Schritte:

Aktivieren

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 ermitteln und detaillierte Informationen dazu anzeigen. So wird die Nutzererfahrung durch lokales Wissen bereichert.
  • Mit der automatischen Vervollständigung können Nutzer nach bestimmten Orten oder Interessengebieten 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:

Image

Es wäre hilfreich, 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 Bewegungsgeschwindigkeit und Umlauftyp der Kamera an, um das gewünschte Videoerlebnis zu erzielen.

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

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

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 Design mit der Admin-App angepasst haben, können Sie die Konfiguration herunterladen und Ihre benutzerdefinierte Anwendung aus dem 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ä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:

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

    • Lokaler Webserver (z.B. mit Node.js, HTTP-Server)
    • Einen statischen Webhosting-Dienst (die Anwendung enthält ein Dockerfile)

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

Bereitstellung

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

Image

  • 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.
  • Als Teil des Builds wird der API-Schlüssel eingeschleust 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.
  • Es werden auch einige Systemdiagnosen und Monitoring ausgeführt, um den Status der bereitgestellten Anwendungen zu überprü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 eingesetzt, die das Storytelling um umfassende Informationen ergänzen. 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, aber für zusätzliche Funktionen oder Dienste können 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 Gebühren individuell anhand der Nutzung festgelegt 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 variieren.

Auf den offiziellen Preisseiten finden Sie immer die genauesten und aktuellen Informationen zu den Nutzungskosten für die Google Maps Platform und 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 Sie Stadtteile virtuell erkunden, POIs entdecken und mehr über die lokale Geschichte erfahren.

Egal, ob Sie ein Gebiet präsentieren, die Erkundung verbessern oder das digitale 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-Ansicht zu erstellen.