3D Area Explorer: Anleitung zur Anpassung

3D Area Explorer ist eine Lösung, mit der Sie Communitys in faszinierender 3D-Ansicht erkunden können. Dabei kommen Fotorealistische 3D-Kacheln von Google, Places Search, Place Details und Autocomplete APIs zum Einsatz.

Erste Schritte:

Gehostete 3D Area Explorer Admin-App verwenden

oder

Fordern Sie einen API-Schlüssel an und laden Sie den Code von GitHub herunter.

Aktivieren

• API für fotorealistische 3D-Kacheln
• Places API

Individuelle Nutzung

Die 3D Area Explorer-Lösung kann individuell an Ihre Kaufprozesse angepasst werden. Sie können Anpassungen entweder über das Steuerfeld auf der Benutzeroberfläche oder mithilfe der Datei config.json vornehmen.

Bereit zur Anpassung? Das geht so:

Standort

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

Kamerasteuerung

Übernehmen Sie die Kontrolle über Ihre Reise, indem Sie die Umlaufbahn der Kamera auswählen: entweder einen klassischen Rundweg oder eine faszinierende Sinuswelle.

• Feste Umlaufbahn:

  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 POI aus verschiedenen Höhen und Blickwinkeln zu betrachten, was ein dynamisches und immersives visuelles Erlebnis bietet.

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

POIs:

• Passen Sie Ihre Erkundung an, indem Sie die Arten von Orten festlegen, die Sie erkunden möchten. Mit dem types-Array in config.json haben Sie die Wahl zwischen Museen, Parks, Schulen und mehr.
• Legen Sie mit dem Parameter density fest, wie viele POIs maximal angezeigt werden dürfen.
• Ändere die searchRadius (in meters) so, dass versteckte Edelsteine in der Nähe eingeschlossen werden oder der Fokus auf bestimmte Bereiche gelegt wird.
• Legen Sie die gewünschte Geschwindigkeit für die Bewegung der Kamera mit dem Parameter speed (in revolutions per minute) fest.

Explorative Datenanalyse vorab laden: Mit der URL-Anpassung detailliertere Einblicke erhalten

Mit 3D Area Explorer können Sie Ihre explorative Datenanalyse durch URL-Anpassung vordefinieren. Dadurch entfällt eine manuelle Konfiguration und eine optimierte Nutzererfahrung.

Die perfekte URL erstellen:

Hängen 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 angegebenen Breiten- und Längengrad als Startpunkt fest und bringt Sie sofort zum ausgewählten Ort. 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: Umlaufgeschwindigkeit der Kamera.
• camera.orbitType: Rotationstyp der Kamera ("fester Orbit" oder "dynamischer 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-Inhalte nahtlos in Websites einbetten.

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

Hinweis :Probieren Sie eine vollständig geladene benutzerdefinierte URL aus: https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

Weitere Anpassungen

Im vorherigen Abschnitt wurden Anpassungen behandelt, die über die UI oder Konfigurationsdatei zugänglich sind. Es gibt jedoch auch einige 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. Die folgenden Variablen können geändert werden, um das Erscheinungsbild der Anwendung zu verändern

Kamerahöhe

Mit dem Wert CAMERA_HEIGHT können Sie festlegen, wie hoch die Kamera beim Fliegen auf einen Punkt positioniert wird. Höhere Werte sorgen für eine herausgezoomte Panoramaansicht, während niedrigere Werte Sie den Details des Bereichs näher bringen.

// 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 Zielstandort für den Flug zu einem Punkt.
• Beispielwerte:
  • 50: Genauere Ansicht, Betonung der Details.
  • 200: Eine umfassendere Panoramaperspektive.

Neigung der Kamera

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 Ansicht nach oben. Um Ihrer explorativen Datenanalyse eine subtile dynamische Bewegung hinzuzufügen, ä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 (Neigung um 30 Grad nach unten)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (Neigung um 10 Grad im Laufe der Zeit ändert)

Beschreibung:Die Neigung der Kamera ist die visuelle Neigung einer Karte, die in Grad gemessen wird. Dies wird auch als Neigung bezeichnet. Mit diesen Einstellungen werden die anfängliche Tonhöhe und die dynamische Anpassung der Kamera bei automatischen Drehungen festgelegt.

Beispielwerte:

• BASE_PITCH: 0 (Level-Kamera)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (keine Variante der Stimmlage)

Kamerabereich und Zoom

Mit diesen Parametern wird festgelegt, wie stark der Zoom beim Fokussieren auf bestimmte Punkte angewendet wird. Kleinere Werte bedeuten eine stärkere Heranzoomung.

// 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 (Zoomfaktor der Kamera)

Beschreibung:Diese Einstellungen definieren die Bereichsabweichung bei Kamerabewegungen und die Zoomstufe für eine genauere Betrachtung.

Beispielwerte:

• RANGE_AMPLITUDE_RELATIVE: 1 (Breitbandabweichung)
• 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), Neigung (Neigung) und den Bereich (wie weit die Kamera von der Mitte entfernt ist).

• Einstellung: CAMERA_OFFSET
• Standardwerte:
  • heading: 0 (kein Rotationsversatz)
  • pitch: Cesium.Math.toRadians(-30) (Neigung um 30 Grad nach unten)
  • range: 800 (800 m von der Mitte)
• Beschreibung: Definiert Kameraausrichtung, Neigung und Bereich zum Zurücksetzen der Ansicht.
• Beispielwerte:
  • heading: 45 (Grad, Nordwestsicht)
  • range: 1.500 Meter (weiter von der Mitte)

Startkoordinaten:

Die START_COORDINATES definieren den anfänglichen Längengrad, Breitengrad und die Höhe der Kamera. 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: 2.000 (nähere Startposition)

Vordefinierten Standort laden

Das location-Objekt in config.json legt den Mittelpunkt des Bereichs fest. Das ist die ursprüngliche Kameraperspektive im Cesium-Viewer.coordinates: Definiert den Breiten- (lat) und Längengrad (lng) des Standorts, zu dem 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 die 3D Place Navigator-Anwendung starten, indem Sie an einen bestimmten Ort Ihrer Wahl herangezoomt haben. 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 Abschnitt „Try It Yourself“ und geben Sie den gewünschten Standort in das Feld „Address“ (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 Ort zurück, einschließlich der im Abschnitt geometry.location angezeigten Breiten- und Längengrade.
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.

Bei dieser Konfiguration wird das Geocoding-Tool verwendet, um die Koordinaten des Google-Hauptsitzes in Mountain View, Kalifornien, automatisch zu bestimmen und die 3D-App „Place Navigator“ zu starten, wobei die Kamera auf diesen Standort ausgerichtet ist.

Hinweis: Diese Methode vereinfacht das Ermitteln von Koordinaten und verringert die Notwendigkeit der manuellen Identifizierung. Damit können Sie jeden Ort in Ihrer Konfiguration anhand seiner Adresse oder seines Namens nahtlos untersuchen.

Erweiterte Anpassungen

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

Neuen Kamerapfad hinzufügen

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

fixed-orbit" | "dynamic-orbit"

Sie können aber auch einen neuen Kamerapfad erstellen, indem Sie ihn mithilfe der Methode

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

Informationen zur Verwendung dieser neuen Pfadberechnung im Konfigurationsbereich finden Sie in der Implementierung von 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, fügen Sie sie einfach der Datei config.json unter poi.types hinzu.

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 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 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 Bereiche an ihre jeweiligen Anforderungen anpassen.

1. Entfernen Sie einen bestimmten Abschnitt aus der Konfiguration.

• Abschnitt „Standort“

Wenn Sie den Abschnitt location entfernen möchten, suchen Sie die folgende Zeile in Ihrem Code und kommentieren 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 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 die entsprechende Eigenschaft aus dem Objekt combinedConfig:

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 zum Entfernen eines Abschnitts auch zugehörige UI-Elemente entfernt werden, aktualisieren Sie den Code entsprechend im HTML-Code. Wenn Sie beispielsweise einen bestimmten Bereich aus dem Admin-Steuerfeld entfernen möchten, etwa die Kamerageschwindigkeit, 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 oder löschen Sie sie:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Zusammenfassung des Abschnitts „Standort“ wird entfernt

const locationSection = await getLocationSettingsSection(locationConfig);

Fazit

In diesem Dokument haben wir uns mit den verschiedenen Anpassungsoptionen im Area Explorer beschäftigt, mit denen Sie Ihre 3D-Erkundung an Ihre Anforderungen anpassen können. Wenn Sie das Kameraverhalten anpassen, die visuelle Neigung anpassen und die Zoomstufen ändern, können Sie Ihre ausgewählten Einstellungen und POIs optimal präsentieren.

Experimentieren Sie mit verschiedenen Konfigurationen und optimieren Sie die Parameter an Ihre spezifischen Anforderungen. Mithilfe der Anpassung kannst du immersive und personalisierte Erlebnisse erstellen, die deine Zuschauer fesseln und deine Vision zum Leben erwecken.