Google Mpas Platform y su nueva función WebGL

Uso de las nuevas funciones de Maps con tecnología WebGL

En Google I / O 2021, anunciamos la versión beta de Tilt and Rotation y Webgl Overlay View, que brinda una forma fundamentalmente nueva de crear experiencias de mapeo. Es posible que esté familiarizado con la función Vista de superposición existente de la API de JavaScript de Maps que le permite renderizar en una capa transparente que se encuentra en la parte superior del mapa. Durante años, los desarrolladores han estado usando Overlay View para dibujar en dos dimensiones sobre la parte superior del mapa, pero por mucho que pueda hacer con Overlay View, solo le permite renderizar en una capa transparente que flota efectivamente sobre el mapa.


Por el contrario, la vista de superposición de WebGL le brinda enlaces directos al ciclo de vida del mismo contexto de representación de WebGL que usamos para representar el mapa base vectorial. Esto significa que, por primera vez en la historia, puede renderizar objetos bidimensionales y tridimensionales directamente en el mapa, lo que le permite crear experiencias que antes eran imposibles con la API de JavaScript de Maps.

Hoy, le brindaremos una descripción general rápida de las nuevas funciones impulsadas por WebGL de la API de JavaScript de Maps, para que tenga todo el conocimiento que necesita para comenzar a crear experiencias de mapas de próxima generación.

¿Qué es WebGL?

WebGL es una API de navegador de bajo nivel, originalmente creada por Mozilla Foundation, que le brinda acceso a la unidad de procesamiento de gráficos (GPU) en dispositivos cliente, como teléfonos móviles y computadoras, en sus aplicaciones web. Por sí solo, el navegador no es capaz de manejar la pesada computación necesaria para renderizar objetos en el espacio 3D pero, al usar WebGL, puede pasar esos procesos para que los maneje la GPU que está diseñada específicamente para manejar tales procesos.

Para obtener más información sobre WebGL, consulte la documentación de Khronos Group, los diseñadores y mantenedores de WebGL.

Requisistos

Para usar la vista de superposición de WebGL, necesitará un ID de mapa con el mapa vectorial habilitado. También se recomienda encarecidamente que habilite la inclinación y rotación cuando cree su ID de mapa; de lo contrario, su mapa se limitará a la vista de arriba hacia abajo predeterminada; en resumen, no podrá mover su mapa en tres dimensiones.

Configuración de inclinación y rotación

Para cargar su mapa con una inclinación y rotación establecidas, puede proporcionar un valor para las propiedades `tilt` y `header` cuando crea el mapa:

WebGL-code1

La inclinación se especifica como un número o flotación en grados entre 0 y 67,5, siendo 0 grados la vista recta hacia abajo predeterminada y 67,5 la inclinación máxima. La inclinación máxima disponible también varía según el nivel de zoom.

La rotación se establece en la propiedad de rumbo como un número o flotante entre 0 y 360 grados, donde 0 es el norte verdadero.

También puede cambiar la inclinación y la rotación mediante programación en tiempo de ejecución cuando lo desee llamando a `setTilt` y ` setHeading` directamente en el objeto del mapa. Esto es útil si desea cambiar la orientación del mapa en respuesta a eventos como las interacciones del usuario.

WebGL-code2

Además, sus usuarios pueden controlar manualmente la inclinación y la rotación del mapa manteniendo presionada la tecla Mayús y arrastrando con el mouse o usando las teclas de flecha.

¿Adición de la vista de superposición de WebGL al mapa

La vista de superposición de WebGL está disponible en la API de JavaScript de Maps mediante la creación de una instancia de `google.maps.WebglOverlayView`. Una vez que se crea una instancia de la superposición, simplemente se necesita llamar a `setMap` en la instancia para aplicarla al mapa.

WebGL-code3

Para darle acceso al contexto de representación WebGL del mapa y manejar cualquier objeto que desee representar allí, la Vista de superposición de WebGL expone un conjunto de cinco ganchos en el ciclo de vida del contexto de representación WebGL del mapa base vectorial.

Aquí hay un resumen rápido:

`onAdd` es donde se debe realizar la mayor parte de su preprocesamiento, como buscar y crear estructuras de datos intermedias para eventualmente pasar a la superposición. La razón para hacer todo eso aquí es para asegurarse de no atascar la representación del mapa.

`onRemove` es donde querrás destruir todos los objetos intermedios, aunque sería bueno si lo hicieras antes.

`onContextRestored` se llama antes de que se procese el mapa y es donde debe inicializar, vincular, reinicializar o volver a vincular cualquier estado de WebGL, como sombreadores, objetos de búfer GL, etc.

`onDraw` es donde realmente representamos el mapa, así como cualquier cosa que especifiques en este gancho. Debe intentar ejecutar el conjunto mínimo de llamadas de dibujo para renderizar su escena. Si intenta hacer demasiado aquí, atascará tanto la representación del mapa base como cualquier cosa que esté tratando de hacer con WebGL, y créame, nadie quiere eso.

`onContextLost` es donde querrá limpiar cualquier estado asociado con el estado GL preexistente, ya que en este punto el contexto WebGL habrá sido destruido, por lo que será basura.

Para implementar estos enlaces, configúrelos en una función, que la API de JavaScript de Maps ejecutará en el momento adecuado en el ciclo de vida del contexto de representación de WebGL. Por ejemplo:

WebGL-code4

Para obtener más información sobre el uso de la vista de superposición de WebGL y sus enlaces de ciclo de vida, consulte la documentación .

Crear animaciones de cámara

Como parte de la versión beta de WebGL Overlay View, también presentamos "moveCamera", un nuevo control de cámara integrado que puede usar para establecer la posición, inclinación, rotación y zoom de la posición de la cámara simultáneamente. Como `setTilt` y ` setHeading`, `moveCamera` se llama directamente en el objeto ` Map`.

Al realizar llamadas sucesivas a `moveCamera` en un bucle de animación, también puede crear animaciones fluidas entre las posiciones de la cámara. Por ejemplo, aquí estamos usando la API `requestAnimationFrame` del navegador para cambiar la inclinación y rotación de cada cuadro:

WebGL-code5

Además, todos estos ajustes, incluido el zoom, admiten flotadores, lo que significa que no solo puede controlar la cámara como nunca antes, sino que también puede hacerlo con un alto grado de precisión.

Darle una oportunidad

Puede probar las nuevas funciones impulsadas por WebGL de la API de JavaScript de Maps ahora mismo cargando la API desde el canal beta. Tenemos un nuevo laboratorio de código y documentación con todos los detalles, así como código de muestra y aplicaciones de ejemplo de extremo a extremo para ayudarlo a comenzar. Además, asegúrese de consultar nuestro recorrido de funciones y demostraciones de viajes para obtener más información y jugar con una implementación real de estas funciones.

WebGL-ejemplo

Y háganos saber lo que piensa informándonos a través de nuestro rastreador de problemas . Necesitamos sus informes de errores, sus solicitudes de funciones y sus comentarios para ayudarnos a probar y mejorar las nuevas funciones de mapas basadas en WebGL.

Diviértete construyendo con el mapa en 3D; estamos ansiosos por ver las cosas increíbles que construirás.

Si requieres mayor información sobre cómo implementar Google Maps Platform en beneficio de potenciar e innovar los servicios financieros, banca digital y/o la experiencia de las operaciones de sus clienets. No dudes en agendar una cita con alguno de nuestros contactos estratégicos.

  • welcome@bsigeonet.com.mx
  • +52 (55) 62.64.62.62 Ext. 112
  • +52 (55) 63.90.10.51 Ext. 111
  • +52 (55) 55.44.06.52

Estaremos complacidos en atenderte.


  • 2021
  • FUENTE: Blog Google Maps Paltform
  • CRÉDITOS:
  • Travis McPhail
        Ingeniero de software
  • Google Maps Platform

  • TRADUCCIÓN:
  • Gabriel Balderas
        Consultor SIG
  • Ruben Vera
        Marketing
  • BSI • Bufete de Soluciones Integrales

  • MÁS INFORMACIÓN:
  • Martha Villanueva
        Director Comercial
  • :    mvillanueva@bsigeonet.com.mx
  • BSI • Bufete de Soluciones Integrales

¿Necesitas ayuda para impulsar tu proyecto?Contáctanos