Creación de mapas base para visores webmapping con QGIS (parte I)

En esta entrada vamos a mostrar cómo crear mapas base para visores webmapping utilizando QGIS.

La creación de mapas base lo realizaremos a partir de una capa raster que procesaremos para dividirla en teselas. Crearemos teselas PNG de un conjunto de capas cargadas en QGIS y crear un mapa base para utilizarlo en un mapa web.

¿Qué son las teselas (tiles)?

Las teselas han revolucionado el webmapping y nos ha dado acceso rápido y fácil a grandes conjuntos de datos.  Una imagen de mapa no se almacena en caché “entera”. La imagen es almacenada en forma de pequeñas imágenes rectangulares del mismo tamaño (teselas), para cada nivel de zoom, que se combinan para formar mapas más grandes.

De esta manera sólo se sirve al usuario una pequeña fracción de un gran conjunto de datos.

En un entorno web la creación de teselas es un procedimiento habitual (realmente es un mal necesario) para garantizar una adecuada la velocidad de entrega de las imágenes. Además el almacenamiento en caché de las teselas requiere menos recursos de un servidor WMS.

Un servidor de teselas open source muy eficiente es GeoWebCache, que además funciona muy bien en combinación con GeoServer.

Pero, y con un SIG de escritorio, ¿Es posible crear las teselas de mapa para crear mapas base para que puedan utilizarse en un visor web mapping?

Creación de teselas raster con QGIS

Una forma sencilla de crear mapas base para visores webmapping es mediante la generación de teselas ráster con QGIS.

Este algoritmo genera teselas ráster del proyecto QGIS para los niveles de zoom seleccionados en un formato de directorios XYZ o en formato mbtiles que podemos utilizar en Leaflet.

Vamos a crear teselas a partir de la capa ráster de Natural Earth que cubre todo el planeta.

Utilizaremos la capa Cross Blended Hypso with Shaded Relief and Water. Descarga directa aquí.

Añadiendo el ráster a QGIS

1. Descomprimimos el archivo .zip
2. Abrimos QGIS.
3. Clic sobre el botón «Añadir capa raster»:
4. Buscamos la ubicación del archivo HYP_50M_SR_W.tif y lo añadimos:

Para acceder al algoritmo, en primer lugar debemos abrir la caja de herramientas ubicada bajo el menú Procesos:

Los algoritmos se encuentran en la sección Herramientas ráster:

Ejecutaremos el primer algoritmo: Generate XYZ tiles (Directory), para crear una estructura de directorios con imágenes ráster.

Se abrirá un cuadro de diálogo que completaremos del siguiente modo:

• En Extent debemos seleccionar una porción del mapa, ya que el algoritmo arrojará error si seleccionamos la extensión total de la capa.
• Minimun Zoom y Maximum zoom: Estableceremos un zoom mínimo de 0 y un zoom máximo de 7 (cada nivel de zoom incrementará el tamaño de las imágenes de forma exponencial).
• Sección DPI: 96 Como tamaño de tesela 96 pixeles.
• Tile format: Seleccionamos el formato PNG.
• Directorio de salida: creamos una carpeta nueva para el directorio de salida (en el que se crearán las imágenes).
• Output html (Leaflet): El algoritmo creará un visor webmapping basado en Leaflet. Haciendo clic en el botón con los tres puntitos seleccionamos la opción Guardar en archivo y seleccionamos el directorio TilesXYZ que acabamos de crear. Lo denominamos como visor (podemos poner cualquier otro nombre).

En la siguiente imagen vemos cómo quedaría:

Hacemos clic en ejecutar la generación de teselas.

Hacemos clic sobre el botón ejecutar y comenzará la generación de teselas, no debería tardar más de 1 minuto.

Vamos al directorio C:\data_dir\www\TilesXYZ en la que se han generado las teselas y deberíamos ver que existe una carpeta por cada uno de los niveles de zoom seleccionados y un archivo .html.

Cada carpeta contiene además una subcarpeta para las coordenadas X y luego las teselas reales con el nombre de la coordenada Y. El tamaño de las imágenes es de 256 x 256 píxeles.

En el directorio principal del directorio de mosaicos de nivel superior, encontramos el archivo HYP_50M_SR_W.html

Abrimos el archivo con el navegador:

Este es un visor sencillo para explorar las teselas que se ha creado utilizando la librería  de mapas web Leaflet.

Una vez abierto podemos movernos por el mapa acercarnos y alejarnos utilizando los botones del ratón.

En la siguiente entrada veremos cómo añadir las teselas que acabamos de crear en un visor web propio creado con OpenLayers o Leaflet:

Utilización de mapas base personalizados en OpenLayers y Leaflet (parte II)