Primeros pasos con 3D Area Explorer

imagen

Descripción general

La solución 3D Area Explorer te ofrece una forma completamente nueva de descubrir y experimentar ubicaciones. Esta solución aprovecha las capacidades de los mosaicos fotorrealistas en 3D de Google Maps Platform y la API de Places para crear entornos 3D interactivos y atractivos.

3D Area Explorer está diseñado para varios propósitos:

  • Mejora la exploración de áreas: Los usuarios pueden explorar vecindarios de forma virtual con un alto grado de detalle visual, lo que les permite obtener información sobre las funciones y los puntos de referencia locales.

  • Promueve narrativas basadas en la ubicación: La capacidad de incorporar PDI (puntos de interés) con descripciones detalladas permite la creación de experiencias basadas en narrativas que educan e informan a los usuarios sobre ubicaciones específicas.

  • Inspira el desarrollo con las capacidades 3D de Google Maps: Demuestra el potencial de los datos de mapas 3D de Google para crear mapas interactivos y envolventes.

Cómo comenzar:

Habilita

Tecnologías clave

Esta solución se compila con dos tecnologías clave:

APIs de Google Maps Platform:

Usamos varias APIs de Google Maps Platform para obtener el mapa base y los datos para crear esta experiencia:

  • Mosaicos fotorrealistas en 3D de Google Maps: Los modelos 3D de alta resolución de edificios y terrenos proporcionan una representación realista y visualmente atractiva de los entornos urbanos.
  • API de Places: La app puede identificar y mostrar información detallada sobre los puntos de interés (PDI) dentro del área explorada, lo que enriquece la experiencia del usuario con conocimientos locales.
  • La función Autocompletar ayuda a los usuarios a buscar ubicaciones o áreas de interés específicas.

CesiumJS

CesiumJS es responsable de renderizar y mostrar el globo 3D de alta resolución. Se encarga de cargar y visualizar los mosaicos fotorrealistas en 3D de Google, que proporcionan un modelo de malla 3D de edificios y terrenos.

Administración de la cámara: CesiumJS proporciona las herramientas para controlar la posición, la orientación y el movimiento de la cámara. Esto incluye lo siguiente:

  • Establecer el punto de vista inicial para enfocarse en el vecindario especificado cuando se carga la app
  • Implementar movimientos dinámicos de la cámara, como las animaciones de órbita automatizadas para la exploración
  • Manejar las interacciones del usuario con el globo si se incluyen esas funciones (desplazamiento lateral, zoom y rotación)

Obtén información para que los mosaicos fotorrealistas en 3D funcionen con un renderizador de 3D Tiles.

Componentes clave

La aplicación se divide en dos apps diferentes:

  • App de administración
  • App de demo

En este diagrama, se proporciona una descripción general de las diferencias y la correlación entre las dos aplicaciones:

imagen

Sería beneficioso investigar cada app con más detalle:

App de administración

Esta aplicación proporciona una interfaz fácil de usar que te permite personalizar la experiencia 3D:

  • Búsqueda de ubicación : Usa la barra de búsqueda de Autocomplete de Google Maps Platform integrada para encontrar el área que quieres mostrar. Una vez que selecciones una ubicación, la cámara volará sin problemas a esa área.

  • Cámara: Ajusta la velocidad de movimiento de la cámara y el tipo de órbita para crear la experiencia de visualización seleccionada.

  • Lugares (PDI): Define la densidad, el radio de búsqueda y los tipos de puntos de interés (p.ej., restaurantes, cafeterías, puntos de referencia) que te gustaría destacar.

Usa esta app para personalizar la experiencia de tus usuarios finales.

Hay una descripción detallada de todas las personalizaciones 3D Area Explorer.

App de demo

Esta es la aplicación final orientada al usuario que carga la configuración que creaste en la app de administración. En este entorno 3D envolvente, los usuarios podrán explorar las áreas seleccionadas y descubrir los lugares que destacaste.

Una vez que hayas personalizado la apariencia con la app de administración, podrás descargar la configuración y ejecutar tu aplicación personalizada desde el código fuente.

Experiencia del usuario

imagen

Estas son algunas de las funciones clave de la aplicación:

  1. Los usuarios pueden explorar de forma interactiva un área en 3D, incluidos edificios, puntos de referencia y terrenos.
  2. Los usuarios pueden buscar y descubrir lugares cercanos (p.ej., museos, parques, restaurantes).
  3. Cuando seleccionan un lugar, los usuarios pueden ver información detallada o narrativas relacionadas con esa ubicación.

  4. Los desarrolladores pueden personalizar su experiencia de exploración a través de la configuración y los controles (si usan la app de administración).

  5. La rotación automática está habilitada, lo que permite que la cámara rote automáticamente alrededor del centro del área seleccionada.

Requisitos previos

  1. Clave de API de Google Maps: Necesitarás una clave de API válida con las siguientes APIs habilitadas:

  2. Servidor web: Puedes publicar la aplicación desde cualquiera de las siguientes opciones:

    • Un servidor web local (p.ej., con Node.js, http-server)
    • Un servicio de alojamiento web estático (la aplicación incluye un Dockerfile)

Puedes encontrar una descripción detallada de las opciones de implementación en la sección de readme del proyecto de GitHub.

Implementación

Puedes implementar la app como una aplicación de nodo o un contenedor de Docker en cualquier entorno de contenedores, como GKE o GAE. La demostración alojada usa la siguiente arquitectura:

imagen

  • En esta arquitectura, el código reside en un proyecto de GitHub.
  • Cloud Build toma el código en cualquier envío a la rama principal y activa una operación de compilación.
  • Como parte de la compilación, inserta la clave de API y crea una imagen que luego se almacena en el registro de artefactos.
  • Por último, implementa la imagen estable más reciente de Artifact Registry en Cloud Run.
  • También tenemos algunas verificaciones de estado y supervisión en ejecución para verificar el estado de las apps implementadas.

Datos de facturación

La solución 3D Area Explorer usa los servicios de Google Maps Platform para proporcionar una experiencia envolvente y dinámica. Es posible que algunas APIs generen cargos. A continuación, se proporciona una descripción general de las APIs y vínculos a los precios.

Google Maps Platform: API de 3D Tiles

La solución Storytelling utiliza la API de 3D Tiles para mejorar la experiencia visual con datos geoespaciales. Para obtener detalles sobre los precios relacionados con la API de 3D Tiles, consulta Precios de la API de 3D Tiles de Google Maps Platform - Precios.

Google Maps Platform: API de Places

La API de Places se emplea para datos basados en la ubicación, lo que agrega información detallada a la experiencia de narración. Para comprender los costos asociados con la API de Google Places,visita Google Maps Platform - Precios de la API de Places.

Google Maps Platform: API de Autocomplete

La función Autocomplete mejora la interacción del usuario. Para obtener detalles sobre los precios de la API de Autocomplete de Google Maps, visita Precios de Autocomplete de Google Maps Platform.

CesiumJS:

CesiumJS se usa para la visualización del globo 3D. Si bien CesiumJS es de código abierto, es posible que las funciones o los servicios adicionales tengan sus propios costos asociados. Consulta la documentación de CesiumJS para conocer las ofertas premium.

Es fundamental revisar los detalles de los precios de cada API respectiva, ya que los cargos se determinan de forma individual según el uso. Ten en cuenta que Google Maps Platform ofrece un nivel gratuito con una cierta cantidad de uso sin costo, y los detalles de los precios pueden variar según factores como la cantidad de solicitudes y la región de uso.

Consulta siempre las páginas de precios oficiales para obtener la información más precisa y actualizada sobre los costos de uso de Google Maps Platform y CesiumJS. Asegúrate de cumplir con los términos y condiciones que se describen en estos servicios para administrar y comprender los gastos asociados de manera eficaz.

Conclusión

En este documento, se proporciona una descripción general de las capacidades, los componentes, la experiencia del usuario y los requisitos técnicos de 3D Area Explorer.

Aprovechando los mosaicos fotorrealistas en 3D de Google y la API de Places, permite la exploración virtual de vecindarios, el descubrimiento de puntos de interés y el aprendizaje sobre la historia local.

Ya sea que se trate de mostrar un área, mejorar la exploración o promover la narración digital, 3D Area Explorer ofrece una plataforma visualmente impresionante.

Prueba la demostración y personalízala con la app de administración para crear una experiencia 3D atractiva e informativa.