Tengo un mapa OpenLayers que tiene capas WMS con pasos de tiempo. Estoy tratando de crear un bucle que actualice el tiempo en cada paso y, una vez renderizado, guarde la imagen. Actualmente he tomado de la documentación oficial de OpenLayers que crea un elemento de lienzo que luego se completa con el elemento de mapa. Tengo un ciclo que parece funcionar pero sigue descargando solo el primer paso (aunque sé que mi función de tiempo de actualización funciona).

 mapToCanvasList: function () { for(let i = 0 ; i < 10 ; i++) { this.renderflag = false; this.setTimeSurface10(); this.map.renderSync(); this.myCallback(); this.map.on('rendercomplete', this.flagCallback()); if (this.renderflag) continue; } }, flagCallback: function () { this.renderflag = true; }, myCallback: function () { this.renderflag = false var mapCanvas = document.createElement('canvas'); var divElement = document.querySelector(".map"); mapCanvas.width = divElement.offsetWidth;//size[0]; mapCanvas.height = divElement.offsetHeight;//size[1]; var mapContext = mapCanvas.getContext('2d'); Array.prototype.forEach.call( document.querySelectorAll('.ol-layer canvas'), function (canvas) { if (canvas.width > 0) { const opacity = canvas.parentNode.style.opacity; mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); const transform = canvas.style.transform; const matrix = transform .match(/^matrix\(([^\(]*)\)$/)[1] //eslint-disable-line .split(',') .map(Number); CanvasRenderingContext2D.prototype.setTransform.apply(mapContext,matrix); mapContext.drawImage(canvas, 0, 0); } } ); this.gif.addFrame(mapCanvas, {copy:true, delay: 200}); mapCanvas.remove(); this.renderflag = true; }, setTimeSurface10: function () { if (this.currentTimeSurface10 === null) { this.currentTimeSurface10 = this.startTimeSurface10; } else if (this.currentTimeSurface10 >= this.endTimeSurface10) { this.currentTimeSurface10 = this.startTimeSurface10; } else { this.currentTimeSurface10 = new Date( this.currentTimeSurface10.setMinutes(this.currentTimeSurface10.getMinutes() + 60) ); } this.surface10.getSource().updateParams({ TIME: this.currentTimeSurface10.toISOString().split(".")[0] + "Z" }); }