I have a Vue serverless web application which has an OpenLayers map which is initialized in mounted and populated by ImageWMS layers which are updated by functions. I call this.map.renderSync() after every update parameters action and then try to execute another function when the rendering of all layers is complete (loaded and rendered all layers as the description of the rendercomplete event describes). To my surprise this.map.on("rendercomplete",this.myFunction())only fires once, when the map is initially rendered in mounted. What am I missing and how can I get this.myFunction() executed if and only if all the layers have been loaded and rendered after I update their parameters?

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

CodePudding user response：

this.map.on has 2 arguments, the name of the event as string ("rendercomplete"), and a callback function. Your callback function is this.flagCallback, without the (). You can see the console logging once, because the function is invoked once when the listener is created.