OpenLayers中如何正确释放已移除图层的WebGL资源

OpenLayers 6.7.0版本存在已知的WebGL资源清理漏洞：WebGLTileLayer调用原生dispose()方法时，不会主动销毁内部持有的WebGLHelper实例绑定的WebGL上下文，同时关联的GeoTIFFSource资源也不会被图层自动回收，最终导致上下文堆积触发浏览器的活跃上下文数量限制。

1. 扩展图层销毁逻辑，主动释放WebGL上下文 #

你需要在调用图层dispose()前，手动获取图层的渲染器、销毁其绑定的WebGL资源，同时同步销毁关联的数据源：

const previousLayers = [] as Layer<any>[]
map.getLayers().forEach((l : Layer<any>) => previousLayers.push(l))
map.getLayers().clear();

previousLayers.forEach(l => {
  // 先销毁图层关联的GeoTIFF数据源
  const source = l.getSource()
  if (source && typeof source.dispose === 'function') {
    source.dispose()
  }
  // 手动释放WebGL渲染器绑定的上下文资源
  const renderer = l.getRenderer()
  if (renderer && renderer.helper) {
    renderer.helper.dispose()
  }
  // 最后调用OpenLayers原生的图层销毁方法
  l.dispose()
})

2. 地图实例销毁时补充全局资源清理 #

如果你的场景中也会销毁地图实例，需要在地图销毁前补充全局渲染器的资源清理：

// 地图销毁前执行
const mapRenderer = map.getRenderer()
if (mapRenderer && mapRenderer.helper) {
  mapRenderer.helper.dispose()
}
map.dispose()

3. 版本升级方案（可选） #

如果可以调整依赖版本，OpenLayers 6.14.0及以上版本已经修复了WebGL图层的上下文自动清理问题，升级后仅调用原生Layer.dispose()即可满足资源释放需求。

清理逻辑落地后可以打开Chrome开发者工具的「性能」标签，录制图层增删操作的性能快照，查看WebGL上下文数量是否稳定在和地图实例数匹配的水平，不再持续增长即说明修复生效。

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