在Vue无服务器Web应用程序中不会为OpenLayers地图对象触发事件 [英] Events do not fire for an OpenLayers Map object in a Vue serverless web application

问题描述

我有一个Vue无服务器Web应用程序，它有一个OpenLayers地图，它在mounted中初始化，并由ImageWMS层填充，ImageWMS层由函数更新。我在每个更新参数操作之后调用this.map.renderSync()，然后在所有层的呈现完成时尝试执行另一个函数(如rendercomplete事件描述的那样加载和呈现所有层)。令我惊讶的是，当贴图最初在mounted中呈现时，this.map.on("rendercomplete",this.myFunction())只会触发一次。我遗漏了什么？如果且仅当我更新所有层的参数后，所有层都已加载并渲染，我如何才能执行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");
    }

推荐答案

this.map.on有两个参数，事件名称为字符串("rendercomplete")和一个回调函数。您的回调函数是this.flagCallback，没有()。您可以看到一次控制台日志记录，因为该函数在创建侦听器时调用一次。

这篇关于在Vue无服务器Web应用程序中不会为OpenLayers地图对象触发事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！