3D Area Explorer: Anleitung zur Anpassung

Mit dem 3D Area Explorer können Sie Stadtteile und Gebiete in beeindruckenden 3D-Ansichten erkunden. Dabei kommen Fotorealistische 3D-Kacheln von Google, Places Search, Place Details und Autocomplete APIs zum Einsatz.

Erste Schritte:

Aktivieren

Individuelle Nutzung

Die Lösung „3D Area Explorer“ ist hochgradig anpassbar und lässt sich an Ihre Kaufprozesse anpassen. Sie können die Einstellungen entweder über das Steuerfeld in der Benutzeroberfläche oder über die config.json-Datei anpassen.

Bereit zur Anpassung? So gehts:

Standort

Definieren Sie den Startpunkt der Route, indem Sie den Breiten- und Längengrad in der Datei config.json anpassen.

Kamerasteuerung

Du kannst die Flugbahn der Kamera auswählen: einen klassischen kreisförmigen Pfad oder eine faszinierende Sinuskurve.

  • Fixer Orbit:

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

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

  • Dynamischer Umlauf:

    Die Kamera bewegt sich gleichmäßig auf einer Sinuswellenbahn um einen bestimmten POI herum. Diese einzigartige Bewegung ermöglicht es den Zuschauern, den interessanten Punkt aus verschiedenen Höhen und Blickwinkeln zu betrachten und so ein dynamisches und immersives visuelles Erlebnis zu schaffen.

    Sehen Sie sich einen dynamischen Orbit in Aktion an, indem Sie den Eiffelturm erkunden.

POIs (Points of Interest):

  • Sie können die explorative Datenanalyse anpassen, indem Sie die Arten von Orten festlegen, die Sie entdecken möchten. Mit dem types-Array in config.json können Sie unter anderem Museen, Parks und Schulen auswählen.
  • Legen Sie mithilfe des Parameters density fest, wie viele POIs maximal angezeigt werden dürfen.
  • Ändern Sie searchRadius (in meters) so, dass versteckte Schätze in der Nähe enthalten sind, oder konzentrieren Sie sich auf bestimmte Bereiche.
  • Legen Sie mit dem Parameter speed (in revolutions per minute) die Geschwindigkeit für die Kamerabewegung fest.

explorative Datenanalyse vorab laden: Mit URL-Anpassung noch mehr herausfinden

Mit dem 3D-Erkunden von Gebieten können Sie Ihre explorative Datenanalyse mithilfe einer benutzerdefinierten URL vorab definieren. Dadurch ist keine manuelle Konfiguration erforderlich, was die Nutzerfreundlichkeit erhöht.

Die perfekte URL erstellen:

Hänge einfach bestimmte Parameter an die Area Explorer-URL an, um den Standort und andere Einstellungen vorab festzulegen. Beispiel:

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

In dieser URL wird der Startpunkt auf den angegebenen Breiten- und Längengrad festgelegt, sodass Sie sofort zum ausgewählten Ort weitergeleitet werden. Verfügbare Parameter:

  • location.coordinates.lat: Breitengrad des von Ihnen ausgewählten Standorts.
  • location.coordinates.lng: Längengrad des ausgewählten Standorts.
  • poi.types: Eine durch Kommas getrennte Liste der POI-Typen, die angezeigt werden sollen.
  • 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 der Kameradrehung.
  • camera.orbitType: Kamera-Orbittyp („fixed-orbit“ oder „dynamic-orbit“).

Vorteile der URL-Anpassung:

  • Optimieren Sie die Nutzererfahrung, indem Sie vorab ausgewählte Einstellungen festlegen.
  • Gezielte Reisen mit bestimmten vorab geladenen Orten und POIs teilen.
  • Vorkonfigurierte Area Explorer-Funktionen nahtlos in Websites einbetten

Mithilfe der URL-Anpassung kannst du maßgeschneiderte Inhalte erstellen und andere zu ausgewählten Abenteuern einladen.

Weitere Anpassungen

Im vorherigen Abschnitt wurden Anpassungen beschrieben, auf die über die Benutzeroberfläche oder die Konfigurationsdatei zugegriffen werden kann. Es gibt jedoch auch mehrere andere integrierte Parameter, die Sie ändern können, um die Anwendung weiter anzupassen.

Wenn Sie diese erweiterten Anpassungen vornehmen möchten, müssen Sie sich den Code in der Datei src/utils/cesium.js im Verzeichnis „src“ ansehen. Mit den folgenden Variablen können Sie das Erscheinungsbild der Anwendung ändern.

Kamerahöhe

Mit dem Wert CAMERA_HEIGHT können Sie festlegen, wie hoch die Kamera positioniert wird, wenn Sie auf einen Punkt zufliegen. Je höher der Wert, desto weiter herausgezoomt ist die Panoramaansicht. Je niedriger der Wert, desto näher kommen Sie an die Details des Gebiets heran.

// 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 beim Fliegen zu einem Punkt.
  • Beispielwerte:
    • 50: Genauere Ansicht, Betonung von Details.
    • 200: Eine umfassendere Panoramaperspektive.

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 Aufsicht. 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 (Tonhöhe ändert sich im Laufe der Zeit um 10 Grad)

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

Beispielwerte:

  • BASE_PITCH: 0 (Kamera waagerecht)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (keine Tonhöhenänderung)

Kamerabereich und Zoom

Mit diesen Parametern wird festgelegt, wie stark der Zoom beim Fokussieren auf bestimmte Punkte angewendet wird. Je kleiner der Wert, desto näher ist der 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 Entfernungsänderung)
  • ZOOM_FACTOR: 20 (Kamerazoomfaktor)

Beschreibung:Mit diesen Einstellungen wird die Reichweitenänderung bei Kamerabewegungen und die Zoomstufe für einen genaueren Blick festgelegt.

Beispielwerte:

  • RANGE_AMPLITUDE_RELATIVE: 1 (Vollbereichsvariante)
  • 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 den Kurs (Drehung), die Neigung und den Bereich (wie weit die Kamera vom Mittelpunkt entfernt ist).

  • Einstellung: CAMERA_OFFSET
  • Standardwerte:
    • heading: 0 (kein Drehungsversatz)
    • pitch: Cesium.Math.toRadians(-30) (30 Grad nach unten geneigt)
    • range: 800 (800 Meter vom Zentrum entfernt)
  • Beschreibung: Hiermit werden die Kameraausrichtung, die Neigung und der Bereich zum Zurücksetzen der Ansicht definiert.
  • Beispielwerte:
    • heading: 45 (Grad, Blickrichtung Nordwest)
    • range: 1.500 Meter (weiter von der Mitte)

Startkoordinaten:

Mit START_COORDINATES werden der Anfangslängen- und Breitengrad sowie die Anfangshöhe der Kamera definiert. Hier beginnt die explorative Datenanalyse. Wählen Sie daher den Bereich aus, 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: 2000 (nähere Startposition)

Vordefinierten Standort laden

Mit dem location-Objekt in config.json wird der Mittelpunkt der Fläche festgelegt. Das ist die ursprüngliche Kameraperspektive im Cesium-Viewer.coordinates: Hiermit werden der Breitengrad (lat) und der Längengrad (lng) des Ziels festgelegt, zu dem die Kamera zuerst schwenken soll. Passen Sie diese Werte an, um die Kamera auf einen bestimmten Ort auf der Welt auszurichten.

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

Mit dieser Konfiguration können Sie die 3D Place Navigator App mit einem Zoom auf einen bestimmten Ort Ihrer Wahl starten. Mit dem Geocoding-Tool von Google können Sie die Breiten- und Längengradkoordinaten einer Adresse oder eines Ortsnamens ermitteln. Geben Sie dazu den Ort im Standortobjekt an:

  1. Rufen Sie das Geocoding-Tool auf.
  2. Geocodierungsanfrage erstellen: Klicken Sie auf den Bereich „Selber 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 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 Breiten- und Längengrade, die im Abschnitt geometry.location angezeigt werden.
  4. Geocodes verwenden: Kopiere die abgerufenen Breiten- und Längengradwerte aus der Antwort und füge sie in deiner Konfiguration in das coordinates-Objekt ein.

Hinweis: Geocodes, die auf diese Weise verwendet werden, müssen den in Abschnitt 3.4 der Nutzungsbedingungen der Google Maps Platform beschriebenen Bedingungen 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 bestimmen und die 3D-App „Place Navigator“ zu starten, wobei die Kamera auf diesen Standort ausgerichtet ist.

Erweiterte Anpassungen

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

Neuen Kamerapfad hinzufügen

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

fixed-orbit" | "dynamic-orbit"

Sie können aber auch einen neuen Kamerapfad erstellen und ihn mit dem

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

Weitere Informationen zur Verwendung dieser neuen Pfadberechnung im Konfigurationsfeld 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 in der Demo verfügbaren Ortstypen.

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)

Bei den Stilen haben wir mit CSS-Variablen gearbeitet. Sie werden in 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, Schrifteinstellungen und Abstände oder Ränder für die gesamte Anwendung anpassen.

Zusätzliche Daten einblenden

Wenn du zusätzliche Daten einblenden möchtest, musst du die src/utils/cesium.js-Datei aktualisieren und in der Cesium-Dokumentation nachlesen, wie du dem Globus GeoJSON- oder andere georeferenzierte Daten hinzufügst.

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 in Ihrem Code nach der folgenden Zeile 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 in Ihrem Code nach der folgenden Zeile 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. In diesem Objekt werden die Standardkonfiguration und alle Anpassungen zusammengeführt. Entfernen Sie die entsprechende Property 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 aus dem Admin-Bereich entfernen möchten, z. B. die Kamerageschwindigkeit, müssen Sie sowohl den JS- als auch den HTML-Code dafür aktualisieren.

4. Abschnitt „Kameraeinstellungen“ entfernen

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

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Zusammenfassung des Standortbereichs wird entfernt

const locationSection = await getLocationSettingsSection(locationConfig);

Fazit

In diesem Dokument haben wir die verschiedenen Anpassungsoptionen im Bereichsexplorer untersucht, mit denen Sie Ihre 3D-Expl. anpassen können. Wenn Sie das Kameraverhalten ändern, die visuelle Neigung anpassen und die Zoomstufen ändern, können Sie einzigartige und ansprechende Inhalte erstellen, in denen die ausgewählten Einstellungen und interessanten Orte präsentiert werden.

Experimentieren Sie mit verschiedenen Konfigurationen und passen Sie die Parameter an Ihre spezifischen Anforderungen an. Mithilfe von personalisierten Inhalten können Sie immersive und personalisierte Inhalte erstellen, die Ihre Zielgruppe fesseln und Ihre Vision zum Leben erwecken.