Cómo procesar imágenes raster en OpenLayers

OpenLayers es una librería JavaScript de código abierto ampliamente utilizada para mostrar mapas de forma interactiva en la web. Actualmente forma parte de los proyectos de Open Source Geospatial Foundation.

Permite utilizar un amplio número de recursos como son las capas de teselas de OSM, Bing, MapBox, Stamen así como los servicios de mapas de OGC. Podemos también utilizar capas vectoriales en múltiples formatos como: GeoJSON, TopoJSON, KML, GML, etc y por supuesto imágenes raster.

En el caso de las imágenes raster, OpenLayers tiene una función añadida: se puede realizar un procesamiento de la imagen para obtener una imagen nueva. Veamos cómo hacerlo.

ol.source.Raster

Para utilizar OpenLayers empezaremos por incluir en la cabecera <head> de una página web la hoja de estilo ol.css y la librería JavaScript ol.js. Para obtener más información sobre cómo crear un mapa con OpenLayers puedes consultar este otro este artículo de nuestro blog.

El elemento de la librería encargado del tratamiento de los datos raster en OpenLayers es: ol.source.Raster. Básicamente se trata de una función que realiza algún tipo de transformación en el valor de los pixel, es decir toma el valor de entrada de un pixel y nos devuelve un valor de salida. Se pueden definir varias opciones. Nosotros aplicaremos dos:

  • sources: es donde proporcionamos la capa de entrada que contiene los datos raster.
  • operation: es donde definimos la trasformación que haremos sobre los datos de entrada con el fin de obtener el dato de salida procesado.

Crear un mapa de elevaciones a partir de  una imagen raster

Como ejemplo de las posibilidades de OpenLayers en el tratamiento de imágenes raster, vamos a crear un mapa de elevación del terreno a partir de las imágenes de mapbox. Este recurso contiene un dato con la altitud de cada pixel que utilizaremos para crear nuestro mapa.

En primer lugar creamos el recurso a la capa de Mapbox.

A continuación, aplicamos la clase ol.source.Raster:

Como opciones pasamos el objeto elevation que habíamos creado anteriormente y como operación, asignamos el valor flood que explicamos a continuación. Como indicamos en el primer apartado podemos definir una función que transforme el valor del pixel. Eso lo realizamos con la siguiente función a la que llamamos flood:

Con esta función lo que buscamos es obtener un valor de pixel inicial. Establecemos un valor condicional en función de la altura, que almacenamos en la variable heigth. Si el valor heigth es mayor de 0 y menor del valor definido en data.level se establece una función de transformación en donde se asignan un nuevo valor a cada pixel.

Ahora hay que crear el mapa con OpenLayers:

Añadiendo un control para las elevaciones

Creamos un control slider que nos permita al desplazar el cursor, seleccionar la altitud. En el mapa se muestra el área que se encuentra por debajo de la cota seleccionada. Esto lo hacemos de la siguiente forma:

De esta parte del código destacamos dos elementos:

1.- El método .changed(), que sería el encargado de disparar los eventos cuando se producen modificaciones en el mapa. En este caso cuando modificamos la altura en el control de elevaciones.

2.-El evento beforeoperations, que es el que se muestra antes de que ninguna acción sea realizada sobre el mapa. En evento contrario es afteroperations que es el que se dispara una vez que la trasformación ha ocurrido.

Acompañando a esta parte JavaScript, necesitamos crear los elementos html para el control.

Por último creamos unos estilos css para el control.

Ejemplo al completo

Con el fin de facilitar la compresión del código, lo escribimos a continuación de forma completa:

Puedes ver el resultado a continuación:

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

2 comentarios en “Cómo procesar imágenes raster en OpenLayers”

  1. Muchas gracias Gonzalo por tu comentario.
    En este artículo tratamos el procesamiento de imágenes desde OpenLayers, En el caso de QGIS debería buscar la solución a tu problema en las entradas del blog MappingGIS referentes a QGIS. También puedes plantear la consulta a Diego, Aurelio… que son los especialistas en QGIS.

    Saludos

  2. Buenos días,

    enhorabuena por vuestra página. es fantástica para adentrarse en el mundo GIS.

    Tengo una duda, no sé si es el lugar más adecuado para ponerla.

    EStoy tratando de utilizar QGIS para comparar la evolución de un mismo cultivo en tiempos diferentes. Por ello, ,me vendría bien ver dos capas raster en ventanas paralelas, de modo que al trasladarme por una de ellas, la otra también se moviera y pudiera ver la misma ubicación espacial pero en dos momentos diferentes. ¿Es posible? gracias ¡¡

Los comentarios están cerrados.