在Vue无服务器Web应用程序中不会为OpenLayers地图对象触发事件

async mounted() {
    this.map = new Map({
        target: this.$refs['map'],
        layers: [
            this.osm,
            this.fwhotspots,
            this.surface25,
            this.surface10
        ],
        view: new View({
            center: fromLonLat([-97, 43]),
            zoom: 4
        })
    });
    this.map.on("rendercomplete", this.flagCallback());
},
methods: {
    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" });
    },
    flagCallback: function () {
        console.log("RenderComplete Callback");
    },
    mapToCanvasList: function () {
        setTimeout(() => { 
            this.setTimeSurface10();
            this.map.renderSync();
            this.myCallback();
            console.log("First"); }, 1000);
        setTimeout(() => { 
            this.setTimeSurface10();
            this.map.renderSync();
            this.myCallback();
            console.log("2nd"); }, 2000);
        setTimeout(() => { 
            this.setTimeSurface10();
            this.map.renderSync();
            this.myCallback();
            console.log("3rd"); }, 3000);

        setTimeout(() => { 
            this.gif.on('finished', function(blob) {
            window.open(URL.createObjectURL(blob));});
            this.gif.render();
            }, 4000);
    },
    myCallback: function () {
        console.log("Callback Called");
        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});
        console.log("Callback End");
    }