3D Area Explorer ist eine Lösung, mit der Sie Gemeinden in faszinierender 3D-Ansicht erkunden können. Die Lösung nutzt: fotorealistische 3D-Kacheln von Google, Places Search, Place Details und Autocomplete APIs.
Erste Schritte:
Aktivieren
Personalisierung
Der 3D Area Explorer lässt sich individuell anpassen, sodass er an die Customer Journey angepasst werden kann. Sie können Anpassungen entweder über das Steuerfeld auf der Benutzeroberfläche oder mithilfe der Datei config.json
vornehmen.
Bereit zum Anpassen? Das geht so:
Standort
Legen Sie den Startpunkt Ihrer Websitevariante fest, indem Sie den Breiten- und Längengrad in der Datei config.json
anpassen.
Kamerasteuerung
Wählen Sie den Orbittyp der Kamera aus: ein klassischer Rundweg oder eine faszinierende Sinuswelle.
Fester Orbit:
Dies ist eine kreisförmige Umlaufbahn mit fester Höhe und um einen bestimmten POI.
Sehen Sie sich eine feste Umlaufbahn in Aktion an, indem Sie die Google-Niederlassung in Sydney erkunden.
Dynamic Orbit:
Die Kamera bewegt sich gleichmäßig in einer Sinuswellenkurve um einen festgelegten POI. Durch diese einzigartige Bewegung können Betrachter den POI aus verschiedenen Höhen und Blickwinkeln betrachten, was ein dynamisches und immersives visuelles Erlebnis ermöglicht.
Sehen Sie sich eine dynamische Umlaufbahn in Aktion an, indem Sie den Eiffelturm erkunden.
POIs:
- Passen Sie Ihre explorative Datenanalyse an und legen Sie fest, welche Arten von Orten Sie entdecken möchten. Mit dem Array
types
inconfig.json
können Sie aus Museen, Parks, Schulen und mehr auswählen. - Mit dem Parameter
density
können Sie die maximale Anzahl von POIs festlegen, die angezeigt werden sollen. - Passen Sie
searchRadius (in meters)
so an, dass versteckte Schätze in der Nähe eingeschlossen werden, oder konzentrieren Sie sich auf bestimmte Bereiche. - Mit dem Parameter
speed (in revolutions per minute)
kannst du die gewünschte Bewegungsgeschwindigkeit der Kamera festlegen.
Explorative Datenanalyse vorab laden: URL-Anpassung für genauere Daten
Im 3D Area Explorer können Sie Ihr Projekt durch URL-Anpassung vordefinieren. Dadurch ist keine manuelle Konfiguration erforderlich und die User Experience wird optimiert.
Die perfekte URL erstellen:
Fügen 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 Startpunkt auf den angegebenen Breiten- und Längengrad fest, sodass Sie sofort zum ausgewählten Ort gelangen. Verfügbare Parameter:
location.coordinates.lat
: Breitengrad Ihres ausgewählten Standorts.location.coordinates.lng
: Längengrad des ausgewählten Ortes.poi.types
: Eine durch Kommas getrennte Liste der anzuzeigenden POI-Typen.poi.density
: Die ausgewählte maximale Anzahl von POIs.poi.searchRadius
: Der Umkreis für die Suche nach POIs in der Nähe.camera.speed
: Orbitgeschwindigkeit der Kamera.camera.orbitType
: Orbittyp der Kamera („fester Orbit“ oder „dynamischer Orbit“).
Vorteile der URL-Anpassung:
- Optimieren Sie die Nutzererfahrung, indem Sie vorab ausgewählte Einstellungen festlegen.
- Teile Routen mit bestimmten vorinstallierten Orten und POIs.
- Vorkonfigurierte Area Explorer-Oberflächen lassen sich nahtlos in Websites einbetten.
Mithilfe der URL-Anpassung können Sie maßgeschneiderte Erlebnisse schaffen und andere zu ausgewählten Abenteuern einladen.
Weitere Anpassungen
Im vorherigen Abschnitt wurden Anpassungen behandelt, die über die UI oder die Konfigurationsdatei zugänglich sind. Es gibt jedoch auch einige 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 „src“-Verzeichnis ansehen. Die folgenden Variablen können geändert werden, um das Erscheinungsbild der App zu ändern.
Kamerahöhe
Über den Wert CAMERA_HEIGHT
können Sie steuern, wie hoch die Kamera sich positioniert, wenn sie zu einem Punkt fliegt. Höhere Werte ermöglichen eine verkleinerte Panoramaansicht, während Sie mit niedrigeren Werten den Details des Bereichs näher kommen.
// 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 der Zielregion, wenn sie zu einem Punkt fliegt.
- Beispielwerte:
- 50: Nahaufnahme: Details hervorheben.
- 200: Mehr Panoramaperspektive
Kameraneigung
Die anfängliche Neigung der Kamera wird durch BASE_PITCH definiert. negative Werte für eine Neigung nach unten und positive Werte für eine nach oben. Ändern Sie AUTO_ORBIT_PITCH_AMPLITUDE, um der Erkundung eine subtile dynamische Bewegung hinzuzufügen.
// 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
undAUTO_ORBIT_PITCH_AMPLITUDE
- Standardwerte:
BASE_PITCH
: -30 (Neigung um 30 Grad nach unten)AUTO_ORBIT_PITCH_AMPLITUDE
: 10 (Neigung um 10 Grad mit der Zeit)
Beschreibung:Der Kameraneigung ist die visuelle Neigung einer Karte, die in Grad gemessen wird. Es wird auch als Neigung bezeichnet. Diese Einstellungen definieren die anfängliche Neigung und die dynamische Neigungsanpassung der Kamera bei automatischen Rotationen.
Beispielwerte:
BASE_PITCH
: 0 (Stufenkamera)AUTO_ORBIT_PITCH_AMPLITUDE
: 0 (keine Stimmlage)
Kamerabereich und Zoom
Mit diesen Parametern wird der Zoomfaktor festgelegt, der beim Fokussieren bestimmter Punkte angewendet wird. Kleinere Werte bedeuten ein näheres Zoomen.
// 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 (Kamera-Zoomfaktor)
Beschreibung:Mit diesen Einstellungen werden die Bereichsvariationen während der Kamerabewegung und die Zoomstufe für eine genauere Betrachtung festgelegt.
Beispielwerte:
RANGE_AMPLITUDE_RELATIVE
: 1 (Vollbildvariation)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), die Neigung (Neigung) und die Entfernung (wie weit die Kamera vom Mittelpunkt entfernt ist).
- Einstellung:
CAMERA_OFFSET
- Standardwerte:
heading
: 0 (kein Rotationsversatz)pitch
: Cesium.Math.toRadians(-30) (Tonhöhen um 30 Grad nach unten)range
: 800 (800 Meter von der Mitte)
- Beschreibung: Definiert die Kamerarichtung, den Neigungswinkel und den Bereich zum Zurücksetzen der Ansicht.
- Beispielwerte:
heading
: 45 (Grad, Nordwesten)range
: 1.500 Meter (weiter von der Mitte)
Startkoordinaten:
START_COORDINATES definieren den anfänglichen Längengrad, Breitengrad und die Höhe für die Kamera. Hier beginnt die explorative Datenanalyse. Legen Sie dazu 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
: 0latitude
: 60height
: 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 Speicherort laden
Mit dem location
-Objekt in config.json
wird die Mitte des Bereichs festgelegt. Das ist die ursprüngliche Perspektive der Kamera im Cesium-Viewer.coordinates
: Definiert den Breiten- (lat
) und Längengrad (lng
) des Ortes, an den 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 den 3D-Ortsnavigator starten, indem Sie an einen bestimmten Ort Ihrer Wahl heranzoomen. Mit dem Geocoding-Tool von Google können Sie die Breiten- und Längengrade einer Adresse oder eines Ortsnamens abrufen, indem Sie ihn im Standortobjekt angeben:
- Rufen Sie das Geocoding-Tool auf.
- Geocoding-Anfrage erstellen: Klicken Sie auf den Abschnitt „Jetzt ausprobieren“ und geben Sie den ausgewählten Standort in das Feld „Adresse“ ein. Sie können eine Adresse, einen Ortsnamen oder auch Orientierungspunkte angeben.
- 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 im Abschnitt
geometry.location
angezeigten Breiten- und Längengrade. - Geocodes verwenden: Kopieren Sie die abgerufenen Breiten- und Längengradwerte aus der Antwort und fügen Sie sie in das
coordinates
-Objekt Ihrer Konfiguration ein.
Hinweis: Geocodes, die auf diese Weise verwendet werden, müssen den in Abschnitt 3.4 der Nutzungsbedingungen der Google Maps Platform beschriebenen Nutzungsbedingungen 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 der Google-Zentrale im kalifornischen Mountain View ermittelt und die 3D Place Navigator-Anwendung gestartet, bei der die Kamera auf den entsprechenden Standort zentriert ist.
Erweiterte Anpassungen
Sie können weitere Anpassungen vornehmen, indem Sie sich den Code genauer ansehen. Im folgenden Abschnitt werden einige Optionen erläutert.
Neuen Kamerapfad hinzufügen
Standardmäßig implementiert die Lösung zwei verschiedene Kamerapfade:
fixed-orbit" | "dynamic-orbit"
Wenn Sie möchten, können Sie jedoch einen neuen Kamerapfad erstellen, indem Sie die Methode
/src/utils/cesium.js in der Funktion calculateAutoOrbitFrame
.
Informationen zur Verwendung dieser neuen Pfadberechnung im Konfigurationsbereich 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 Ortstypen,
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, die wir mit CSS-Variablen gearbeitet haben. Sie werden von 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 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-Daten oder andere geografisch referenzierte Daten hinzufügen.
Konfigurationsabschnitte entfernen
Unsere JavaScript-Anwendung besteht in der Konfigurationsdatei aus drei Hauptabschnitten: 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
spezifischen Anforderungen anpassen.
1.Einen bestimmten Abschnitt aus der Konfiguration entfernen
- Bereich „Standort“
Wenn Sie den Abschnitt location
entfernen möchten, suchen Sie die folgende Zeile im Code 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 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 das entsprechende Attribut 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 beim Entfernen eines Abschnitts auch zugehörige UI-Elemente entfernt werden müssen, aktualisieren Sie den Code entsprechend im HTML-Code. 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 für diesen Bereich aktualisieren.
4. Bereich mit Kameraeinstellungen entfernen
Wenn Sie den Abschnitt mit den Kameraeinstellungen aus der UI entfernen möchten, suchen Sie die folgende Zeile und kommentieren oder löschen Sie sie:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Abschnittszusammenfassung für Standort wird entfernt
const locationSection = await getLocationSettingsSection(locationConfig);
Fazit
In diesem Dokument wurden die verschiedenen Anpassungsoptionen im Area Explorer vorgestellt, mit denen Sie 3D-Erkundungen an Ihre Bedürfnisse anpassen können. Sie können das Kameraverhalten, die visuelle Neigung und die Zoomstufen anpassen und so Ihre Einstellungen und POIs ansprechend präsentieren.
Experimentieren Sie mit verschiedenen Konfigurationen und stimmen Sie die Parameter auf Ihre spezifischen Anforderungen ab. Mithilfe von Anpassungsmöglichkeiten kannst du immersive und personalisierte Kaufprozesse erstellen, die deine Zielgruppe fesseln und deine Vision zum Leben erwecken.