3D Area Explorer: Anleitung zur Anpassung

Mit dem 3D Area Explorer können Sie Stadtteile und Gebiete in beeindruckenden 3D-Ansichten erkunden. Die Lösung nutzt: Fotorealistische 3D-Kacheln von Google, Places Search, Place Details und Autocomplete APIs.

Erste Schritte:

Verwenden Sie die gehostete 3D Area Explorer Admin App.

oder

Holen Sie sich einen API-Schlüssel und laden Sie den Code von GitHub herunter.

Aktivieren

• Photorealistic 3D Tiles API
• Places API

Anpassung

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 zum Anpassen? 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 ein kreisförmiger Orbit in einer festen Höhe und um einen bestimmten Punkt herum.

  Sehen Sie sich das Google-Büro in Sydney an, um einen beispielhaften Einsatz eines festen Orbits zu sehen.

• Dynamischer Orbit:

  Die Kamera bewegt sich gleichmäßig in einer Sinuskurve um einen bestimmten POI. 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 bieten.

  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 die maximale Anzahl der angezeigten POIs fest, indem Sie den Parameter density anpassen.
• Ä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 mehr erforderlich, was die Nutzerfreundlichkeit erhöht.

Die perfekte URL erstellen:

Fügen Sie einfach bestimmte Parameter an die URL des Area Explorer 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 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:

• Sie können die Nutzerfreundlichkeit optimieren, indem Sie die gewünschten Einstellungen vorab festlegen.
• Sie können gezielte Fahrten mit bestimmten vorab geladenen Orten und POIs teilen.
• Vorkonfigurierte Area Explorer-Funktionen nahtlos in Websites einbetten

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

Hinweis :Hier finden Sie eine vollständig geladene benutzerdefinierte URL: 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 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.

Für diese erweiterten Anpassungen 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: Nahaufnahme, die Details hervorhebt.
  • 200: Eine eher 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)

Kamerareichweite und Zoom

Mit diesen Parametern wird festgelegt, wie stark herangezoomt wird, wenn der Fokus auf bestimmte Punkte gelegt 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 für 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 vom Zentrum entfernt)

Startkoordinaten:

Mit START_COORDINATES werden der Anfangslängen- und Breitengrad sowie die Anfangshöhe der Kamera definiert. Hier beginnt die explorative Datenanalyse. 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: 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 der ursprüngliche Kameraausgangspunkt 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 die Adresse oder den Ortsnamen 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 die 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 Werte für den Breiten- und Längengrad aus der Antwort und fügen Sie sie in das coordinates-Objekt in Ihrer Konfiguration ein.

Hinweis: So verwendete Geocodes müssen den in Abschnitt 3.4 der Nutzungsbedingungen für die 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 werden mit dem Geocoding-Tool automatisch die Koordinaten des Google-Hauptquartiers in Mountain View, Kalifornien, ermittelt und Ihre 3D Place Navigator-Anwendung wird gestartet, wobei die Kamera auf diesen Standort ausgerichtet ist.

Hinweis :Mit dieser Methode können Sie Koordinaten einfacher ermitteln und die manuelle Identifizierung reduzieren. Sie können damit jeden Ort anhand seiner Adresse oder seines Namens in Ihrer Konfiguration problemlos untersuchen.

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. 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önnen Sie sie einfach der Datei config.json unter poi.types hinzufügen.

Stil anpassen (CSS)

Für die Stile haben wir CSS-Variablen verwendet. 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 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 hat drei Hauptabschnitte in der Konfigurationsdatei: demo/src/[config-panel.js](config-panel.js): location, poi und camera. Jeder dieser Abschnitte bietet Konfigurationsoptionen für verschiedene Aspekte der Anwendung. Entwickler können diese Abschnitte an ihre spezifischen Anforderungen anpassen.

1.Bestimmten Abschnitt aus der Konfiguration entfernen

• Standortbereich

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 in Ihrem Code nach der folgenden Zeile 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 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 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.