OpenLayers在Vue无服务器应用程序中通过Promise/AWait同步执行

我正在尝试创建一个for循环，该循环在每次迭代时更新OpenLayers地图的参数，一旦更新，它将提取地图画布的上下文并将其添加到GIF对象中。我需要这些来同步运行，以始终允许地图和层渲染，只有这样才能添加上下文。我目前比较棘手的解决方案是使用固定时间的setInterval，但正如question中建议的那样，我应该使用Async/AWait/Promises。我的问题是，我如何着手将我的函数包装在承诺中，并确保它们按顺序执行，同时保持对VUE应用程序的上下文(this)的访问权限？

我的for循环如下所示：

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);
    });
}

其中函数：

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});
}

---

解决方案

感谢OpenLayers的Hocevar先生的一些帮助(我建议您在Github Sponsor上支持他)，我为任何感兴趣的人找到了答案。

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});
},

如您所见，异步呈现整个方法并为renderComplete事件添加等待承诺可确保循环等待并执行myCallback，这会将呈现的上下文作为帧添加到GIF对象中。