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

3D Area Explorer es una solución que te permite explorar comunidades en 3D cautivadores. La solución aprovecha los siguientes elementos: Tiles 3D fotorrealistas de Google, Places Search, Place Details y APIs de Autocomplete.

Primeros pasos:

Usar la app alojada de administrador del Explorador de área 3D

O

Obtén una clave de API y descarga el código desde GitHub.

Habilitar

• API de Photorealistic 3D Tiles
• API de Places

Personaliza la experiencia

La solución 3D Area Explorer es muy 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

Para definir el punto de partida de tu experiencia, ajusta la latitud y longitud en el archivo config.json.

Control de la cámara

Para controlar tu recorrido, selecciona el tipo de órbita de la cámara: una ruta circular clásica o una onda sinusoidal intrigante.

• Órbita fija:

  Se trata de una órbita circular a una altura fija y alrededor de un lugar de interés específico.

  Explora la oficina de Google en Sídney para ver una órbita fija en acción.

• Órbita dinámica:

  La cámara se mueve suavemente en una trayectoria de onda sinusoidal alrededor de un lugar de interés designado. Este movimiento único permite a los usuarios observar el lugar de interés desde varias alturas y ángulos, lo que ofrece una experiencia visual envolvente y dinámica.

  Explora la torre Eiffel para ver una órbita dinámica en acción.

Lugares de interés:

• Define los tipos de lugares que quieres descubrir para personalizar tu exploración. Elige entre museos, parques, escuelas y mucho más con el array types en config.json.
• Establece la cantidad máxima de lugares de interés que se muestran ajustando el parámetro density.
• Modifica el 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 parámetro speed (in revolutions per minute).

Precarga tu exploración: Profundiza tus conocimientos con la personalización de URL

El Explorador de área 3D te permite predefinir tu exploración con la personalización de URL. Esto elimina la necesidad de realizar una configuración manual, lo que optimiza la experiencia del usuario.

Crea la URL perfecta:

Simplemente agrega parámetros específicos a la URL del Explorador de área para preconfigurar 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 longitud especificadas, y te transporta al instante a la ubicación elegida. Parámetros disponibles:

• location.coordinates.lat: Latitud de la ubicación que elegiste.
• location.coordinates.lng: Longitud de la ubicación que elegiste.
• poi.types: Es una lista separada por comas de los tipos de lugares de interés que se mostrarán.
• poi.density: Es la cantidad máxima de lugares de interés elegido.
• poi.searchRadius: El radio para buscar lugares de interés cercanos.
• camera.speed: Indica la velocidad de órbita de la cámara.
• camera.orbitType: Es el tipo de órbita de la cámara ("órbita fija" o "órbita dinámica").

Beneficios de la personalización de URL:

• Define con anticipación la configuración que elegiste para optimizar la experiencia del usuario.
• Comparte los recorridos orientados con ubicaciones y lugares de interés específicos precargados.
• Incorpora sin problemas experiencias preconfiguradas de Area Explorer en los sitios web.

Si aprovechas la personalización de URLs, puedes crear experiencias personalizadas y, además, invitar a otros a embarcarte en aventuras seleccionadas.

Nota: Prueba una URL personalizada completamente cargada: 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

Personalizaciones adicionales

En la sección anterior, se analizaron los ajustes a los que se puede acceder a través de la IU o el archivo de configuración. Sin embargo, también hay 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 del 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

Ajusta el valor de CAMERA_HEIGHT para controlar la posición de la cámara cuando vuela hacia un punto. Los valores más altos brindará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 por encima de la ubicación objetivo al volar a un punto.
• Valores de ejemplo:
  • 50: Vista más cercana, con énfasis en los detalles.
  • 200: Una perspectiva más panorámica.

Tono de la cámara

La inclinación inicial de la cámara se define mediante BASE_PITCH. Usa valores negativos para una inclinación descendente y valores positivos para una vista hacia arriba. Para agregar un movimiento dinámico sutil a tu exploración, cambia el 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 tono 10 grados a lo largo del 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. Esta configuración define la inclinación inicial y el ajuste de tono dinámico de la cámara durante las rotaciones automáticas.

Valores de ejemplo:

• BASE_PITCH: 0 (nivel de la cámara)
• AUTO_ORBIT_PITCH_AMPLITUDE: 0 (sin variación de la presentación)

Alcance 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 bajos implican 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 del rango durante el movimiento de la cámara y el nivel de zoom para realizar una visualización más de cerca.

Valores de ejemplo:

• RANGE_AMPLITUDE_RELATIVE: 1 (variación de rango completo)
• 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 desea restablecer la cámara a la posición original, se utilizan los valores de CAMERA_OFFSET. Esta configuración incluye la orientación (rotación), la inclinación (inclinación) y el rango (qué tan lejos está la cámara del centro).

• Parámetro de configuración: CAMERA_OFFSET
• Valores predeterminados:
  • heading: 0 (sin compensación 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 la orientación, el tono 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)

Inicia las coordenadas:

Las claves START_COORDINATES definen la longitud, la latitud y la altura iniciales de la cámara. Aquí es donde comenzará la exploración, así que configúrala en el área que quieres 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: 15,000,000 (15,000 km sobre la superficie)

• Valores de ejemplo:

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

Cómo cargar 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 Cesium.coordinates: Define la latitud (lat) y la longitud (lng) de la ubicación hasta 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 globo terráqueo.

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

Esta configuración te permite iniciar tu aplicación de 3D Place Navigator con el zoom en una ubicación específica que elijas. Puedes usar la herramienta Geocoding de Google para obtener las coordenadas de latitud y longitud de una dirección o el nombre de un lugar si lo especificas en el objeto de ubicación:

1. Accede a la Herramienta de geocodificación.
2. Crea una solicitud de Geocoding: Haz clic en la sección "Pruébalo tú mismo" y, luego, ingresa la ubicación que elegiste en el campo "Dirección". Puedes especificar una dirección, el nombre de un lugar o incluso puntos de referencia.
3. Generar coordenadas Haz clic en el botón "Ejecutar" para enviar la solicitud. La herramienta mostrará una respuesta que contendrá mucha información sobre la ubicación, incluidas las coordenadas de latitud y longitud que aparecen 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 de tu configuración.

Nota: Los códigos geográficos que se usen de esta forma deben cumplir con las condiciones que se describen en el artículo 3.4 de las Condiciones del Servicio de Google Maps Platform a fin de establecer que no se deben almacenar en caché durante más de 30 días y deben actualizarse después de ese período.

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 iniciaría tu aplicación 3D Place Navigator con la cámara centrada en esa ubicación.

Nota: Este método simplifica el proceso de encontrar coordenadas y reduce la necesidad de identificarlas de forma manual. Te permite explorar cualquier ubicación sin problemas mediante su dirección o nombre en tu configuración.

Personalización avanzadas

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

Agregar una nueva ruta de acceso a la cámara

De manera predeterminada, la solución implementa dos rutas de cámara diferentes:

fixed-orbit" | "dynamic-orbit"

Pero si deseas, puedes crear una nueva ruta de acceso a la cámara, puedes implementarla usando el

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

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

Se puede ajustar la lista de tipos de lugares para la configuración 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 la demostración, puedes agregarlos al archivo config.json en poi.types.

Personalizar 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 una ubicación central y actualizar propiedades específicas de CSS. Nuestras variables de CSS se definen en src/main.css.. Allí, puedes ajustar los colores, la configuración de la fuente, los paddings o los márgenes de toda la aplicación.

Superponer 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 demás datos de referencia geográfica al mundo.

Quitar secciones de configuración

Nuestra aplicación de JavaScript tiene tres secciones principales en el archivo de configuración: demo/src/[config-panel.js](config-panel.js): location, poi y camera. En cada una de estas secciones, se proporcionan opciones de configuración para diferentes aspectos de la aplicación. Los desarrolladores pueden personalizar estas secciones en función de 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 comenta 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 comenta 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 comenta o bórrala:

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

2. Actualizar parámetros de configuración combinados

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. Cómo ajustar los elementos de la IU

Si quitar una sección también implica quitar elementos de la IU relacionados, actualiza el código según corresponda 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.

4. Quitar 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);

Eliminación del resumen de la sección Ubicación

const locationSection = await getLocationSettingsSection(locationConfig);

Conclusión

En este documento, exploramos las diversas opciones de personalización disponibles en el Explorador de área para adaptar tu experiencia de exploración 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 parámetros de configuración y ajustar los parámetros para que se adapten a tus necesidades específicas. Cuando aprovechas el poder de la personalización, puedes crear recorridos inmersivos y personalizados que cautivan a tu público y le dan vida a tu visión.