MapLibre V2: Añade terreno 3D a tu mapa

Publicado el 19 de mayo de 2022

¡La segunda generación de MapLibre GL JS está aquí! Se ha reescrito en TypeScript y los mapas se pueden mostrar en 3D. Todas las aplicaciones, estilos y mapas personalizados anteriores siguen funcionando y ahora están preparados para el 3D.

Qué es MapLibre GL JS

MapLibre GL JS es una biblioteca de JavaScript que utiliza WebGL para representar mapas interactivos a partir de mosaicos vectoriales y estilos de MapLibre. Forma parte del ecosistema MapLibre GL.

Para obtener más información sobre MapLibre, consulte el artículo MapLibre: fork de código abierto de MapboxGL

Novedades de MapLibre 2 - Mapas 3D y TypeScript

Mapas 3D

Todas las características del mapa funcionan a la perfección con la nueva opción de terreno 3D: los tipos de capas existentes se ajustan y alinean automáticamente con el terreno, y los marcadores se fijan al suelo.

Ahora puede visualizar la elevación del terreno a partir de un MDE (mosaicos RGBA), incluyendo el dibujo de las pistas, las etiquetas y los puntos.

Para renderizar un terreno 3D, MapLibre crea una malla triangular, un conjunto de triángulos 3D que representan la superficie. Esta malla se crea a partir de los datos del terreno procedentes del MDE (mosaicos RGBA).

Por defecto, los mapas son 2D, pero ahora tienes la posibilidad de ver tus mapas en 3D. Para activar la opción 3D, tienes que añadir al mapa una fuente "raster-dem" que contenga las elevaciones del terreno (mosaicos RGBA).

map.addSource("some id", {
  "type": "raster-dem",
  "url": "https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=YOUR_API_KEY",
});

A continuación, debe habilitar el terreno 3D del mapa indicando la fuente de datos:

map.setTerrain({
  source: "some id"
});

En las opciones del terreno, además del origen, se puede indicar la exageración y el elevationOffset.

• exageración: multiplicador de la elevación. Se utiliza para hacer el terreno más "extremo". Por defecto 1,0

Aquí hay un ejemplo de código para añadir terreno con una exageración de 2,5x a un mapa:

map.on('load', () => {
  map.addSource("terrain", {
    "type": "raster-dem",
    "url": "https://api.maptiler.com/tiles/terrain-rgb/tiles.json?key=YOUR_API_KEY",
  });
  map.setTerrain({
    source: "terrain",
    exaggeration: 2.5
  });
});

Ver el código fuente completo en GitHub

TypeScript

Toda la biblioteca ha sido reescrita en TypeScript.

La calidad del código fuente de todo MapLibre GL JS ha mejorado. Gracias a los tipos, los desarrolladores han corregido varios errores y han mejorado las pruebas, que ahora son más robustas. Esto hace que el código sea más fácil de mantener y ayuda a los nuevos desarrolladores a contribuir.

La mejor noticia para los desarrolladores es que se ha eliminado el código obsoleto mientras todo sigue siendo compatible a nivel de API. No es necesario que cambies nada si utilizas las APIs de JavaScript de MapLibre o los bindings existentes.

Si desarrollas grandes aplicaciones en TypeScript por ti mismo y las compilas junto con MapLibre - puedes beneficiarte de los tipos definidos presentes directamente en la librería - en lugar de los @types/maplibre-gl externos. En este caso, deberías actualizar tu código. Este enfoque también puede traer beneficios en la reducción de código a través de la sacudida del árbol en el futuro.

Características y mejoras

• Añade capacidades de terreno en 3D.
• Ahora puedes inclinar el mapa más de 60 grados. Se ha añadido soporte para la inclinación desbloqueada hasta 85º (antes 60º). 60 es el valor máximo por defecto. Si desea utilizar un valor más alto debe establecer el maxPitch del mapa. Ejemplo: maxPitch: 85.
• Añadir opción vista-glifo a alineación del texto que coloca los glifos a lo largo de una cadena de líneas y los gira hacia el eje x de la ventana gráfica.
• La atribución compacta por defecto debe ser abierta para cumplir con las Directrices de Atribución de OpenStreetMap.
• Añadido redibujar para mapear.
• Cancelar las solicitudes GeoJSON pendientes cuando GeoJSONSource.setData() se llama en lugar de esperar a que se complete cualquier solicitud pendiente antes de emitir la solicitud de la nueva URL.

Cambios de última hora

• Migración a Typescript (algunas tipificaciones de Typescript han cambiado).
• Se ha eliminado todo el código relacionado con accessToken y las URLs específicas de Mapbox que empiezan por mapbox://. Se ha eliminado el código de telemetría y de seguimiento.
• Eliminado baseApiUrl ya que sólo se utilizaba para las URLs relacionadas con Mapbox.
• Eliminado versión de la API pública
• El Internet Explorer obsoleto ya no es compatible con esta versión.
• Se ha dejado de dar soporte a Chrome 49-65. Ahora se requiere Chrome 66+. Para la compatibilidad con Chrome 49-65 utilice la versión 1.15.2.

Vea todos los cambios de la nueva versión en el CHANGELOG

La comunidad MapLibre

Todos estos cambios y mejoras han sido posibles gracias al esfuerzo y la colaboración de la comunidad. Un agradecimiento especial a @prozessor13 por añadir la opción de hacer mapas en 3D y a @wipfli, @HarelM, @acalcutt, @vanilla-lake y @rendrom entre otros por sus aportaciones.

La comunidad decidió crear el proyecto MapLibre para evitar la fragmentación de la comunidad y aunar esfuerzos en el desarrollo y el mantenimiento. Lea la historia y los detalles técnicos en MapLibre: Mapbox GL open-source fork - MapTiler

MapTiler ha participado en el proyecto desde el principio, formando parte del comité directivo, contribuyendo al sitio web, creando documentación, manteniendo el SDK, etc.

Para saber más, visite la página de la comunidad.

Enlaces útiles

• Cómo construir un mapa 3D con MapLibre v2.0 GL JS - MapTiler
• Introducción a MapLibre GL JS - Tutoriales
• MapLibre - SDKs de mapas abiertos
• Qué son los azulejos vectoriales y por qué debería importarte - MapTiler
• MapLibre: fork de código abierto de Mapbox GL - MapTiler
• MapLibre GL Native: SDK móvil de código abierto para Android e iOS - MapTiler Mobile