3D Area Explorer: guida alla personalizzazione

3D Area Explorer è una soluzione che ti consente di esplorare le comunità in 3D accattivante. La soluzione sfrutta: I riquadri 3D fotorealistici di Google, Places Search (Ricerca luoghi) Place Details (Dettagli luogo) e API di completamento automatico.

Guida introduttiva:

Utilizza l' app 3D Area Explorer Admin ospitata

Oppure

Ottieni una chiave API e scarica il codice da GitHub.

Attiva

• API Photorealistic 3D Tile
• API Places

Personalizza l'esperienza

La soluzione 3D Area Explorer è altamente personalizzabile e consente di l'esperienza ai percorsi dei clienti. Puoi personalizzare utilizzando il pannello di controllo della UI o il file config.json.

Vuoi procedere con la personalizzazione? Ecco come:

Località

Definisci il punto di partenza della tua esperienza modificando latitudine e longitudine nel file config.json.

Controllo fotocamera

Assumi il controllo del tuo percorso selezionando il tipo di orbita della fotocamera: una classica un percorso circolare o un'intrigante onda sinusoidale.

• Orbita fissa:

  Questa è un'orbita circolare ad altezza fissa e attorno a un punto specifico di interesse.

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

• Orbita dinamica:

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

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

Punti d'interesse (PDI):

• Personalizza l'esplorazione definendo i tipi di luoghi che vuoi scopri. Scegli tra musei, parchi, scuole e altro ancora utilizzando l'types in config.json.
• Imposta il numero massimo di punti d'interesse visualizzati modificando l'opzione Parametro density.
• Modifica searchRadius (in meters) per includere gemme o focus nascosti nelle vicinanze in 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 l'URL personalizzazione. In questo modo non è necessario eseguire la configurazione manuale, l'esperienza utente.

Creazione dell'URL perfetto:

È sufficiente aggiungere parametri specifici all'URL di Area Explorer per preimpostare posizione 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, che ti porta immediatamente al luogo prescelto. Parametri disponibili:

• location.coordinates.lat: latitudine della posizione 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 scelto di PDI.
• poi.searchRadius: il raggio della ricerca dei PDI nelle vicinanze.
• camera.speed: velocità orbita della fotocamera.
• camera.orbitType: tipo di orbita della fotocamera ("orbita fissa" o "orbita dinamica").

Vantaggi della personalizzazione degli URL:

• Semplifica l'esperienza utente definendo in anticipo le impostazioni che hai scelto.
• Condividi i percorsi mirati con località precaricate e PDI specifici.
• Incorpora facilmente esperienze preconfigurate di Esplorazione area all'interno dei siti web.

Sfruttando la personalizzazione degli URL, puoi creare esperienze e Invitare altre persone a vivere avventure curate.

Nota: prova un URL personalizzato completamente caricato: 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

Ulteriori personalizzazioni

La sezione precedente esplorava gli aggiustamenti accessibili tramite l'interfaccia utente o la configurazione . Tuttavia, esistono anche molti altri parametri integrati che puoi modificarlo per personalizzare ulteriormente l'applicazione.

Per effettuare queste personalizzazioni avanzate, dovrai esaminare il codice nella src/utils/cesium.js situato nella directory src. Le seguenti possono essere modificate per alterare l'aspetto e il design dell'applicazione

Altezza fotocamera

Controlla l'altezza della fotocamera durante il volo verso un punto regolando il valore CAMERA_HEIGHT. Valori più alti forniranno un diminuita lo zoom, panoramica, mentre i valori più bassi ti consentono di avvicinarti al 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 videocamera al di sopra della posizione target quando in volo fino a un punto.
• Valori di esempio:
  • 50: Più ravvicinato, enfasi sui dettagli.
  • 200: Una prospettiva più panoramica.

Distanza tra la fotocamera

L'iniziale inclinazione della fotocamera è definita da BASE_PITCH. Utilizza valori negativi per un'inclinazione verso il basso e positivi per una vista dall'alto. Per aggiungere un leggero movimento dinamico al 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 verso il basso di 30 gradi)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (variazione del tono di 10 gradi sopra) volta)

Descrizione: l'inclinazione della fotocamera è l'inclinazione visiva di una mappa, misurata in gradi. È nota anche come inclinazione. Queste impostazioni definiscono le impostazioni iniziali tono e regolazione dinamica del tono durante le rotazioni automatiche.

Valori di esempio:

• BASE_PITCH: 0 (videocamera di livello)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (nessuna variazione della proposta musicale)

Raggio di azione e zoom della fotocamera

Questi parametri impostano la quantità di zoom applicata quando si concentra l'attenzione su punti. Valori più piccoli indicano uno zoom più vicino.

// 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 zoom della fotocamera)

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

Valori di esempio:

• RANGE_AMPLITUDE_RELATIVE: 1 (variazione gamma 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 fotocamera

Quando un utente vuole ripristinare la posizione originale della fotocamera, Vengono usati i valori CAMERA_OFFSET. Questa impostazione include l'intestazione (rotazione), distanza (inclinazione) e distanza (la distanza della fotocamera dal centro).

• Impostazione: CAMERA_OFFSET
• Valori predefiniti:
  • heading: 0 (nessun offset di rotazione)
  • pitch: Cesium.Math.toRadians(-30) (con un'inclinazione di 30 gradi verso il basso)
  • range: 800 (800 metri dal centro)
• Descrizione: definisce l'intestazione, il tono e l'intervallo della videocamera per reimpostare vista.
• Valori di esempio:
  • heading: 45 (gradi, vista nord-ovest)
  • range: 1500 metri (più lontano dal centro)

Coordinate di partenza:

Le START_COORDINATES definiscono la longitudine, la latitudine e l'altezza iniziali del fotocamera. Da qui inizierà l'esplorazione, impostala sull'area che ti interessa che gli utenti visualizzino per primi.

// 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)

Carica una posizione predefinita

L'oggetto location in config.json imposta il centro dell'area. È la punto di vista iniziale della videocamera nel visualizzatore Cesium.coordinates: Definisce latitudine (lat) e longitudine (lng) della posizione da cui vuoi che la videocamera eseguire la panoramica iniziale. Regola questi valori per impostare la videocamera su una posizione specifica su il globo.

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

Questa configurazione ti consente di avviare l'applicazione 3D Place Navigator aumentato lo zoom su un luogo specifico di tua scelta. Puoi utilizzare lo strumento di geocodifica di Google per ottenere la latitudine e la longitudine le coordinate di un indirizzo o di un luogo specificandolo nella :

1. Accedi alla sezione Geocodifica strumento.
2. Crea una richiesta di geocodifica Fai clic sul pulsante "Fai una prova". e inserisci la località che hai scelto nella sezione "Indirizzo". . Puoi specificare un indirizzo, il nome del luogo o persino i punti di riferimento.
3. Genera coordinate Fai clic sul pulsante "Corsa" per inviare la richiesta. La restituisce una risposta contenente varie informazioni sulla località, incluse le coordinate di latitudine e longitudine visualizzate sotto geometry.location.
4. Utilizza i codici geografici Copia i valori di latitudine e longitudine recuperati dal e incollarla nell'oggetto coordinates all'interno della configurazione.

Nota: i codici geografici utilizzati in questo modo devono rispettare i termini indicati in Google Maps. Termini di servizio della piattaforma Servizi sezione 3.4 secondo cui non devono essere memorizzati nella cache per più di 30 giorni e devono in un secondo momento.

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

Nota: questo metodo semplifica il processo di ricerca delle coordinate e riduce il numero l'identificazione manuale. Ti permette di esplorare facilmente qualsiasi luogo utilizzando il relativo indirizzo o nome all'interno della tua configurazione.

Personalizzazioni avanzate

Puoi effettuare ulteriori personalizzazioni approfondendo il codice. La sezione seguente illustra alcune opzioni

Aggiungi un nuovo percorso della videocamera

La soluzione implementa subito due diversi percorsi della videocamera:

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 implementazione in demo/src/camera-settings.js.

Aggiungi altri tipi di luogo

L'elenco dei tipi di luogo per la configurazione può essere modificato nel file demo/src/place-settings.js. che iniziano dalla riga 4 sono i segnaposto disponibili nella demo.

Se vuoi utilizzare tipi di luoghi specifici senza modificare l'origine della demo potresti semplicemente aggiungerli al file config.json in poi.types

Personalizza lo stile (CSS)

Per gli stili abbiamo lavorato con le variabili CSS. Sono supportati in tutti i principali browser e consentire di cambiare una riga in una posizione centrale e aggiornare specifiche proprietà CSS. Le variabili CSS sono definite nella sezione src/main.css. puoi regolare i colori, le impostazioni dei caratteri e le spaziature interne o i margini un'applicazione.

Dati aggiuntivi in overlay

Per sovrapporre altri dati devi aggiornare il file src/utils/cesium.js e consulta la documentazione del cesio su come aggiungere GeoJSON o altri dati geografici di riferimento i dati al globo.

Rimuovi 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 le opzioni di configurazione diversi aspetti dell'applicazione. Gli sviluppatori possono personalizzare queste sezioni in base alle loro esigenze specifiche.

1.Rimuovi una sezione specifica dalla configurazione

• Sezione Posizione

Per rimuovere la sezione location, individua la seguente riga nel codice e inserisci un commento o procedi nel seguente modo:

const locationConfig = { ...config.location, ...customConfig.location };

• Sezione PDI

Per rimuovere la sezione poi, individua la seguente riga nel codice e commenta oppure eliminarlo:

const poiConfig = { ...config.poi, ...customConfig.poi };

• Sezione Fotocamera

Per rimuovere la sezione camera, individua la seguente riga nel codice e commenta oppure eliminarlo:

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

2. Aggiorna configurazioni combinate

Dopo aver rimosso una sezione, è essenziale aggiornare la 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. Modifica gli elementi dell'interfaccia utente

Se rimuovere una sezione significa anche rimuovere gli elementi dell'interfaccia utente correlati, aggiorna il codice nel codice html. Ad esempio, se vuoi rimuovere una specifica del pannello di amministrazione come Velocità della fotocamera, devi aggiornare sia la sezione js e html.

4. Rimuovi la sezione delle impostazioni della videocamera

Per rimuovere la sezione delle impostazioni della fotocamera dall'interfaccia utente, individua la riga seguente e inserisci un commento o procedi nel seguente modo:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Rimozione del riepilogo della sezione relativa alla località

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusione

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

Ricordati di sperimentare diverse configurazioni e di ottimizzare parametri più adatti alle tue esigenze specifiche. Sfruttando la potenza puoi creare percorsi immersivi e personalizzati il tuo pubblico e realizzare la tua vision.