Estoy tratando de crear un ciclo for que en cada iteración actualice los parámetros de un mapa de OpenLayers y una vez que esté completo, extraiga el contexto del renderedcomplete y lo agregue a un objeto GIF. Necesito que se ejecuten sincrónicamente para permitir que el mapa y las capas siempre se representen y solo luego se agregue el contexto. Mi solución hacky en este momento es usar un setInterval de tiempo fijo, pero como se sugiere en esta pregunta , debería usar async/await/Promises. Mi pregunta es, ¿cómo haría para envolver mis funciones en una Promesa y asegurarme de que se ejecuten en una secuencia mientras mantengo el acceso al contexto ( this ) de la aplicación vue?
Mi bucle for sería algo como:
for(let i = 0 ; i < this.dateArraySurface10.length - 1 ; i++) { waterfall([ this.setTimeSurface10(), this.map.renderSync(), this.myCallback(), ], function(err){ console.log("Waterfall error : ",err); }); }donde las funciones son:
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" }); }, myCallback: function () { const mapCanvas = document.createElement('canvas'); const divElement = document.querySelector(".map"); mapCanvas.width = divElement.offsetWidth;//size[0]; mapCanvas.height = divElement.offsetHeight;//size[1]; const 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}); }Gracias a la ayuda del Sr. Hocevar en OpenLayers (a quien le sugiero que apoye si puede en Patrocinador de Github ) obtuve una respuesta para cualquier persona interesada.
async mapToCanvasList() { for(let i = 0 ; i < this.dateArraySurface10.length - 1 ; i++) { this.setTimeSurface10(); await new Promise(resolve => this.map.once('rendercomplete', resolve)); this.myCallback(); } this.gif.on('finished', function(blob) { window.open(URL.createObjectURL(blob)); }); this.gif.render(); }, myCallback: function () { const mapCanvas = document.createElement('canvas'); const divElement = document.querySelector(".map"); mapCanvas.width = divElement.offsetWidth;//size[0]; mapCanvas.height = divElement.offsetHeight;//size[1]; const 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}); },Como puede ver, renderizar todo el método de forma asíncrona y agregar una promesa de espera para el evento rendercomplete garantiza que el bucle espere y ejecute myCallback, que agrega el contexto renderizado como un marco al objeto GIF.