Explorador de áreas 3D: Guía de personalización

3D Area Explorer es una solución que te permite explorar comunidades en un formato 3D cautivador. La solución aprovecha: las APIs de Photorealistic 3D Tiles, Places Search, Place Details, y Autocomplete de Google.

¿Cómo comenzar?

Habilita

Personaliza la experiencia

La solución 3D Area Explorer es altamente personalizable, lo que te permite adaptar la experiencia a los recorridos de tus clientes. Puedes personalizarla con el panel de control de la IU o con el archivo config.json.

¿Todo listo para personalizar? Aquí te indicamos cómo hacerlo:

Ubicación

Define el punto de partida de tu experiencia ajustando la latitud y la longitud en el archivo config.json.

Control de la cámara

Toma el control de tu recorrido seleccionando el tipo de órbita de la cámara: una ruta circular clásica o una onda sinusoidal intrigante.

Lugares de interés (POI):

  • Personaliza tu exploración determinando los tipos de lugares que deseas descubrir. Elige entre museos, parques, escuelas y mucho más con el array types en config.json.
  • Ajusta el parámetro density para establecer la cantidad máxima de lugares de interés que se muestran.
  • Modifica el parámetro searchRadius (in meters) para incluir gemas ocultas cercanas o enfocarte en áreas específicas.
  • Establece la velocidad elegida para el movimiento de la cámara con el speed (in revolutions per minute) parámetro.

Precarga tu exploración: Profundiza con la personalización de URLs

3D Area Explorer te permite predefinir tu exploración con la personalización de URLs. Esto elimina la necesidad de configuración manual y optimiza la experiencia del usuario.

Cómo crear la URL perfecta:

Simplemente agrega parámetros específicos a la URL de Area Explorer para preestablecer la ubicación y otros parámetros de configuración. Por ejemplo:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

Esta URL establece el punto de partida en la latitud y la longitud especificadas, lo que te transporta instantáneamente a la ubicación elegida. Parámetros disponibles:

  • location.coordinates.lat: Latitud de la ubicación elegida
  • location.coordinates.lng: Longitud de la ubicación elegida
  • poi.types: Una lista separada por comas de los tipos de lugares de interés que se mostrarán
  • poi.density: La cantidad máxima elegida de lugares de interés
  • poi.searchRadius: El radio para buscar lugares de interés cercanos
  • camera.speed: La velocidad de la órbita de la cámara
  • camera.orbitType: El tipo de órbita de la cámara ("fixed-orbit" o "dynamic-orbit")

Beneficios de la personalización de URLs:

  • Optimiza la experiencia del usuario predefiniendo la configuración elegida.
  • Comparte recorridos segmentados con lugares y lugares de interés específicos precargados.
  • Incorpora experiencias de Area Explorer preconfiguradas sin problemas en los sitios web.

Si aprovechas la personalización de URLs, puedes crear experiencias personalizadas e invitar a otras personas a embarcarse en aventuras seleccionadas.

Personalizaciones adicionales

En la sección anterior, se exploraron los ajustes accesibles a través de la IU o el archivo de configuración. Sin embargo, también hay varios otros parámetros integrados que puedes modificar para personalizar aún más la aplicación.

Para realizar estas personalizaciones avanzadas, deberás consultar el código en el archivo src/utils/cesium.js ubicado en el directorio src. Se pueden cambiar las siguientes variables para modificar la apariencia de la aplicación.

Altura de la cámara

Controla la altura a la que se posiciona la cámara cuando vuela hacia un punto ajustando el valor CAMERA_HEIGHT. Los valores más altos proporcionarán una vista panorámica más alejada, mientras que los valores más bajos te acercarán a los detalles del área.

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • Parámetro de configuración: CAMERA_HEIGHT
  • Valor predeterminado: 100
  • Descripción: Define la altura de la cámara sobre la ubicación de destino cuando vuela a un punto.
  • Valores de ejemplo:
    • 50: Vista más cercana, con énfasis en los detalles
    • 200: Una perspectiva más panorámica

Inclinación de la cámara

La inclinación inicial de la cámara se define con BASE_PITCH. Usa valores negativos para una inclinación hacia abajo y valores positivos para una vista hacia arriba. Para agregar un movimiento dinámico sutil a tu exploración, cambia el parámetro 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;
  • Parámetro de configuración: BASE_PITCH y AUTO_ORBIT_PITCH_AMPLITUDE
  • Valores predeterminados:
    • BASE_PITCH: -30 (inclinación de 30 grados hacia abajo)
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10 (cambio de inclinación de 10 grados con el tiempo)

Descripción: La inclinación de la cámara es la inclinación visual de un mapa, que se mide en grados. También se conoce como inclinación. Estos parámetros de configuración definen la inclinación inicial de la cámara y el ajuste de inclinación dinámico durante las rotaciones automáticas.

Valores de ejemplo:

  • BASE_PITCH: 0 (cámara nivelada)
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0 (sin variación de inclinación)

Rango y zoom de la cámara

Estos parámetros establecen la cantidad de zoom que se aplica cuando se enfoca en puntos específicos. Los valores más pequeños significan un zoom más cercano.

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

Parámetro de configuración: RANGE_AMPLITUDE_RELATIVE y ZOOM_FACTOR

Valores predeterminados:

  • RANGE_AMPLITUDE_RELATIVE: 0.55 (variación de distancia relativa)
  • ZOOM_FACTOR: 20 (factor de zoom de la cámara)

Descripción: Estos parámetros de configuración definen la variación de rango durante el movimiento de la cámara y el nivel de zoom para obtener una vista más cercana.

Valores de ejemplo:

  • RANGE_AMPLITUDE_RELATIVE: 1 (variación de rango completa)
  • ZOOM_FACTOR: 10 (menos 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.
};

Restablecimiento de la cámara

Cuando un usuario quiere restablecer la cámara a la posición original, se usan los valores CAMERA_OFFSET. Este parámetro de configuración incluye el rumbo (rotación), la inclinación y el rango (la distancia de la cámara desde el centro).

  • Parámetro de configuración: CAMERA_OFFSET
  • Valores predeterminados:
    • heading: 0 (sin desplazamiento de rotación)
    • pitch: Cesium.Math.toRadians(-30) (inclinación de 30 grados hacia abajo)
    • range: 800 (800 metros desde el centro)
  • Descripción: Define el rumbo, la inclinación y el rango de la cámara para restablecer la vista.
  • Valores de ejemplo:
    • heading: 45 (grados, vista noroeste)
    • range: 1,500 metros (más lejos del centro)

Coordenadas de inicio:

START_COORDINATES define la longitud, la latitud y la altura iniciales de la cámara. Aquí comenzará la exploración, así que configúrala en el área que deseas que los usuarios vean primero.

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • Parámetro de configuración: START_COORDINATES

  • Valores predeterminados:

    • longitude: 0
    • latitude: 60
    • height: 15000000 (15,000 km sobre la superficie)

  • Valores de ejemplo:

    • longitude: -122.4934, latitude: 37.7951 (Puente Golden Gate)
    • height: 2000 (posición inicial más cercana)

Carga una ubicación predefinida

El objeto location en config.json establece el centro del área. Es el punto de vista inicial de la cámara en el visor de Cesium.coordinates: Define la latitud (lat) y la longitud (lng) de la ubicación a la que deseas que la cámara se desplace primero. Ajusta estos valores para configurar la cámara en cualquier ubicación específica del planeta.

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

Esta configuración te permite iniciar la aplicación 3D Place Navigator con un acercamiento a una ubicación específica de tu elección. Puedes usar la herramienta Geocoding de Google para obtener las coordenadas de latitud y longitud de una dirección o un nombre de lugar especificándolo en el objeto de ubicación:

  1. Accede a la herramienta Geocoding.
  2. Crea una solicitud de geocodificación. Haz clic en la sección "Pruébalo tú mismo" y, luego, ingresa la ubicación elegida en el campo "Dirección". Puedes especificar una dirección, un nombre de lugar o incluso puntos de referencia.
  3. Genera coordenadas. Haz clic en el botón "Ejecutar" para enviar tu solicitud. La herramienta mostrará una respuesta que contiene información variada sobre la ubicación, incluidas sus coordenadas de latitud y longitud que se muestran en la sección geometry.location.
  4. Usa geocódigos. Copia los valores de latitud y longitud recuperados de la respuesta y pégalos en el objeto coordinates dentro de tu configuración.

Nota: Los geocódigos que se usan de esta manera deben cumplir con las condiciones que se describen en la sección 3.4 de las Condiciones del Servicio de Google Maps Platform, es decir, no deben almacenarse en caché por más de 30 días y deben actualizarse después de ese período.

imagen

Esta configuración usaría la herramienta Geocoding para determinar automáticamente las coordenadas de la sede central de Google en Mountain View, California, y lanzar tu aplicación 3D Place Navigator con la cámara centrada en esa ubicación.

Personalizaciones avanzadas

Puedes realizar personalizaciones adicionales profundizando en el código. En la siguiente sección, se explican algunas opciones.

Agrega una nueva ruta de cámara

La solución lista para usar implementa dos rutas de cámara diferentes:

fixed-orbit" | "dynamic-orbit"

Sin embargo, si lo deseas, puedes crear una nueva ruta de cámara que puedes implementar con

/src/utils/cesium.js en la calculateAutoOrbitFrame función.

Para usar este nuevo cálculo de ruta en el panel de configuración,consulta la implementación en demo/src/camera-settings.js.

Agrega más tipos de lugares

La lista de tipos de lugares para la configuración se puede ajustar en el archivo demo/src/place-settings.js. A partir de la línea 4, se encuentran los tipos de lugares disponibles en la demostración.

Si deseas usar tipos de lugares específicos sin cambiar la fuente de demostración, puedes agregarlos al archivo config.json en poi.types.

Personaliza el estilo (CSS)

Para los estilos, trabajamos con variables de CSS. Son compatibles con todos los navegadores principales y permiten cambiar una línea en un lugar central y actualizar propiedades de CSS específicas. Nuestras variables de CSS se definen en src/main.css. Allí puedes ajustar los colores, la configuración de fuentes y los paddings o márgenes de toda la aplicación.

Superpone datos adicionales

Para superponer datos adicionales, debes actualizar el archivo src/utils/cesium.js y consultar la documentación de Cesium sobre cómo agregar GeoJSON o cualquier otro dato georreferenciado al planeta.

Quita secciones de configuración

Nuestra aplicación JavaScript tiene tres secciones principales en el archivo de configuración: demo/src/[config-panel.js](config-panel.js): location, poi y camera. Cada una de estas secciones proporciona opciones de configuración para diferentes aspectos de la aplicación. Los desarrolladores pueden personalizar estas secciones según sus necesidades específicas.

1.Quita una sección específica de la configuración

  • Sección de ubicación

Para quitar la sección location, busca la siguiente línea en tu código y coméntala o bórrala:

const locationConfig = { ...config.location, ...customConfig.location };
  • Sección de lugares de interés

Para quitar la sección poi, busca la siguiente línea en tu código y coméntala o bórrala:

const poiConfig = { ...config.poi, ...customConfig.poi };
  • Sección de la cámara

Para quitar la sección camera, busca la siguiente línea en tu código y coméntala o bórrala:

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

2. Actualiza las configuraciones combinadas

Después de quitar una sección, es fundamental actualizar el objeto de configuración combinado. Este objeto combina la configuración predeterminada con cualquier personalización. Quita la propiedad correspondiente del objeto 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. Ajusta los elementos de la IU

Si quitar una sección también significa quitar elementos de la IU relacionados, actualiza el código en consecuencia en el código HTML. Por ejemplo, si deseas quitar una sección específica del panel de administración, como la velocidad de la cámara, debes actualizar el código JS y HTML para ello.

4. Quita la sección de configuración de la cámara

Para quitar la sección de configuración de la cámara de la IU, busca la siguiente línea y coméntala o bórrala:

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

Resumen de la eliminación de la sección de ubicación

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusión

En este documento, exploramos las diversas opciones de personalización disponibles en Area Explorer para adaptar tu experiencia de exploración en 3D. Si modificas el comportamiento de la cámara, ajustas la inclinación visual y cambias los niveles de zoom, puedes crear experiencias únicas y atractivas que muestren la configuración y los lugares de interés seleccionados.

Recuerda experimentar con diferentes configuraciones y ajustar los parámetros para satisfacer tus necesidades específicas. Si aprovechas el poder de la personalización, puedes crear recorridos envolventes y personalizados que cautiven a tu público y den vida a tu visión.