如何修复OpenLayers热力图图层移除添加时的WebGL报错问题？

问题描述 #

我要实现OpenLayers热力图图层的可见性切换功能，首次点击切换按钮时热力图能正常隐藏，但第二次点击时控制台出现两条WebGL错误：

index.html:1 [.WebGL-0x12001b3e300] GL_INVALID_OPERATION: Insufficient buffer size.
index.html:1 [.WebGL-0x12001b3e300] GL_INVALID_OPERATION: Insufficient buffer size.

推测移除图层时热力图相关资源未被正确清理，想确认这是否属于OpenLayers的bug，以及如何解决或规避该问题。

相关代码 #

JavaScript #

const osm = new ol.source.OSM();

osm.setTileGridForProjection(
  "EPSG:4326",
  ol.tilegrid.createXYZ({ extent: [-180, -90, 180, 90] })
);

const outageSource = new ol.source.Vector();

const heatmapLayer = new ol.layer.Heatmap({
  source: outageSource,
  blur: 20,
  radius: 20,
  zIndex: 10,
  weight: function (feature) {
    return feature.get("weight");
  },
});

const feature = new ol.Feature({
  geometry: new ol.geom.Point([-77.0231007567732604, 38.902979974562264]),
  weight: 1
});

outageSource.addFeature(feature);

const tileLayer = new ol.layer.Tile({ source: osm });

const map = new ol.Map({
  target: "map",
  layers: [tileLayer, heatmapLayer],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [-77.0231007567732604, 38.902979974562264],
    zoom: 18
  })
});

ol.proj.get("EPSG:4326").setExtent([-180, -85, 180, 85]);

let visible = true;

function toggleHeatmap() {
  if (visible) {
    map.removeLayer(heatmapLayer);
  } else {
    map.addLayer(heatmapLayer);
  }

  visible = !visible;
}

CSS #

#map {
  height: 200px;
  width: 200px;
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>

<div id="map"></div>
<button onclick="toggleHeatmap();">Toggle Heatmap</button>

问题分析 #

这个错误确实是OpenLayers热力图图层在移除后重新添加时的WebGL资源清理不彻底导致的，属于特定场景下的框架bug，在部分版本中存在WebGL资源复用的逻辑问题。

解决方案 #

方案一：直接切换图层可见性（推荐） #

不需要移除或添加图层，直接调用图层的setVisible方法切换可见状态，这是最符合OpenLayers最佳实践的方式，从根源上避免资源清理问题：

let visible = true;

function toggleHeatmap() {
  heatmapLayer.setVisible(!visible);
  visible = !visible;
}

方案二：重新创建图层实例（按需使用） #

如果业务逻辑必须移除/添加图层，可在重新添加前创建新的热力图图层实例，并清理旧图层资源：

let visible = true;
let currentHeatmapLayer = heatmapLayer;

function toggleHeatmap() {
  if (visible) {
    map.removeLayer(currentHeatmapLayer);
    // 手动清理旧图层资源
    currentHeatmapLayer.dispose();
  } else {
    // 创建新的热力图图层实例
    currentHeatmapLayer = new ol.layer.Heatmap({
      source: outageSource,
      blur: 20,
      radius: 20,
      zIndex: 10,
      weight: function (feature) {
        return feature.get("weight");
      },
    });
    map.addLayer(currentHeatmapLayer);
  }

  visible = !visible;
}

优先选择方案一，它的性能更优且逻辑更简洁。

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