Vue无服务应用中OpenLayers Map的rendercomplete事件仅触发一次如何解决

• 第一个核心错误：rendercomplete 事件绑定时你给回调函数加了括号 this.flagCallback()，这会直接在mounted阶段执行一次函数，把返回值（undefined）当成事件回调注册，后续事件触发时没有实际函数可以执行，自然不会再触发。
• 第二个逻辑错误：WMS图层更新参数后需要异步请求服务端资源，renderSync() 仅触发同步渲染流程，不会等待远程图层资源加载完成，你直接在renderSync()后调用myCallback拿到的是还没更新完的画布内容。

1. 修复全局事件绑定（如果需要监听所有渲染完成事件） #

把mounted中的事件绑定代码去掉括号，传入函数引用而非执行结果：

// 错误写法 直接执行函数
// this.map.on("rendercomplete", this.flagCallback());
// 正确写法 传入函数引用
this.map.on("rendercomplete", this.flagCallback);

2. 实现更新参数后仅触发一次自定义回调 #

如果不需要全局监听，只需要每次更新图层参数、所有图层渲染完成后执行一次myCallback，可以用OpenLayers的once方法绑定单次事件，触发后自动解绑，也不会被拖拽、缩放地图这类非参数更新的渲染操作触发：
你可以封装一个参数更新+渲染的通用方法，示例如下：

methods: {
  // 新增封装方法
  updateTimeAndRender() {
    this.setTimeSurface10();
    // 绑定单次rendercomplete事件，触发后自动解绑
    this.map.once('rendercomplete', this.myCallback);
    this.map.renderSync();
  },
  // 原来的mapToCanvasList修改为
  mapToCanvasList: function () {
    setTimeout(() => { 
      this.updateTimeAndRender();
      console.log("First"); }, 1000);
    setTimeout(() => { 
      this.updateTimeAndRender();
      console.log("2nd"); }, 2000);
    setTimeout(() => { 
      this.updateTimeAndRender();
      console.log("3rd"); }, 3000);

    setTimeout(() => { 
      this.gif.on('finished', function(blob) {
      window.open(URL.createObjectURL(blob));});
      this.gif.render();
      }, 4000);
  },
}

3. 可选：避免回调this指向异常 #

如果你的myCallback执行时出现this指向错误，可以在绑定时用bind绑定vue实例：

this.map.once('rendercomplete', this.myCallback.bind(this));

内容的提问来源于stack exchange，提问作者Curious