3D Area Explorer anpassen

Mit dem 3D Area Explorer können Sie Orte in beeindruckendem 3D erkunden. Die Lösung nutzt die fotorealistischen 3D-Kacheln von Google, die Place Search API, die Place Details API und die Autocomplete API.

Erste Schritte:

Aktivieren

Nutzung anpassen

Die 3D Area Explorer-Lösung ist hochgradig anpassbar, sodass Sie die Darstellung auf die Customer Journey Ihrer Kunden zuschneiden können. Sie können die Anpassung entweder über das Steuerfeld auf der Benutzeroberfläche oder über die Datei config.json vornehmen.

Bereit zum Anpassen? So gehts:

Standort

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

Kamerasteuerung

Wählen Sie den Kameratyp aus, um die Kamerafahrt zu steuern: einen klassischen kreisförmigen Pfad oder eine interessante Sinuswelle.

Interessante Orte (POIs):

  • Sie können die Erkundung anpassen, indem Sie die Arten von Orten festlegen, die Sie entdecken möchten. Mit dem Array types in config.json können Sie Museen, Parks, Schulen und mehr auswählen.
  • Legen Sie die maximale Anzahl der angezeigten POIs fest, indem Sie den Parameter density anpassen.
  • Ändern Sie die searchRadius (in meters), um versteckte Schätze in der Nähe einzubeziehen oder sich auf bestimmte Bereiche zu konzentrieren.
  • Lege die gewünschte Geschwindigkeit für die Bewegung deiner Kamera mit dem Parameter speed (in revolutions per minute) fest.

Vorab laden: Dive Deeper with URL Customization

Mit dem 3D Area Explorer können Sie Ihre Erkundungstour vorab per URL-Anpassung definieren. Eine manuelle Konfiguration ist nicht mehr erforderlich, was die Nutzerfreundlichkeit verbessert.

Die perfekte URL erstellen:

Hängen Sie einfach bestimmte Parameter an die Area Explorer-URL an, um den Standort und andere Einstellungen voreinzustellen. 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 und führt Sie sofort zum ausgewählten Ort. Verfügbare Parameter:

  • location.coordinates.lat: Breitengrad des ausgewählten Standorts.
  • location.coordinates.lng: Längengrad des ausgewählten Standorts.
  • poi.types: Eine durch Kommas getrennte Liste der anzuzeigenden POI-Typen.
  • poi.density: Die ausgewählte maximale Anzahl von POIs.
  • poi.searchRadius: Der Radius für die Suche nach POIs in der Nähe.
  • camera.speed: Geschwindigkeit, mit der die Kamera um das Objekt kreist.
  • camera.orbitType: Kameratyp („fixed-orbit“ oder „dynamic-orbit“).

Vorteile der URL-Anpassung:

  • Sie können die Nutzerfreundlichkeit verbessern, indem Sie die gewünschten Einstellungen vordefinieren.
  • Teilen Sie zielgerichtete Routen mit bestimmten vorab geladenen Orten und POIs.
  • Vorkonfigurierte Area Explorer-Inhalte nahtlos in Websites einbetten.

Durch die Anpassung von URLs können Sie maßgeschneiderte Erlebnisse schaffen und andere zu ausgewählten Abenteuern einladen.

Weitere Anpassungen

Im vorherigen Abschnitt wurden Anpassungen beschrieben, die über die Benutzeroberfläche oder die Konfigurationsdatei vorgenommen werden können. Es gibt jedoch auch mehrere 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 Verzeichnis „src“ ansehen. Die folgenden Variablen können geändert werden, um das Erscheinungsbild der Anwendung anzupassen:

Höhe der Kamera

Mit dem Wert CAMERA_HEIGHT können Sie festlegen, wie hoch die Kamera beim Flug zu einem Punkt positioniert wird. Höhere Werte bieten eine weiter herausgezoomte Panoramaansicht, während niedrigere Werte die Details des Bereichs näher heranholen.

// 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 dem Zielort, wenn ein Punkt angeflogen wird.
  • Beispielwerte:
    • 50: Nahaufnahme, bei der Details hervorgehoben werden.
    • 200: Eine Panorama-Perspektive.

Kameraneigung

Die anfängliche Neigung der Kamera wird durch BASE_PITCH definiert. Verwenden Sie negative Werte für eine Neigung nach unten und positive Werte für eine Neigung nach oben. Wenn Sie Ihrer explorativen Datenanalyse eine subtile dynamische Bewegung hinzufügen möchten, ändern Sie AUTO_ORBIT_PITCH_AMPLITUDE.

// 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 (30 Grad nach unten geneigt)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (Änderung der Neigung um 10 Grad im Laufe der Zeit)

Beschreibung: Die Kameraneigung ist die visuelle Neigung einer Karte, die in Grad gemessen wird. Sie wird auch als Neigung bezeichnet. Mit diesen Einstellungen werden die anfängliche Neigung der Kamera und die dynamische Neigungsanpassung bei automatischen Drehungen definiert.

Beispielwerte:

  • BASE_PITCH: 0 (Kamera ausrichten)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (keine Tonhöhenvariation)

Kamerabereich und Zoom

Mit diesen Parametern wird die Zoomstufe festgelegt, die beim Fokussieren auf bestimmte Punkte angewendet wird. Kleinere Werte bedeuten einen stärkeren Zoom.

// 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 Entfernungsvariation)
  • ZOOM_FACTOR: 20 (Kamerazoomfaktor)

Beschreibung: Mit diesen Einstellungen werden die Bereichsvariation während der Kamerabewegung und die Zoomstufe für eine genauere Ansicht definiert.

Beispielwerte:

  • RANGE_AMPLITUDE_RELATIVE: 1 (full range variation)
  • 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 CAMERA_OFFSET-Werte verwendet. Diese Einstellung umfasst die Richtung (Drehung), die Neigung und die Entfernung (wie weit die Kamera von der Mitte entfernt ist).

  • Einstellung: CAMERA_OFFSET
  • Standardwerte:
    • heading: 0 (kein Rotationsversatz)
    • pitch: Cesium.Math.toRadians(-30) (30 Grad nach unten neigen)
    • range: 800 (800 Meter vom Zentrum entfernt)
  • Beschreibung: Definiert die Richtung, Neigung und Entfernung der Kamera zum Zurücksetzen der Ansicht.
  • Beispielwerte:
    • heading: 45 (Grad, Blickrichtung Nordwesten)
    • range: 1.500 Meter (weiter vom Zentrum entfernt)

Startkoordinaten:

Die START_COORDINATES definieren den anfänglichen Längengrad, Breitengrad und die Höhe der Kamera. Hier beginnt die Erkundung. Legen Sie also 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: 15000000 (15.000 km über der Oberfläche)

  • Beispielwerte:

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

Vordefinierten Ort laden

Das location-Objekt in config.json legt den Mittelpunkt des Bereichs fest. Dies ist der ursprüngliche Blickwinkel der Kamera im Cesium-Viewer.coordinates: Definiert den Breiten- (lat) und Längengrad (lng) für den Ort, zu dem die Kamera zuerst schwenken soll. Passen Sie diese Werte an, um die Kamera auf einen bestimmten Ort auf der Erde auszurichten.

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

Mit dieser Konfiguration können Sie die 3D Place Navigator-Anwendung so starten, dass sie auf einen bestimmten Ort Ihrer Wahl herangezoomt ist. Mit dem Geocoding-Tool von Google können Sie die Breiten- und Längengradkoordinaten einer Adresse oder eines Ortsnamens abrufen, indem Sie sie im Standortobjekt angeben:

  1. Rufen Sie das Geocoding-Tool auf.
  2. Geocoding-Anfrage erstellen: Klicken Sie auf den Bereich „Selbst ausprobieren“ und geben Sie den gewünschten Ort in das Feld „Adresse“ ein. Sie können eine Adresse, einen Ortsnamen oder sogar Sehenswürdigkeiten angeben.
  3. Koordinaten generieren: Klicken Sie auf den Button „Ausführen“, um Ihre Anfrage zu senden. Das Tool gibt eine Antwort mit verschiedenen Informationen zum Ort zurück, einschließlich der Breiten- und Längengradkoordinaten, die im Abschnitt geometry.location angezeigt werden.
  4. Geocodes verwenden: Kopieren Sie die abgerufenen Werte für Breiten- und Längengrad aus der Antwort und fügen Sie sie in das coordinates-Objekt in Ihrer Konfiguration ein.

Hinweis: Geocodes, die auf diese Weise verwendet werden, müssen den Bedingungen in Abschnitt 3.4 der Nutzungsbedingungen für die Google Maps Platform 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 wird das Geocoding-Tool verwendet, um automatisch die Koordinaten des Google-Hauptsitzes in Mountain View, Kalifornien, zu ermitteln und die 3D Place Navigator-Anwendung mit der Kamera auf diesen Standort zu starten.

Erweiterte Anpassungen

Sie können weitere Anpassungen vornehmen, indem Sie sich eingehender mit dem Code befassen. Im folgenden Abschnitt werden einige Optionen beschrieben.

Neuen Kamerapfad hinzufügen

Die Lösung implementiert standardmäßig zwei verschiedene Kamerapfade:

fixed-orbit" | "dynamic-orbit"

Wenn Sie jedoch einen neuen Kamerapfad erstellen möchten, können Sie ihn mit der

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

Wenn Sie diese neue Pfadberechnung im Konfigurationsbereich verwenden möchten,finden Sie Informationen dazu 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. Ab Zeile 4 werden die in der Demo verfügbaren Ortstypen aufgeführt.

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

Stil anpassen (CSS)

Für die Stile haben wir mit CSS-Variablen gearbeitet. Sie werden von allen gängigen Browsern unterstützt und ermöglichen es, eine Zeile an einer zentralen Stelle zu ändern und bestimmte CSS-Eigenschaften zu aktualisieren. Unsere CSS-Variablen sind in src/main.css. definiert. Dort können Sie Farben, Schriftarteinstellungen 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. In der Cesium-Dokumentation finden Sie Informationen dazu, wie Sie GeoJSON- oder andere georeferenzierte Daten auf dem Globus hinzufügen.

Konfigurationsabschnitte entfernen

Unsere JavaScript-Anwendung hat drei Hauptabschnitte in der Konfigurationsdatei: 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 Abschnitte an ihre spezifischen Anforderungen anpassen.

1.Bestimmten Abschnitt aus der Konfiguration entfernen

  • Abschnitt „Standort“

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

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

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

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

Wenn Sie den Abschnitt camera entfernen möchten, suchen Sie die folgende Zeile in Ihrem Code und kommentieren Sie sie aus 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 durch das Entfernen eines Abschnitts auch zugehörige UI-Elemente entfernt werden, aktualisieren Sie den Code im HTML-Code entsprechend. 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 dafür aktualisieren.

4. Abschnitt „Kameraeinstellungen“ entfernen

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Zusammenfassung zum Entfernen des Abschnitts „Standort“

const locationSection = await getLocationSettingsSection(locationConfig);

Fazit

In diesem Dokument haben wir die verschiedenen Anpassungsoptionen im Area Explorer beschrieben, mit denen Sie die 3D-Erkundung anpassen können. Durch Ändern des Kameraverhaltens, Anpassen der visuellen Neigung und Ändern der Zoomstufen können Sie einzigartige und ansprechende Erlebnisse schaffen, die Ihre ausgewählten Einstellungen und POIs präsentieren.

Experimentieren Sie mit verschiedenen Konfigurationen und passen Sie die Parameter an Ihre spezifischen Anforderungen an. Durch die Nutzung der Anpassungsmöglichkeiten können Sie immersive und personalisierte Erlebnisse schaffen, die Ihr Publikum fesseln und Ihre Vision zum Leben erwecken.