3D Area Explorer: Anleitung zur Anpassung

3D Area Explorer ist eine Lösung, mit der Sie Communitys in fesselnde 3D-Hintergründe. Die Lösung nutzt: Fotorealistische 3D-Kacheln von Google, Places-Suche, Place Details, und Autocomplete APIs.

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

Steuere deine Reise, indem du die Art der Umlaufbahn der Kamera auswählst: ein klassisches oder eine faszinierende Sinuswelle.

  • Fixer Orbit:

    Dies ist ein kreisförmiger Orbit in einer festen Höhe und um einen bestimmten Punkt herum.

    Sehen Sie sich eine feste Umlaufbahn in Aktion an, indem Sie Google Sydney erkunden Büro.

  • Dynamischer Umlauf:

    Die Kamera bewegt sich gleichmäßig auf einer Sinuswelle um eine bestimmte POI. Durch diese einzigartige Bewegung können die Zuschauer den Punkt beobachten, von verschiedenen Höhen und Blickwinkeln aus, sodass eine dynamische und ein immersives visuelles Erlebnis zu bieten.

    Erleben Sie eine dynamische Umlaufbahn in Aktion, indem Sie den Eiffelturm erkunden

POIs (Points of Interest):

  • Passen Sie Ihre Erkundung an, indem Sie die Arten von Orten festlegen, die Sie sehen möchten entdecken. Mit dem types-Array in config.json können Sie unter anderem Museen, Parks und Schulen auswählen.
  • Legen Sie die maximale Anzahl von POIs fest, die angezeigt werden, indem Sie die density-Parameter.
  • Ändere „searchRadius (in meters)“ so, dass du verborgene Edelsteine oder Fokus in der Nähe hinzufügst zu bestimmten Bereichen.
  • 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 URL-Anpassung noch mehr herausfinden

Mit 3D Area Explorer können Sie Ihre explorative Datenanalyse mit URL vordefinieren Personalisierung. Eine manuelle Konfiguration, eine Optimierung der die User Experience verbessern.

Die perfekte URL erstellen:

Fügen Sie einfach bestimmte Parameter an die URL des Bereichssuchers an, um den Standort und andere Einstellungen vorab festzulegen. 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, der Sie sofort an den gewünschten Ort bringt. 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 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:

  • Sie können die Nutzerfreundlichkeit optimieren, indem Sie die gewünschten Einstellungen vorab 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 individuelle Inhalte erstellen und andere zu ausgewählten Abenteuern einladen.

Weitere Anpassungen

Im vorherigen Abschnitt ging es um Anpassungen, die über die Benutzeroberfläche oder die Konfiguration zugänglich sind -Datei. Es gibt jedoch noch einige andere integrierte Parameter, die Sie 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 zu verä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 die Werte, desto besser Panoramaansicht dargestellt werden. Je niedriger die Werte, desto näher Details zur Region

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

Neigung der Kamera

Die Initiale Neigung der Kamera durch BASE_PITCH definiert. Verwenden Sie negative Werte für eine Neigung nach unten und positive Werte für eine Aufsicht. Um eine subtile dynamische Bewegung in Ihrer explorativen Datenanalyse AUTO_ORBIT_PITCH_AMPLITUDE ändern.

// 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 (Neigungsänderung um 10 Grad über Zeit)

Beschreibung:Die Neigung der Kamera ist die visuelle Neigung einer Karte. Sie wird in Grad. Dies wird auch als Neigung bezeichnet. Mit diesen Einstellungen legen Sie den Anpassung der Tonhöhe und der dynamischen Tonhöhe bei automatischen Drehungen.

Beispielwerte:

  • BASE_PITCH: 0 (Level-Kamera)
  • 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. 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 (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 Nutzende die Kamera wieder auf die ursprüngliche Position zurücksetzen möchten, CAMERA_OFFSET-Werte werden 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 Rotationsversatz)
    • pitch: Cesium.Math.toRadians(-30) (Neigung um 30 Grad nach unten)
    • range: 800 (800 m von der Mitte)
  • Beschreibung: Definiert Richtung, Neigung und Bereich der Kamera zum Zurücksetzen des angezeigt wird.
  • 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 für die Kamera. Hier beginnt die explorative Datenanalyse. Legen Sie daher den Bereich fest, die Nutzer als Erstes sehen.

// 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. Es ist die Anfangsansicht der Kamera im Cesium-Viewer.coordinates: Definiert die Breiten- (lat) und Längengrad (lng) des Standorts, auf den die Kamera ausgerichtet werden soll zum ersten Element schwenken. Passen Sie diese Werte an, um die Kamera auf einen bestimmten Standort auf auf der ganzen Welt.

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

Mit dieser Konfiguration können Sie Ihre 3D-Ortungsnavigation starten an einen bestimmten Ort Ihrer Wahl herangezoomt haben. Mit dem Geocoding-Tool von Google können Sie den Breiten- und Längengrad Koordinaten einer Adresse oder eines Ortsnamens durch Angabe des Orts -Objekt enthält:

  1. Auf die Geocoding-Funktion Tool angezeigt.
  2. Geocoding-Anfrage erstellen Klicken Sie auf die Schaltfläche zum Ausprobieren. Abschnitt und den gewählten Standort in das Feld "Adresse" ein. Sie können eine Adresse, Ortsnamen oder sogar Sehenswürdigkeiten.
  3. Koordinaten generieren: Klicken Sie auf "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 Kopieren Sie die abgerufenen Breiten- und Längengradwerte aus dem und füge sie in das coordinates-Objekt in deiner Konfiguration ein.

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

Image

Bei dieser Konfiguration wird das Geocoding-Tool verwendet, um automatisch den Koordinaten des Google-Hauptsitzes in Mountain View, Kalifornien, 3D Place Navigator mit der Kamera auf diesen Ort ausrichten.

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 Konfigurationssteuerfeld 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 angepasst werden demo/src/place-settings.js Ab Zeile 4 sind die Ortstypen aufgeführt, die in der Demo verfügbar sind.

Wenn Sie bestimmte Ortstypen verwenden möchten, ohne die Demoquelle zu ändern, könnten 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 wichtigen und es möglich machen, eine Zeile an einem zentralen Ort zu ändern und CSS-Eigenschaften festlegen. Unsere CSS-Variablen sind hier definiert: src/main.css.. können Sie Farben, Schrifteinstellungen und Abstände oder Ränder für das gesamte .

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- oder andere georeferenzierte Daten hinzufügen.

Konfigurationsabschnitte entfernen

Unsere JavaScript-Anwendung besteht aus drei Hauptabschnitten im 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 anpassen an ihre spezifischen Bedürfnisse anpassen.

1. Entfernen Sie einen bestimmten Abschnitt aus der Konfiguration.

  • Abschnitt „Standort“

Um den Abschnitt location zu entfernen, suchen Sie die folgende Zeile in Ihrem Code und Kommentieren oder löschen:

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

Um den Abschnitt poi zu entfernen, suchen Sie die folgende Zeile in Ihrem Code und Kommentar oder löschen Sie sie:

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

Um den Abschnitt camera zu entfernen, suchen Sie die folgende Zeile in Ihrem Code und Kommentar oder löschen Sie sie:

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

2. Kombinierte Konfigurationen aktualisieren

Nachdem Sie einen Bereich entfernt haben, muss die kombinierte Konfiguration aktualisiert werden -Objekt enthält. In diesem Objekt werden die Standardkonfiguration und alle Anpassungen zusammengeführt. 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 beim Entfernen eines Abschnitts auch zugehörige UI-Elemente entfernt werden, aktualisieren Sie den Code. in den HTML-Code ein. Wenn Sie beispielsweise einen bestimmten wie z. B. die Kamerageschwindigkeit, ändern, müssen Sie sowohl die js- und HTML-Code hierfür erstellen.

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 Standortabschnitts wird entfernt

const locationSection = await getLocationSettingsSection(locationConfig);

Fazit

In diesem Dokument haben wir uns mit den verschiedenen Anpassungsoptionen beschäftigt. im Area Explorer, um Ihre 3D-Erkundung anzupassen. Durch Ändern wie Sie die visuelle Neigung anpassen und die Zoomstufe ändern, können Sie einzigartige und ansprechende Erlebnisse, bei denen Ihre Einstellungen und Punkte präsentiert werden von Interesse sein.

Experimentieren Sie mit verschiedenen Konfigurationen und optimieren Sie die -Parameter, die Ihren spezifischen Anforderungen entsprechen. Durch die Nutzung der können Sie immersive und personalisierte Erlebnisse erstellen, und Ihre Vision zum Leben erwecken.