3D Area Explorer – Erste Schritte

Image

Übersicht

Die Lösung für den 3D Area Explorer bietet Ihnen eine völlig neue Möglichkeit, Erfahrungsstandorten. Diese Lösung nutzt die Funktionen von Google Maps Plattformfotorealistisches 3D Kacheln und die Orte API um fesselnde interaktive 3D-Umgebungen zu erschaffen.

Der 3D Area Explorer erfüllt mehrere Zwecke:

  • Erweiterte Erkundung der Umgebung: Nutzer können Stadtviertel mit ein hohes Maß an visuellen Details, gewinnt Einblicke in lokale Merkmale und Sehenswürdigkeiten.

  • Standortbezogene Inhalte bewerben: Die Möglichkeit, POIs einzubinden (POIs) mit ausführlichen Beschreibungen können Geschichten, die die Nutzenden über bestimmte Standorte.

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

Erste Schritte:

<ph type="x-smartling-placeholder">

Aktivieren

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 abzurufen um diese Websitevariante zu erstellen:

  • Fotorealistische 3D-Kacheln von Google Maps: Hochauflösende 3D-Modelle von Gebäuden und Gelände eine visuell ansprechende Darstellung städtischer Umgebungen.
  • Places API: Die App kann detaillierte Informationen zu Points of Sale identifizieren und anzeigen. Interesse (POIs) innerhalb des untersuchten Gebiets, wodurch die Nutzererfahrung bereichert wird durch Ortskenntnisse vor Ort.
  • Automatische Vervollständigung nach bestimmten Standorten oder Regionen von Interesse.

CesiumJS

CesiumJS ist für das Rendering und die Anzeige des hochauflösenden 3D- Globus. Sie übernimmt das Laden und Visualisieren von fotorealistischen 3D-Bildern von Google. Kacheln, die ein 3D-Mesh-Modell von Gebäuden und Gelände bilden

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

  • Festlegen, dass der anfängliche Blickwinkel auf den angegebenen Stadtteil fokussiert Laden der App.
  • Dynamische Kamerabewegungen, z. B. eine automatisierte Umlaufbahn, implementieren Animationen für die Erkundung.
  • Handhabung von Nutzerinteraktionen mit dem Globus, wenn solche Funktionen enthalten sind (Schwenken, Zoomen, Drehen)

Hier erfährst du, wie du mit fotorealistischen 3D-Kacheln Mit einem 3D-Kachel-Renderer arbeiten

Hauptkomponenten

Die Anwendung ist in zwei verschiedene Apps unterteilt:

  • Admin-App
  • Demo-App

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

Image

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

Admin-App

Diese Anwendung bietet eine benutzerfreundliche Oberfläche, mit der Sie das 3D-Erlebnis:

  • Standortsuche :Integrierte automatische Vervollständigung der Google Maps Platform verwenden Suchleiste, um den Bereich zu finden, den Sie präsentieren möchten. Sobald Sie eine Standort befindet, fliegt die Kamera nahtlos zu diesem Bereich.

  • Kamera:Passen Sie die Bewegungsgeschwindigkeit und Umlauftyp der Kamera an. ausgewähltes Videoformat.

  • Orte (POIs): Dichte, Suchradius und Punkttyp Interessen (z.B. Restaurants, Cafés, Sehenswürdigkeiten), die du hervorheben möchtest.

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

<ph type="x-smartling-placeholder">

Es gibt eine detaillierte Beschreibung aller Anpassungen. 3D Area Explorer-Anpassungen

Demo-App

Dies ist die endgültige, für den Nutzer sichtbare Anwendung, die die von Ihnen die in der Admin-App erstellt wurden. In dieser immersiven 3D-Umgebung können Nutzer um die ausgewählten Gebiete und die von Ihnen markierten Orte zu erkunden.

Nachdem Sie das Design mit der Admin App angepasst haben, können Sie Laden Sie die Konfiguration herunter und führen Sie Ihre benutzerdefinierte Anwendung aus dem Quellcode aus.

Nutzererfahrung

Image

Einige der wichtigsten Funktionen der Anwendung sind:

  1. Nutzer können einen Bereich interaktiv in 3D erkunden, darunter Gebäude, Sehenswürdigkeiten und Gelände.
  2. Nutzer können Orte in der Nähe suchen und entdecken (z.B. Museen, Parks, Restaurants).

  3. Nach der Auswahl eines Ortes sehen die Nutzer detaillierte Informationen oder Beschreibungen. die mit diesem Standort in Zusammenhang stehen.

  4. Entwickler können ihre explorative Datenanalyse über Einstellungen und (in der Admin App).

  5. Die automatische Drehung ist aktiviert, sodass sich die Kamera automatisch um in der Mitte des ausgewählten Bereichs.

Vorbereitung

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

  2. Webserver: Die Anwendung kann auf zwei Arten bereitgestellt werden:

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

Eine ausführliche Beschreibung der Bereitstellungsoptionen finden Sie in der Readme-Datei. des GitHub-Projekts.

Bereitstellung

Sie können die Anwendung als Knotenanwendung oder Docker-Container in einem beliebigen Containerumgebung wie GKE oder GAE. In der gehosteten Demo wird Folgendes verwendet: Architektur:

Image

  • In dieser Architektur befindet sich der Code in einem GitHub-Projekt.
  • Cloud Build ruft den Code bei jeder Übertragung an die Hauptversion ab und löst einen Build aus .
  • Als Teil des Builds wird der API-Schlüssel eingeschleust und ein Image erstellt, das dann in der Artifact Registry gespeichert werden.
  • Schließlich wird das neueste stabile Image aus Artifact Registry in Cloud bereitgestellt. run.
  • Es werden auch einige Systemdiagnosen und Monitoring ausgeführt, um den Zustand der bereitgestellten Anwendungen.

Zahlungsinformationen

Die 3D Area Explorer-Lösung bietet mithilfe der Google Maps Platform-Dienste eine immersive, dynamische Erfahrung. Für einige APIs können Gebühren anfallen. Hier ein Überblick der APIs und Links zu den Preisen.

Google Maps Platform – 3D Tiles API:

Die Storytelling-Lösung nutzt die 3D Tiles API, um das visuelle mit Geodaten. Preisinformationen zu 3D-Kacheln API – siehe Google Maps Platform – 3D Tiles API Preise.

Google Maps Platform – Places API:

Die Places API wird für standortbasierte Daten eingesetzt, durch die wertvolle Informationen zu Storytelling-Erfahrung. Um die Kosten nachzuvollziehen, die mit dem Google Places API,Google Maps Platform besuchen – Places API Preise.

Google Maps Platform – Autocomplete API:

Die automatische Vervollständigung verbessert die Nutzerinteraktion. Preisinformationen Informationen zur Google Maps Autocomplete API erhalten Sie auf der Google Maps Platform. Place Autocomplete Preise.

CésiumJS:

Für den 3D-Globus wird CesiumJS verwendet. Visualisierung. CesiumJS selbst ist zwar Open Source, zusätzliche Funktionen oder Dienste können eigene Kosten mit sich bringen. Siehe CésiumJS Dokumentation für alle Premium-Angebote.

Es ist wichtig, die Preisangaben für die einzelnen APIs zu prüfen, da Gebühren werden individuell auf Basis der Nutzung bestimmt. Die Google Maps Platform bietet eine kostenlose Stufe mit einem bestimmten Nutzungsumfang, zu der auch Preise Die Details können aufgrund von Faktoren wie der Anzahl der Anfragen und der Nutzung variieren. Region

Die genauesten und aktuellsten Preisinformationen Informationen zu den Nutzungskosten für die Google Maps Platform und CesiumJS. Compliance sicherstellen den Nutzungsbedingungen dieser Dienste zur Verwaltung und Nutzung damit verbundene Ausgaben effektiv zu verstehen.

Fazit

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

Mit den fotorealistischen 3D-Kacheln von Google und der Places API virtuelle Erkundung von Vierteln, POIs und um etwas über Lokalgeschichte zu erfahren.

Darstellung einer Region, Förderung der Erkundung oder Werbung für digitale Medien bietet der 3D Area Explorer eine visuell beeindruckende Plattform.

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