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:

<ph type="x-smartling-placeholder">

Aktivieren

Individuelle Nutzung

Die Lösung für den 3D Area Explorer lässt sich individuell anpassen, indem Sie auf den Kaufprozess auswirken können. Sie können entweder über das Steuerfeld auf der Benutzeroberfläche oder mithilfe der Datei config.json.

Bereit zur Anpassung? So gehts:

Standort

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

Kamerasteuerung

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

  • Feste Umlaufbahn:

    Das ist eine kreisförmige Umlaufbahn mit fester Höhe um einen bestimmten Punkt Interesse.

    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:

  • Passen Sie Ihre Erkundung an, indem Sie die Arten von Orten festlegen, die Sie sehen möchten entdecken. Wähle mit der types aus Museen, Parks, Schulen und mehr aus Array in config.json.
  • 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 der URL-Anpassung detailliertere Einblicke erhalten

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:

Hängen Sie einfach bestimmte Parameter an die Area Explorer-URL an, um und andere Einstellungen vornehmen. 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 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.

Durch URL-Anpassung können Sie maßgeschneiderte Inhalte erstellen und und laden andere zu ausgewählten Abenteuern ein.

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.

Um diese erweiterten Anpassungen vorzunehmen, müssen Sie den Code in der Datei src/utils/cesium.js, die sich im src-Verzeichnis befindet. Die folgenden Variablen können geändert werden, um das Erscheinungsbild der Anwendung zu verändern.

Kamerahöhe

Steuere die Höhe der Kamera, wenn sie auf einen Punkt zufliegt, indem du indem Sie den Wert für CAMERA_HEIGHT anpassen. 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: <ph type="x-smartling-placeholder">
      </ph>
    • 50: Genauere Ansicht, Betonung der Details.
    • 200: Eine umfassendere Panoramaperspektive.

Neigung der Kamera

Die Initiale Neigung der Kamera wird durch BASE_PITCH definiert. Negative Werte für eine Neigung nach unten verwenden und positive Werte für eine Aufwärtsansicht. 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: <ph type="x-smartling-placeholder">
      </ph>
    • 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 Variante der Stimmlage)

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

Beschreibung:Diese Einstellungen definieren die Bereichsabweichung während der Kamera. und die Zoomstufe für einen genaueren Blick.

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 Nutzende die Kamera wieder auf die ursprüngliche Position zurücksetzen möchten, CAMERA_OFFSET-Werte werden verwendet. Diese Einstellung umfasst die Überschrift (Drehung), Neigung (Neigung) und Reichweite (wie weit die Kamera von der Mitte entfernt ist).

  • Einstellung: CAMERA_OFFSET
  • Standardwerte: <ph type="x-smartling-placeholder">
      </ph>
    • 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 Ansicht.
  • Beispielwerte: <ph type="x-smartling-placeholder">
      </ph>
    • 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: 2.000 (nähere Startposition)

Vordefinierten Standort laden

Das location-Objekt in config.json legt den Mittelpunkt des Bereichs fest. 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. Die gibt das Tool eine Antwort mit verschiedenen Informationen zum Standort zurück, einschließlich der Breiten- und Längengrade, die unterhalb der geometry.location.
  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 Beginnend in Zeile 4 sind die 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 unter src/main.css. definiert. können Sie Farben, Schrifteinstellungen und Abstände oder Ränder für das gesamte .

Zusätzliche Daten einblenden

Um zusätzliche Daten zu überlagern, müssen Sie die Datei src/utils/cesium.js aktualisieren und In der Cesium-Dokumentation erfahren Sie, wie Sie GeoJSON oder andere georeferenzierte auf dem Globus.

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.Einen bestimmten Abschnitt aus der Konfiguration entfernen

  • 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-Abschnitt

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. 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 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

Um den Bereich mit den Kameraeinstellungen von der Benutzeroberfläche zu entfernen, suchen Sie die folgende Zeile und Kommentieren oder löschen:

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 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.