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 kann individuell angepasst werden,
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 den 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 interessant sein. 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 inconfig.json
. - Legen Sie die maximale Anzahl von POIs fest, die angezeigt werden, indem Sie die
density
-Parameter. - Ändere „
searchRadius (in meters)
“ so, dass darin verborgene Edelsteine oder Fokus in der Nähe enthalten sind 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
in der 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 von 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
undAUTO_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 wird der 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
: 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 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:
- Auf die Geocoding-Funktion Tool.
- 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.
- 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
. - 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.
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 hier definiert: src/main.css.
.
können Sie Farben, Schrifteinstellungen und Abstände oder Ränder für das gesamte
.
Zusätzliche Daten einblenden
Um zusätzliche Daten einzublenden, müssen Sie die Datei src/utils/cesium.js aktualisieren und In der Cäsium-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. 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-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.