3D Area Explorer: guida alla personalizzazione

3D Area Explorer è una soluzione che ti consente di esplorare le comunità in un coinvolgente formato 3D. La soluzione sfrutta: riquadri 3D fotorealistici di Google, Ricerca di luoghi, Dettagli dei luoghi, e API di completamento automatico.

Guida introduttiva:

Attiva

Personalizza 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'interfaccia utente o il file config.json.

Vuoi personalizzare? Ecco come:

Località

Definisci il punto di partenza dell'esperienza regolando la latitudine e la longitudine nel file config.json.

Controllo fotocamera

Prendi il controllo del tuo viaggio selezionando il tipo di orbita della videocamera: un classico percorso circolare o un'intriguante onda sinusoidale.

  • Orbita fissa:

    È un'orbita circolare ad altezza fissa e attorno a un punto d'interesse specifico.

    Guarda un'orbita fissa in azione esplorando l'ufficio di Google a Sydney.

  • Orbita dinamica:

    La videocamera si muove dolcemente seguendo una traiettoria di onda sinusoidale intorno a un punto d'interesse stabilito. Questo movimento unico consente agli spettatori di osservare il punto d'interesse da diverse altezze e angolazioni, offrendo un'esperienza visiva dinamica e coinvolgente.

    Guarda un'orbita dinamica in azione esplorando la Torre Eiffel.

Punti d'interesse (PDI):

  • Personalizza la tua esplorazione determinando i tipi di luoghi che vuoi scoprire. Scegli tra musei, parchi, scuole e altro ancora utilizzando l'array types in config.json.
  • Imposta il numero massimo di punti d'interesse visualizzati modificando il parametro density.
  • Modifica searchRadius (in meters) per includere gemme nascoste nelle vicinanze o per concentrarti su aree specifiche.
  • Imposta la velocità scelta per il movimento della videocamera con il parametro speed (in revolutions per minute).

Precaricamento dell'esplorazione: approfondimenti con la personalizzazione degli URL

3D Area Explorer ti consente di predefinire l'esplorazione con la personalizzazione dell'URL. In questo modo non è necessaria la configurazione manuale, semplificando l'esperienza utente.

Creare l'URL perfetto:

È sufficiente aggiungere 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 sulla longitudine specificate, catapultandoti 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 di tipi di PDI da visualizzare.
  • poi.density: il numero massimo di PDI scelto.
  • poi.searchRadius: il raggio per la ricerca dei PDI nelle vicinanze.
  • camera.speed: velocità dell'orbita della videocamera.
  • camera.orbitType: tipo di orbita della videocamera ("orbita fissa" o "orbita dinamica").

Vantaggi della personalizzazione dell'URL:

  • Semplifica l'esperienza utente predefinendo le impostazioni scelte.
  • Condividere percorsi mirati con località e PDI precaricati specifici.
  • Incorpora facilmente esperienze preconfigurate di Esplorazione area all'interno dei siti web.

Sfruttando la personalizzazione dell'URL, puoi creare esperienze su misura e invitare altre persone a intraprendere avventure selezionate.

Ulteriori personalizzazioni

La sezione precedente ha esplorato le modifiche accessibili tramite l'interfaccia utente o il file di configurazione. Tuttavia, esistono anche altri parametri integrati che puoi modificare per personalizzare ulteriormente l'applicazione.

Per apportare queste personalizzazioni avanzate, devi esaminare il codice nel src/utils/cesium.js file situato nella directory src. Le seguenti variabili possono essere modificate per cambiare l'aspetto dell'applicazione

Altezza fotocamera

Controlla l'altezza della fotocamera durante il volo verso un punto regolando il valore CAMERA_HEIGHT. I valori più elevati forniscono una vista panoramica con lo zoom meno elevato, mentre i valori più bassi ti consentono di visualizzare i 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 fotocamera sopra la posizione target quando voli verso un punto.
  • Valori di esempio:
    • 50: visione più ravvicinata, che mette in evidenza i dettagli.
    • 200: una prospettiva più panoramica.

Inclinazione della videocamera

L'inclinazione iniziale della fotocamera è 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 leggero movimento dinamico 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_PITCH e AUTO_ORBIT_PITCH_AMPLITUDE
  • Valori predefiniti:
    • BASE_PITCH: -30 (inclinazione di 30 gradi verso il basso)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (variazione del tono di 10 gradi nel tempo)

Descrizione: l'inclinazione della fotocamera è l'inclinazione visiva di una mappa, misurata in gradi. È noto anche come inclinazione. Queste impostazioni definiscono l'inclinazione iniziale e la regolazione dinamica dell'inclinazione della fotocamera durante le rotazioni automatiche.

Valori di esempio:

  • BASE_PITCH: 0 (livello videocamera)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (nessuna variazione dell'intonazione)

Raggio d'azione e zoom della fotocamera

Questi parametri impostano la quantità di zoom applicata quando ci si concentra su 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 distanza relativa)
  • ZOOM_FACTOR: 20 (fattore di zoom della fotocamera)

Descrizione: queste impostazioni definiscono la variazione dell'intervallo durante lo spostamento della videocamera e il livello di zoom per uno sguardo più da vicino.

Valori di esempio:

  • RANGE_AMPLITUDE_RELATIVE: 1 (variazione dell'intervallo completo)
  • 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.
};

Ripristino dei dati di fabbrica della videocamera

Quando un utente vuole reimpostare la videocamera sulla posizione originale, vengono utilizzati i valori CAMERA_OFFSET. Questa impostazione include l'orientamento (rotazione), la inclinazione e la distanza (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 l'intervallo della fotocamera per reimpostare la vista.
  • Valori di esempio:
    • heading: 45 (gradi, vista nord-ovest)
    • range: 1500 metri (più lontano dal centro)

Coordinate di partenza:

START_COORDINATES definisce la longitudine, la latitudine e l'altezza iniziali della fotocamera. Da qui 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: 0
    • latitude: 60
    • height: 15000000 (15.000 km sopra la superficie)

  • Valori di esempio:

    • longitude: -122.4934, latitude: 37.7951 (Golden Gate Bridge)
    • height: 2000 (posizione iniziale più vicina)

Caricare una località predefinita

L'oggetto location in config.json imposta il centro dell'area. È il punto di vista iniziale della fotocamera nel visualizzatore Cesium.coordinates: Definisce la latitudine (lat) e la longitudine (lng) della località verso la quale vuoi che la videocamera effettui la panoramica per prima. Modifica questi valori per impostare la videocamera su una località specifica nel mondo.

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

Questa configurazione ti consente di avviare l'applicazione 3D Place Navigator con lo zoom su una posizione specifica di tua scelta. Puoi utilizzare lo strumento di geocodifica di Google per ottenere le coordinate di latitudine e longitudine di un indirizzo o del nome di un luogo specificandolo nell'oggetto Location:

  1. Accedi allo strumento Geocoding.
  2. Crea una richiesta di geocodifica Fai clic sulla sezione "Prova tu" e inserisci la località scelta nel campo "Indirizzo". Puoi specificare un indirizzo, un nome di luogo o persino un punto di riferimento.
  3. Genera coordinate Fai clic sul pulsante "Esegui" per inviare la richiesta. Lo strumento restituirà una risposta contenente varie informazioni sul luogo, tra cui le coordinate di latitudine e longitudine visualizzate nella sezione geometry.location.
  4. Utilizza i codici geografici Copia i valori di latitudine e longitudine recuperati dalla risposta e incollali nell'oggetto coordinates all'interno della configurazione.

Nota: i codici geografici utilizzati in questo modo devono rispettare i termini descritti nella sezione 3.4 dei Termini di servizio di Google Maps Platform, ovvero non devono essere memorizzati nella cache per più di 30 giorni e devono essere aggiornati dopo questo periodo.

immagine

Questa configurazione utilizzerebbe lo strumento di geocodifica per determinare automaticamente le coordinate della sede centrale di Google a Mountain View, in California, e avviare l'applicazione 3D Place Navigator con la fotocamera centrata su questa posizione.

Personalizzazioni avanzate

Puoi apportare ulteriori personalizzazioni esaminando più da vicino il codice. La sezione seguente illustra alcune opzioni

Aggiungere un nuovo percorso della videocamera

La soluzione implementa due diversi percorsi della videocamera:

fixed-orbit" | "dynamic-orbit"

Tuttavia, se vuoi, puoi creare un nuovo percorso della videocamera e 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.

Aggiungi altri tipi di luogo

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 demo, puoi semplicemente aggiungerli al file config.json in poi.types

Personalizza lo stile (CSS)

Per gli stili abbiamo utilizzato le variabili CSS. Sono supportati in tutti i principali browser e consentono di cambiare una riga in una posizione centrale e di aggiornare proprietà CSS specifiche. Le nostre variabili CSS sono definite in src/main.css.. Qui puoi regolare i colori, le impostazioni dei caratteri e i padding o i margini per l'intera applicazione.

Sovrapporre dati aggiuntivi

Per sovrapporre altri dati, devi aggiornare il file src/utils/cesium.js e consultare la documentazione di cesium su come aggiungere GeoJSON o altri dati georeferenziati al globo.

Rimuovere sezioni di configurazione

L'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 proprie esigenze specifiche.

1.Rimuovi una sezione specifica dalla configurazione

  • Sezione Posizione

Per rimuovere la sezione location, trova la riga seguente nel codice e commentala o eliminala:

const locationConfig = { ...config.location, ...customConfig.location };
  • Sezione PDI

Per rimuovere la sezione poi, trova la riga seguente nel codice e commenta o eliminala:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Sezione Fotocamera

Per rimuovere la sezione camera, trova la riga seguente nel codice e commenta o eliminala:

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. Aggiorna configurazioni combinate

Dopo aver rimosso una sezione, è essenziale aggiornare l'oggetto configurazione combinata. Questo oggetto unisce la configurazione predefinita a 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. Modificare gli elementi dell'interfaccia utente

Se la rimozione di una sezione comporta anche la rimozione di elementi dell'interfaccia utente correlati, aggiorna il codice corrispondente nel codice HTML. Ad esempio, se vuoi rimuovere una sezione specifica dal pannello di amministrazione, come la velocità della fotocamera, devi aggiornare sia il codice JS sia il codice HTML.

4. Rimuovi la sezione delle impostazioni della videocamera

Per rimuovere la sezione delle impostazioni della videocamera dall'interfaccia utente, individua la riga seguente e commentala o eliminala:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Rimozione del riepilogo della sezione relativa alla località

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusione

In questo documento abbiamo esaminato le varie opzioni di personalizzazione disponibili in Esplorazione area per personalizzare la tua esperienza di esplorazione 3D. Modificando il comportamento della videocamera, regolando l'inclinazione visiva e i livelli di zoom, puoi creare esperienze uniche e coinvolgenti che mettono in mostra le impostazioni e i punti d'interesse selezionati.

Ricordati di sperimentare diverse configurazioni e di ottimizzare i parametri in base alle tue esigenze specifiche. Sfruttando la potenza della personalizzazione, puoi creare percorsi coinvolgenti e personalizzati che catturino il pubblico e rendano viva la tua visione.