3D Area Explorer: Anleitung zur Anpassung

3D Area Explorer ist eine Lösung, mit der Sie Gemeinden in faszinierender 3D-Ansicht erkunden können. Die Lösung nutzt: fotorealistische 3D-Kacheln von Google, Places Search, Place Details und Autocomplete APIs.

Erste Schritte:

Aktivieren

Personalisierung

Der 3D Area Explorer lässt sich individuell anpassen, sodass er an die Customer Journey angepasst werden kann. Sie können Anpassungen entweder über das Steuerfeld auf der Benutzeroberfläche oder mithilfe der Datei config.json vornehmen.

Bereit zum Anpassen? Das geht so:

Standort

Legen Sie den Startpunkt Ihrer Websitevariante fest, indem Sie den Breiten- und Längengrad in der Datei config.json anpassen.

Kamerasteuerung

Wählen Sie den Orbittyp der Kamera aus: ein klassischer Rundweg oder eine faszinierende Sinuswelle.

  • Fester Orbit:

    Dies ist eine kreisförmige Umlaufbahn mit fester Höhe und um einen bestimmten POI.

    Sehen Sie sich eine feste Umlaufbahn in Aktion an, indem Sie die Google-Niederlassung in Sydney erkunden.

  • Dynamic Orbit:

    Die Kamera bewegt sich gleichmäßig in einer Sinuswellenkurve um einen festgelegten POI. Durch diese einzigartige Bewegung können Betrachter den POI aus verschiedenen Höhen und Blickwinkeln betrachten, was ein dynamisches und immersives visuelles Erlebnis ermöglicht.

    Sehen Sie sich eine dynamische Umlaufbahn in Aktion an, indem Sie den Eiffelturm erkunden.

POIs:

  • Passen Sie Ihre explorative Datenanalyse an und legen Sie fest, welche Arten von Orten Sie entdecken möchten. Mit dem Array types in config.json können Sie aus Museen, Parks, Schulen und mehr auswählen.
  • Mit dem Parameter density können Sie die maximale Anzahl von POIs festlegen, die angezeigt werden sollen.
  • Passen Sie searchRadius (in meters) so an, dass versteckte Schätze in der Nähe eingeschlossen werden, oder konzentrieren Sie sich auf bestimmte Bereiche.
  • Mit dem Parameter speed (in revolutions per minute) kannst du die gewünschte Bewegungsgeschwindigkeit der Kamera festlegen.

Explorative Datenanalyse vorab laden: URL-Anpassung für genauere Daten

Im 3D Area Explorer können Sie Ihr Projekt durch URL-Anpassung vordefinieren. Dadurch ist keine manuelle Konfiguration erforderlich und die User Experience wird optimiert.

Die perfekte URL erstellen:

Fügen Sie einfach bestimmte Parameter an die Area Explorer-URL an, um den Standort und andere Einstellungen vorzugeben. Beispiel:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

Diese URL legt den Startpunkt auf den angegebenen Breiten- und Längengrad fest, sodass Sie sofort zum ausgewählten Ort gelangen. Verfügbare Parameter:

  • location.coordinates.lat: Breitengrad Ihres ausgewählten Standorts.
  • location.coordinates.lng: Längengrad des ausgewählten Ortes.
  • poi.types: Eine durch Kommas getrennte Liste der anzuzeigenden POI-Typen.
  • poi.density: Die ausgewählte maximale Anzahl von POIs.
  • poi.searchRadius: Der Umkreis für die Suche nach POIs in der Nähe.
  • camera.speed: Orbitgeschwindigkeit der Kamera.
  • camera.orbitType: Orbittyp der Kamera („fester Orbit“ oder „dynamischer Orbit“).

Vorteile der URL-Anpassung:

  • Optimieren Sie die Nutzererfahrung, indem Sie vorab ausgewählte Einstellungen festlegen.
  • Teile Routen mit bestimmten vorinstallierten Orten und POIs.
  • Vorkonfigurierte Area Explorer-Oberflächen lassen sich nahtlos in Websites einbetten.

Mithilfe der URL-Anpassung können Sie maßgeschneiderte Erlebnisse schaffen und andere zu ausgewählten Abenteuern einladen.

Weitere Anpassungen

Im vorherigen Abschnitt wurden Anpassungen behandelt, die über die UI oder die Konfigurationsdatei zugänglich sind. Es gibt jedoch auch einige andere integrierte Parameter, die Sie ändern können, um die Anwendung weiter anzupassen.

Für diese erweiterten Anpassungen müssen Sie sich den Code in der Datei src/utils/cesium.js im „src“-Verzeichnis ansehen. Die folgenden Variablen können geändert werden, um das Erscheinungsbild der App zu ändern.

Kamerahöhe

Über den Wert CAMERA_HEIGHT können Sie steuern, wie hoch die Kamera sich positioniert, wenn sie zu einem Punkt fliegt. Höhere Werte ermöglichen eine verkleinerte Panoramaansicht, während Sie mit niedrigeren Werten den Details des Bereichs näher kommen.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • Einstellung: CAMERA_HEIGHT
  • Standardwert: 100
  • Beschreibung: Definiert die Höhe der Kamera über der Zielregion, wenn sie zu einem Punkt fliegt.
  • Beispielwerte:
    • 50: Nahaufnahme: Details hervorheben.
    • 200: Mehr Panoramaperspektive

Kameraneigung

Die anfängliche Neigung der Kamera wird durch BASE_PITCH definiert. negative Werte für eine Neigung nach unten und positive Werte für eine nach oben. Ändern Sie AUTO_ORBIT_PITCH_AMPLITUDE, um der Erkundung eine subtile dynamische Bewegung hinzuzufügen.

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
  • Einstellung: BASE_PITCH und AUTO_ORBIT_PITCH_AMPLITUDE
  • Standardwerte:
    • BASE_PITCH: -30 (Neigung um 30 Grad nach unten)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (Neigung um 10 Grad mit der Zeit)

Beschreibung:Der Kameraneigung ist die visuelle Neigung einer Karte, die in Grad gemessen wird. Es wird auch als Neigung bezeichnet. Diese Einstellungen definieren die anfängliche Neigung und die dynamische Neigungsanpassung der Kamera bei automatischen Rotationen.

Beispielwerte:

  • BASE_PITCH: 0 (Stufenkamera)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (keine Stimmlage)

Kamerabereich und Zoom

Mit diesen Parametern wird der Zoomfaktor festgelegt, der beim Fokussieren bestimmter Punkte angewendet wird. Kleinere Werte bedeuten ein näheres Zoomen.

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

Einstellung: RANGE_AMPLITUDE_RELATIVE und ZOOM_FACTOR

Standardwerte:

  • RANGE_AMPLITUDE_RELATIVE: 0,55 (relative Entfernungsabweichung)
  • ZOOM_FACTOR: 20 (Kamera-Zoomfaktor)

Beschreibung:Mit diesen Einstellungen werden die Bereichsvariationen während der Kamerabewegung und die Zoomstufe für eine genauere Betrachtung festgelegt.

Beispielwerte:

  • RANGE_AMPLITUDE_RELATIVE: 1 (Vollbildvariation)
  • ZOOM_FACTOR: 10 (weniger Zoom)
// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

Kamera zurücksetzen

Wenn ein Nutzer die Kamera auf die ursprüngliche Position zurücksetzen möchte, werden die Werte CAMERA_OFFSET verwendet. Diese Einstellung umfasst die Richtung (Drehung), die Neigung (Neigung) und die Entfernung (wie weit die Kamera vom Mittelpunkt entfernt ist).

  • Einstellung: CAMERA_OFFSET
  • Standardwerte:
    • heading: 0 (kein Rotationsversatz)
    • pitch: Cesium.Math.toRadians(-30) (Tonhöhen um 30 Grad nach unten)
    • range: 800 (800 Meter von der Mitte)
  • Beschreibung: Definiert die Kamerarichtung, den Neigungswinkel und den Bereich zum Zurücksetzen der Ansicht.
  • Beispielwerte:
    • heading: 45 (Grad, Nordwesten)
    • range: 1.500 Meter (weiter von der Mitte)

Startkoordinaten:

START_COORDINATES definieren den anfänglichen Längengrad, Breitengrad und die Höhe für die Kamera. Hier beginnt die explorative Datenanalyse. Legen Sie dazu den Bereich fest, den Nutzer zuerst sehen sollen.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • Einstellung: START_COORDINATES

  • Standardwerte:

    • longitude: 0
    • latitude: 60
    • height: 15.000.000 (15.000 km über der Oberfläche)

  • Beispielwerte:

    • longitude: -122.4934, latitude: 37.7951 (Golden Gate Bridge)
    • height: 2.000 (nähere Startposition)

Vordefinierten Speicherort laden

Mit dem location-Objekt in config.json wird die Mitte des Bereichs festgelegt. Das ist die ursprüngliche Perspektive der Kamera im Cesium-Viewer.coordinates: Definiert den Breiten- (lat) und Längengrad (lng) des Ortes, an den die Kamera zuerst schwenken soll. Passen Sie diese Werte an, um die Kamera auf einen bestimmten Standort auf dem Globus einzustellen.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

Mit dieser Konfiguration können Sie den 3D-Ortsnavigator starten, indem Sie an einen bestimmten Ort Ihrer Wahl heranzoomen. Mit dem Geocoding-Tool von Google können Sie die Breiten- und Längengrade einer Adresse oder eines Ortsnamens abrufen, indem Sie ihn im Standortobjekt angeben:

  1. Rufen Sie das Geocoding-Tool auf.
  2. Geocoding-Anfrage erstellen: Klicken Sie auf den Abschnitt „Jetzt ausprobieren“ und geben Sie den ausgewählten Standort in das Feld „Adresse“ ein. Sie können eine Adresse, einen Ortsnamen oder auch Orientierungspunkte angeben.
  3. Koordinaten generieren: Klicken Sie auf die Schaltfläche „Ausführen“, um Ihre Anfrage zu senden. Das Tool gibt eine Antwort mit verschiedenen Informationen zum Standort zurück, einschließlich der im Abschnitt geometry.location angezeigten Breiten- und Längengrade.
  4. Geocodes verwenden: Kopieren Sie die abgerufenen Breiten- und Längengradwerte aus der Antwort und fügen Sie sie in das coordinates-Objekt Ihrer Konfiguration ein.

Hinweis: Geocodes, die auf diese Weise verwendet werden, müssen den in Abschnitt 3.4 der Nutzungsbedingungen der Google Maps Platform beschriebenen Nutzungsbedingungen entsprechen. Das bedeutet, dass sie nicht länger als 30 Tage im Cache gespeichert werden dürfen und danach aktualisiert werden müssen.

Image

Bei dieser Konfiguration werden mit dem Geocoding-Tool automatisch die Koordinaten der Google-Zentrale im kalifornischen Mountain View ermittelt und die 3D Place Navigator-Anwendung gestartet, bei der die Kamera auf den entsprechenden Standort zentriert ist.

Erweiterte Anpassungen

Sie können weitere Anpassungen vornehmen, indem Sie sich den Code genauer ansehen. Im folgenden Abschnitt werden einige Optionen erläutert.

Neuen Kamerapfad hinzufügen

Standardmäßig implementiert die Lösung zwei verschiedene Kamerapfade:

fixed-orbit" | "dynamic-orbit"

Wenn Sie möchten, können Sie jedoch einen neuen Kamerapfad erstellen, indem Sie die Methode

/src/utils/cesium.js in der Funktion calculateAutoOrbitFrame.

Informationen zur Verwendung dieser neuen Pfadberechnung im Konfigurationsbereich finden Sie in der Implementierung in demo/src/camera-settings.js..

Weitere Ortstypen hinzufügen

Die Liste der Ortstypen für die Konfiguration kann in der Datei demo/src/place-settings.js angepasst werden. Beginnend mit Zeile 4 sind die Ortstypen, die in der Demo verfügbar sind.

Wenn Sie bestimmte Ortstypen verwenden möchten, ohne die Demoquelle zu ändern, können Sie sie einfach der Datei config.json unter poi.types hinzufügen.

Stil anpassen (CSS)

Für die Stile, die wir mit CSS-Variablen gearbeitet haben. Sie werden von allen gängigen Browsern unterstützt und ermöglichen es, eine Zeile an einem zentralen Ort zu ändern und bestimmte CSS-Eigenschaften zu aktualisieren. Unsere CSS-Variablen werden in src/main.css. definiert. Dort können Sie Farben, Schrifteinstellungen und Abstände oder Ränder für die gesamte Anwendung anpassen.

Zusätzliche Daten einblenden

Wenn Sie zusätzliche Daten einblenden möchten, müssen Sie die Datei „src/utils/cesium.js“ aktualisieren und in der CEsium-Dokumentation nachlesen, wie Sie dem Globus GeoJSON-Daten oder andere geografisch referenzierte Daten hinzufügen.

Konfigurationsabschnitte entfernen

Unsere JavaScript-Anwendung besteht in der Konfigurationsdatei aus drei Hauptabschnitten: demo/src/[config-panel.js](config-panel.js): location, poi und camera. Jeder dieser Abschnitte enthält Konfigurationsoptionen für verschiedene Aspekte der Anwendung. Entwickler können diese Bereiche an ihre spezifischen Anforderungen anpassen.

1.Einen bestimmten Abschnitt aus der Konfiguration entfernen

  • Bereich „Standort“

Wenn Sie den Abschnitt location entfernen möchten, suchen Sie die folgende Zeile im Code und kommentieren oder löschen Sie sie:

const locationConfig = { ...config.location, ...customConfig.location };
  • POI-Bereich

Wenn Sie den Abschnitt poi entfernen möchten, suchen Sie die folgende Zeile in Ihrem Code und kommentieren oder löschen Sie sie:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Kamerabereich

Wenn Sie den Abschnitt camera entfernen möchten, suchen Sie die folgende Zeile in Ihrem Code und kommentieren oder löschen Sie sie:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. Kombinierte Konfigurationen aktualisieren

Nachdem Sie einen Abschnitt entfernt haben, müssen Sie das kombinierte Konfigurationsobjekt aktualisieren. Dieses Objekt führt die Standardkonfiguration mit allen Anpassungen zusammen. Entfernen Sie das entsprechende Attribut aus dem combinedConfig-Objekt:

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. UI-Elemente anpassen

Wenn beim Entfernen eines Abschnitts auch zugehörige UI-Elemente entfernt werden müssen, aktualisieren Sie den Code entsprechend im HTML-Code. Wenn Sie beispielsweise einen bestimmten Bereich wie die Kamerageschwindigkeit aus dem Admin-Bereich entfernen möchten, müssen Sie sowohl den JS- als auch den HTML-Code für diesen Bereich aktualisieren.

4. Bereich mit Kameraeinstellungen entfernen

Wenn Sie den Abschnitt mit den Kameraeinstellungen aus der UI entfernen möchten, suchen Sie die folgende Zeile und kommentieren oder löschen Sie sie:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Abschnittszusammenfassung für Standort wird entfernt

const locationSection = await getLocationSettingsSection(locationConfig);

Fazit

In diesem Dokument wurden die verschiedenen Anpassungsoptionen im Area Explorer vorgestellt, mit denen Sie 3D-Erkundungen an Ihre Bedürfnisse anpassen können. Sie können das Kameraverhalten, die visuelle Neigung und die Zoomstufen anpassen und so Ihre Einstellungen und POIs ansprechend präsentieren.

Experimentieren Sie mit verschiedenen Konfigurationen und stimmen Sie die Parameter auf Ihre spezifischen Anforderungen ab. Mithilfe von Anpassungsmöglichkeiten kannst du immersive und personalisierte Kaufprozesse erstellen, die deine Zielgruppe fesseln und deine Vision zum Leben erwecken.