Vue无服务应用中使用Promise/await实现OpenLayers同步执行的方法

核心思路 #

将OpenLayers的renderedcomplete事件封装为Promise，结合async/await实现串行执行逻辑，所有方法定义在Vue的methods中即可天然保留Vue实例的this指向，无需额外绑定。

代码改造 #

1. 新增渲染等待方法 #

在Vue的methods中新增封装Promise的渲染等待方法，用于监听单次渲染完成事件：

waitForMapRender: function () {
  return new Promise((resolve) => {
    const renderListener = () => {
      // 触发后立即移除监听，避免重复执行
      this.map.un('rendercomplete', renderListener)
      resolve()
    }
    this.map.on('rendercomplete', renderListener)
  })
},

2. 原有方法保留 #

你原本的setTimeSurface10和myCallback方法无需修改，直接保留在methods中即可。

3. 改造循环逻辑 #

将循环逻辑封装为async方法，通过await保证每一步按顺序执行：

generateGif: async function () {
  try {
    // 每次循环都等待上一步全部执行完成才进入下一轮
    for(let i = 0 ; i < this.dateArraySurface10.length - 1 ; i++) {
      // 更新地图时间参数
      this.setTimeSurface10()
      // 触发地图同步渲染
      this.map.renderSync()
      // 等待所有图层、瓦片全部渲染完成
      await this.waitForMapRender()
      // 渲染完成后抓帧添加到GIF对象
      this.myCallback()
    }
    // 全部帧添加完成后可在此处执行GIF导出逻辑
    // 示例：this.gif.render()
    console.log('所有帧添加完成')
  } catch (err) {
    console.error("执行错误：", err)
  }
}

注意事项 #

• renderedcomplete事件会自动等待所有瓦片、矢量元素加载渲染完成后触发，比固定时长定时器的兼容性和准确性更高
• 所有方法均定义在Vue的methods中，内部this默认指向Vue实例，可正常访问this.gif、this.surface10等绑定属性
• 每次渲染完成后会主动移除事件监听，不会造成内存泄漏问题

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