Cómo visualizar series temporales con OpenLayers y servicios WMS

Las series temporales en mapas nos permiten visualizar cómo cambia un dato (por ejemplo, temperatura, precipitación, viento) a lo largo de un periodo de tiempo. En este artículo veremos cómo combinar un servicio WMS con capacidad de dimensión de tiempo con OpenLayers para mostrar un mapa que presenta estas variaciones temporales. Con este fin, utilizaremos como fuente de datos el servicio WMS disponible en la página National Weather Service o NWS.

Obviamente, no todos los servicios OGC tienen soporte para series temporales, por tanto es importante asegurarnos de las capacidades realizando una petición al servidor (?REQUEST=GetCapabilities). Normalmente debe soportar la propiedad «TIME«, aunque como veremos aquí no siempre es así, puesto que en nuestro ejemplo, el servicio WMS utiliza la propiedad «VTIT» (valid-time / issuance time) para la dimensión temporal.

Comprobar capacidades del servicio

Como apuntábamos antes, lo primero es ver las capacidades del servicio y asegurarnos que soporta/tiene datos temporales. Para ello realizaremos una petición. La NWS expone varios endpoints distintos, en mi caso elegiré el endpoint de Alaska: https://digital.weather.gov/ndfd.alaska/wms?REQUEST=GetCapabilities.

Cargar los datos en nuestro visor

Para no alargar mucho, vamos a dar por hecho cómo crear un mapa básico con OpenLayer.

Agregar nuestra capa temporal no se diferencia de como cargar cualquier capa «estática»:

const nwsWmsLayer = new TileLayer({
    source: new TileWMS({
        url: 'https://digital.weather.gov/ndfd/wms',
        params: {
            'LAYERS': 'ndfd.alaska.windspd.points.metric', // Capa de velocidad del viento
            'FORMAT': 'image/png',
            'VERSION': '1.3.0',
            'SEASON': 0, // temporada, según la documentación del servicio
            'VTIT': '2025-10-21T09:00', // valor temporal inicial
            'CRS': 'EPSG:3857'
        }
    })
});
map.addLayer(nwsWmsLayer);

Si todo está correcto, deberíamos de ver unas etiquetas con la velocidad del viento en distintos puntos de Alaska.

Animar la serie temporal

Todo está muy bien, pero no podemos movernos o explorar la serie, simplemente vemos la capa con la fecha inicial especificada. Para convertirlo en una serie temporal (animar entre distintos tiempos) puedes usar un control de “Reproducir/Pausar” y actualizar el parámetro temporal periódicamente con los valores obtenidos al consultar el servicio.

De nuevo, para simplificar y agilizar, simplemente vamos a crear un una matriz con los valores de la serie de nuestra capa seleccionada que posteriormente utilizaremos para iterar y construir nuestra animación:

const vtitValues = [
    '2025-10-21T09:00', '2025-10-21T12:00', '2025-10-21T15:00', '2025-10-21T18:00', '2025-10-21T21:00', '2025-10-22T00:00',
    '2025-10-22T03:00', '2025-10-22T06:00', '2025-10-22T09:00', '2025-10-22T12:00', '2025-10-22T15:00', '2025-10-22T18:00',
    '2025-10-22T21:00', '2025-10-23T00:00', '2025-10-23T03:00', '2025-10-23T06:00', '2025-10-23T09:00', '2025-10-23T12:00',
    '2025-10-23T15:00', '2025-10-23T18:00', '2025-10-23T21:00', '2025-10-24T00:00', '2025-10-24T03:00', '2025-10-24T06:00',
    '2025-10-24T09:00', '2025-10-24T12:00', '2025-10-24T15:00', '2025-10-24T18:00', '2025-10-24T21:00', '2025-10-25T00:00',
    '2025-10-25T06:00', '2025-10-25T12:00', '2025-10-25T18:00', '2025-10-26T00:00', '2025-10-26T06:00', '2025-10-26T12:00',
    '2025-10-26T18:00', '2025-10-27T00:00', '2025-10-27T06:00', '2025-10-27T12:00', '2025-10-27T18:00', '2025-10-28T00:00',
    '2025-10-28T06:00', '2025-10-28T12:00', '2025-10-28T18:00', '2025-10-29T00:00'
];

Antes de continuar, editamos nuestro documento HTML para incluir un pequeño bloque de controles que nos permitirá iniciar, pausar y visualizar el instante temporal actual de la serie. Estos botones se situarán en la esquina superior derecha del mapa para que no interfieran con la visualización de las capas.

<div style="position: absolute; top: 10px; right: 10px; z-index: 1000;">
    <button id="play">Reproducir</button>
    <button id="pause">Pausar</button>
    <span id="info"></span>
</div>

A continuación, añadimos un poco de JavaScript para gestionar la animación. Este código recorre la lista de valores de tiempo, actualizando el parámetro VTIT de la capa WMS en cada paso y mostrando la marca temporal activa en el elemento <span>.

// Control de animación
let i = 0;
function nextFrame() {
    i = (i + 1) % vtitValues.length;
    nwsWmsLayer.getSource().updateParams({ 'VTIT': vtitValues[i] });
    document.getElementById('info').innerText = vtitValues[i];
}
// Reproducir la animación en bucle
let interval = null;
document.getElementById('play').addEventListener('click', () => {
    if (interval) return;
    interval = setInterval(nextFrame, 3000);
});
// Pausar la animación
document.getElementById('pause').addEventListener('click', () => {
    clearInterval(interval);
    interval = null;
});

Et voilà, al pulsar Reproducir, el mapa irá actualizando automáticamente la capa meteorológica cada tres segundos, y con Pausar podremos detener la secuencia en cualquier momento. Así obtenemos una forma que, aunque simple y algo rudimentaria, nos permite explorar la serie temporal y visualizar la evolución de las condiciones meteorológicas de manera dinámica.

Por supuesto, siempre podemos ampliar esta funcionalidad implementando plugins o extensiones de terceros (por ejemplo, controles de línea de tiempo más avanzados, deslizadores animados/timelines o librerías de interfaz) para mejorar la interacción y la experiencia del usuario.

Etiquetas: Openlayers, sig, web mapping