3D Area Explorer è una soluzione che ti consente di esplorare le community in un'esperienza 3D coinvolgente. La soluzione sfrutta: le API Photorealistic 3D Tiles, Places Search, Place Details, e Autocomplete di Google.
Guida introduttiva:
Attiva
Personalizzare l'esperienza
La soluzione 3D Area Explorer è altamente personalizzabile e ti consente di adattare l'esperienza ai percorsi dei clienti. Puoi personalizzare utilizzando il pannello di controllo nell'UI o il file config.json.
È tutto pronto per la personalizzazione? Ecco come:
Località
Definisci il punto di partenza dell'esperienza regolando la latitudine e la longitudine nel file config.json.
Controllo della videocamera
Assumi il controllo del tuo percorso selezionando il tipo di orbita della videocamera: un percorso circolare classico o un'onda sinusoidale intrigante.
Orbita fissa:
Si tratta di un'orbita circolare a un'altezza fissa e attorno a un punto di interesse specifico.
Guarda un'orbita fissa in azione esplorando la sede di Google a Sydney.
Orbita dinamica:
La videocamera si muove fluidamente in una traiettoria a onda sinusoidale attorno a un punto d'interesse designato. Questo movimento unico consente agli spettatori di osservare il punto di interesse da varie altezze e angolazioni, offrendo un'esperienza visiva dinamica e immersiva.
Guarda un'orbita dinamica in azione esplorando la Torre Eiffel.
Punti di interesse (PDI):
- Personalizza l'esplorazione determinando i tipi di luoghi che vuoi scoprire. Scegli tra musei, parchi, scuole e altro ancora utilizzando l'array
typesinconfig.json. - Imposta il numero massimo di punti di interesse visualizzati regolando il parametro
density. - Modifica
searchRadius (in meters)per includere gemme nascoste nelle vicinanze o concentrarti su aree specifiche. - Imposta la velocità scelta per il movimento della videocamera con il parametro
speed (in revolutions per minute).
Precaricare l'esplorazione: approfondisci con la personalizzazione degli URL
3D Area Explorer ti consente di predefinire l'esplorazione con la personalizzazione degli URL. In questo modo non è necessaria la configurazione manuale, semplificando l'esperienza utente.
Creare l'URL perfetto:
Aggiungi semplicemente parametri specifici all'URL di Area Explorer per preimpostare la località e altre impostazioni. Ad esempio:
https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439
Questo URL imposta il punto di partenza sulla latitudine e la longitudine specificate, trasportandoti immediatamente nella località scelta. Parametri disponibili:
location.coordinates.lat: latitudine della località scelta.location.coordinates.lng: longitudine della località scelta.poi.types: un elenco separato da virgole dei tipi di PDI da visualizzare.poi.density: il numero massimo di PDI scelto.poi.searchRadius: il raggio per la ricerca di PDI nelle vicinanze.camera.speed: velocità dell'orbita della videocamera.camera.orbitType: tipo di orbita della videocamera ("fixed-orbit" o "dynamic-orbit").
Vantaggi della personalizzazione degli URL:
- Semplifica l'esperienza utente predefinendo le impostazioni scelte.
- Condividi percorsi mirati con località e PDI precaricati specifici.
- Incorpora senza problemi le esperienze di Area Explorer preconfigurate nei siti web.
Sfruttando la personalizzazione degli URL, puoi creare esperienze su misura e invitare altri a intraprendere avventure curate.
Altre personalizzazioni
La sezione precedente ha esplorato le modifiche accessibili tramite l'UI o il file di configurazione. Tuttavia, esistono anche diversi altri parametri integrati che puoi modificare per personalizzare ulteriormente l'applicazione.
Per apportare queste personalizzazioni avanzate, devi esaminare il codice nel file src/utils/cesium.js che si trova nella directory src. Le seguenti variabili possono essere modificate per alterare l'aspetto e il comportamento dell'applicazione
Altezza della videocamera
Controlla l'altezza della videocamera quando vola verso un punto regolando il valore CAMERA_HEIGHT. Valori più alti forniranno una visualizzazione panoramica con meno zoom, mentre valori più bassi ti avvicineranno ai dettagli dell'area
// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
- Impostazione:
CAMERA_HEIGHT - Valore predefinito: 100
- Descrizione: definisce l'altezza della videocamera sopra la località target quando vola verso un punto.
- Valori di esempio:
- 50: visualizzazione più ravvicinata, che enfatizza i dettagli.
- 200: una prospettiva più panoramica.
Inclinazione della videocamera
L'inclinazione iniziale della videocamera è definita da BASE_PITCH. Utilizza valori negativi per un'inclinazione verso il basso e valori positivi per una visualizzazione verso l'alto. Per aggiungere un movimento dinamico sottile all'esplorazione, modifica 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;
- Impostazione:
BASE_PITCHeAUTO_ORBIT_PITCH_AMPLITUDE - Valori predefiniti:
BASE_PITCH: -30 (inclinazione di 30 gradi verso il basso)AUTO_ORBIT_PITCH_AMPLITUDE: 10 (modifica dell'inclinazione di 10 gradi nel tempo)
Descrizione: l'inclinazione della videocamera è l'inclinazione visiva di una mappa, misurata in gradi. È nota anche come inclinazione. Queste impostazioni definiscono l'inclinazione iniziale della videocamera e la regolazione dinamica dell'inclinazione durante le rotazioni automatiche.
Valori di esempio:
BASE_PITCH: 0 (videocamera a livello)AUTO_ORBIT_PITCH_AMPLITUDE: 0 (nessuna variazione dell'inclinazione)
Portata e zoom della videocamera
Questi parametri impostano la quantità di zoom applicata quando si mettono a fuoco punti specifici. Valori più piccoli indicano uno zoom più ravvicinato.
// 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;
Impostazione: RANGE_AMPLITUDE_RELATIVE e ZOOM_FACTOR
Valori predefiniti:
RANGE_AMPLITUDE_RELATIVE: 0,55 (variazione della distanza relativa)ZOOM_FACTOR: 20 (fattore di zoom della videocamera)
Descrizione: queste impostazioni definiscono la variazione della portata durante il movimento della videocamera e il livello di zoom per una visualizzazione più ravvicinata.
Valori di esempio:
RANGE_AMPLITUDE_RELATIVE: 1 (variazione della portata completa)ZOOM_FACTOR: 10 (meno 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.
};
Reimpostazione della videocamera
Quando un utente vuole reimpostare la videocamera nella posizione originale, vengono utilizzati i valori CAMERA_OFFSET. Questa impostazione include l'orientamento (rotazione), l'inclinazione e la portata (la distanza della videocamera dal centro).
- Impostazione:
CAMERA_OFFSET - Valori predefiniti:
heading: 0 (nessun offset di rotazione)pitch: Cesium.Math.toRadians(-30) (inclinazione di 30 gradi verso il basso)range: 800 (800 metri dal centro)
- Descrizione: definisce l'orientamento, l'inclinazione e la portata della videocamera per reimpostare la visualizzazione.
- Valori di esempio:
heading: 45 (gradi, visualizzazione nord-ovest)range: 1500 metri (più lontano dal centro)
Coordinate di inizio:
START_COORDINATES definisce la longitudine, la latitudine e l'altezza iniziali della videocamera. È qui che inizierà l'esplorazione, quindi impostala sull'area che vuoi che gli utenti vedano per prima.
// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
longitude: 0,
latitude: 60,
height: 15000000, // 15,000 km above the surface
};
- Impostazione:
START_COORDINATES Valori predefiniti:
longitude: 0latitude: 60height: 15000000 (15.000 km sopra la superficie)
Valori di esempio:
longitude: -122.4934,latitude: 37.7951 (Golden Gate Bridge)height: 2000 (posizione iniziale più ravvicinata)
Caricare una località predefinita
L'oggetto location in config.json imposta il centro dell'area. È il punto di vista iniziale della videocamera nel visualizzatore Cesium.coordinates: Definisce la
latitudine (lat) e la longitudine (lng) della località verso cui vuoi che la videocamera esegua la
panoramica per prima. Regola questi valori per impostare la videocamera su una località specifica del globo.
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
Questa configurazione ti consente di avviare l'applicazione 3D Place Navigator con lo zoom su una località specifica a tua scelta. Puoi utilizzare lo strumento Geocoding di Google per ottenere le coordinate di latitudine e longitudine di un indirizzo o del nome di un luogo specificandolo nell'oggetto location:
- Accedi allo strumento Geocoding Tool.
- Crea una richiesta di geocodifica Fai clic sulla sezione "Prova" e inserisci la località scelta nel campo "Indirizzo". Puoi specificare un indirizzo, il nome di un luogo o persino punti di riferimento.
- Genera coordinate Fai clic sul pulsante "Esegui" per inviare la richiesta. Lo strumento restituirà una risposta contenente varie informazioni sulla località, incluse le coordinate di latitudine e longitudine visualizzate nella sezione
geometry.location. - Utilizza i geocodici Copia i valori di latitudine e longitudine recuperati dalla risposta e incollali nell'oggetto
coordinatesall'interno della configurazione.
Questa configurazione utilizzerebbe lo strumento Geocoding per determinare automaticamente le coordinate della sede di Google a Mountain View, in California, e avviare l'applicazione 3D Place Navigator con la videocamera centrata su quella località.
Personalizzazioni avanzate
Puoi apportare personalizzazioni aggiuntive approfondendo il codice. La sezione seguente illustra alcune opzioni
Aggiungere un nuovo percorso della videocamera
La soluzione implementa due percorsi della videocamera diversi:
fixed-orbit" | "dynamic-orbit"
Tuttavia, se vuoi creare un nuovo percorso della videocamera, puoi implementarlo utilizzando
/src/utils/cesium.js nella funzione calculateAutoOrbitFrame.
Per utilizzare questo nuovo calcolo del percorso nel riquadro di configurazione,consulta l'implementazione in demo/src/camera-settings.js.
Aggiungere altri tipi di luoghi
L'elenco dei tipi di luoghi per la configurazione può essere modificato nel file demo/src/place-settings.js. A partire dalla riga 4 sono riportati i tipi di luoghi disponibili nella demo.
Se vuoi utilizzare tipi di luoghi specifici senza modificare l'origine della demo, puoi semplicemente aggiungerli al file config.json in poi.types.
Personalizzare lo stile (CSS)
Per gli stili abbiamo utilizzato le variabili CSS. Sono supportate in tutti i principali browser e consentono di modificare una riga in una posizione centrale e aggiornare proprietà CSS specifiche. Le nostre variabili CSS sono definite in src/main.css. Qui puoi regolare colori, impostazioni dei caratteri e padding o margini per l'intera applicazione.
Sovrapporre dati aggiuntivi
Per sovrapporre dati aggiuntivi, devi aggiornare il file src/utils/cesium.js e consultare la documentazione di Cesium su come aggiungere GeoJSON o altri dati con riferimenti geografici al globo.
Rimuovere le sezioni di configurazione
La nostra applicazione JavaScript ha tre sezioni principali nel file di configurazione: demo/src/[config-panel.js](config-panel.js): location, poi e camera. Ognuna di queste sezioni fornisce opzioni di configurazione per diversi aspetti dell'applicazione. Gli sviluppatori possono personalizzare queste sezioni in base alle loro esigenze specifiche.
1.Rimuovere una sezione specifica dalla configurazione
- Sezione Località
Per rimuovere la sezione location, trova la seguente riga nel codice e commentala o eliminala:
const locationConfig = { ...config.location, ...customConfig.location };
- Sezione PDI
Per rimuovere la sezione poi, trova la seguente riga nel codice e commentala o eliminala:
const poiConfig = { ...config.poi, ...customConfig.poi };
- Sezione Videocamera
Per rimuovere la sezione camera, trova la seguente riga nel codice e commentala o eliminala:
const cameraConfig = { ...config.camera, ...customConfig.camera };
2. Aggiornare le configurazioni combinate
Dopo aver rimosso una sezione, è essenziale aggiornare l'oggetto di configurazione combinato. Questo oggetto unisce la configurazione predefinita con eventuali personalizzazioni.
Rimuovi la proprietà corrispondente dall'oggetto 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. Regolare gli elementi dell'UI
Se la rimozione di una sezione comporta anche la rimozione degli elementi dell'UI correlati, aggiorna il codice di conseguenza nel codice HTML. Ad esempio, se vuoi rimuovere una sezione specifica dal pannello di amministrazione, come la velocità della videocamera, devi aggiornare sia il codice JS sia il codice HTML.
4. Rimuovere la sezione Impostazioni della videocamera
Per rimuovere la sezione delle impostazioni della videocamera dall'UI, trova la seguente riga e commentala o eliminala:
const cameraSettingsSecgetCameraSettingsSection(cameraConfig);
Riepilogo della rimozione della sezione Località
const locationSection = await getLocationSettingsSection(locationConfig);
Conclusione
In questo documento abbiamo esplorato le varie opzioni di personalizzazione disponibili in Area Explorer per adattare l'esperienza di esplorazione 3D. Modificando il comportamento della videocamera, regolando l'inclinazione visiva e modificando i livelli di zoom, puoi creare esperienze uniche e coinvolgenti che mostrano le impostazioni e i punti di interesse selezionati.
Ricorda di sperimentare con configurazioni diverse e di ottimizzare i parametri in base alle tue esigenze specifiche. Sfruttando la potenza della personalizzazione, puoi creare percorsi immersivi e personalizzati che coinvolgono il tuo pubblico e danno vita alla tua vision.