Vue 无服务器 Web 应用程序中的 OpenLayers Map 对象不会触发事件

Question

我有一个 Vue 无服务器 Web 应用程序，它有一个 OpenLayers 地图，它在 mounted 中初始化并由 ImageWMS 图层填充，这些图层由函数更新。我在每次更新参数操作后调用 this.map.renderSync()，然后在所有层的渲染完成时尝试执行另一个函数（如 rendercomplete 事件描述的那样加载并渲染所有层）。令我惊讶的是 this.map.on("rendercomplete",this.myFunction()) 只触发一次，当地图最初在 mounted 中渲染时。当且仅当所有图层在我更新参数后都已加载和渲染时，我缺少什么以及如何才能执行 this.myFunction()？

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

Answer 1

this.map.on 有 2 个参数，事件名称为字符串 ("rendercomplete")，以及一个回调函数。您的回调函数是 this.flagCallback，没有 ()。可以看到console logging一次，因为创建listener的时候调用了一次函数

Vue 无服务器 Web 应用程序中的 OpenLayers Map 对象不会触发事件

Events do not fire for an OpenLayers Map object in a Vue serverless web application

javascript

vue.js

openlayers