解决百度地图渲染中“Cannot read properties of undefined (reading ‘texture’)”问题

问题背景

在使用 MapVGL（百度地图的WebGL可视化库）或类似WebGL技术时，开发者可能会遇到以下两种典型报错：

Cannot read properties of undefined (reading 'texture')
this.frameBuffer.framebuffer.texture

这些错误通常出现在页面切换（如显示/隐藏地图容器）、组件销毁重建或动态操作WebGL资源时。本文将分析错误原因并提供完整解决方案。

1. 错误原因分析

1.1 WebGL上下文丢失

当浏览器检测到页面元素（如地图容器）被隐藏（display: none 或 v-show 切换）时，WebGL的上下文（WebGL Context）会被浏览器主动释放 ，导致已创建的纹理（Texture）、帧缓冲（Framebuffer）等资源失效。此时，如果代码仍尝试访问这些资源，就会抛出类似 texture 属性未定义的错误。

典型场景：

切换页面标签页时隐藏地图容器。
使用 v-show 控制地图显示时，频繁切换导致WebGL资源丢失。

1.2 实例未正确销毁

若未在组件销毁或隐藏时手动清理 MapVGL 的 View 或图层实例，残留的引用可能会继续访问已被释放的WebGL资源，从而触发错误。

错误示例：

javascript 复制代码

// 未销毁实例的代码
export default {
  beforeDestroy() {
    // 忘记销毁View或图层
  }
}

1.3 容器尺寸异常

在容器尺寸为0（如隐藏状态下初始化地图）时创建WebGL资源，可能导致纹理或帧缓冲无法正确初始化，后续访问时会因资源未创建成功而报错。

2. 解决方案

2.1 显式销毁并重建WebGL实例

在组件隐藏或销毁时，手动清理MapVGL的 View 和图层实例，并在显示时重新初始化。

代码示例：

kotlin 复制代码

// Vue组件中
export default {
  data() {
    return {
      map: null,
      view: null,
      layer: null,
    };
  },
  methods: {
    // 初始化地图和MapVGL
    initMap() {
      this.map = new BMap.Map("map-container");
      this.view = new mapvgl.View({ map: this.map });
      this.layer = new mapvgl.TripsLayer();
      this.view.addLayer(this.layer);
    },
    // 销毁实例
    destroyInstances() {
      if (this.layer) {
        this.view.removeLayer(this.layer);
        this.layer.destroy();
        this.layer = null;
      }
      if (this.view) {
        this.view.destroy();
        this.view = null;
      }
    },
  },
  watch: {
    isVisible(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          // 确保容器已渲染
          this.destroyInstances(); // 先销毁旧实例
          this.initMap(); // 重新初始化
        });
      } else {
        this.destroyInstances(); // 隐藏时清理资源
      }
    },
  },
  beforeDestroy() {
    this.destroyInstances();
    if (this.map) this.map.destroy();
  },
};

2.2 确保容器尺寸有效

在初始化或显示地图前，检查容器尺寸是否合法（宽度和高度不为0）。

kotlin 复制代码

showMap() {
  this.isVisible = true;
  this.$nextTick(() => {
    const container = document.getElementById("map-container");
    if (container.offsetWidth === 0 || container.offsetHeight === 0) {
      console.error("地图容器尺寸异常！");
      return;
    }
    if (!this.map) this.initMap();
    else this.map.checkResize(); // 调整地图尺寸
  });
}

2.3 处理WebGL上下文丢失事件

监听WebGL上下文丢失事件，主动释放资源并在上下文恢复后重新初始化。

javascript 复制代码

initMap() {
  this.map = new BMap.Map("map-container");
  const canvas = this.map.getRenderer().canvas;

  // 监听上下文丢失
  canvas.addEventListener("webglcontextlost", (e) => {
    e.preventDefault();
    this.destroyInstances(); // 主动销毁资源
  });

  // 上下文恢复后重新初始化
  canvas.addEventListener("webglcontextrestored", () => {
    this.initMap();
  });

  this.view = new mapvgl.View({ map: this.map });
}

3. 关键优化点

生命周期管理 ：在 beforeDestroy 和隐藏时彻底销毁实例，内存泄漏。
异步时序控制 ：使用 this.$nextTick 确保DOM更新完成后再操作容器。
防御性编程：访问WebGL资源前检查实例是否存在。

4. 总结

Cannot read properties of undefined (reading 'texture') 和 this.frameBuffer.framebuffer.textur 错误的本质是 WebGL资源失效后仍被访问。通过以下步骤彻底解决：

显式销毁实例：在隐藏或组件销毁时清理资源。
按需重建：显示时重新初始化MapVGL实例。
处理WebGL上下文事件：监听并恢复丢失的上下文。
检查代码拼写：避免低级错误。

遵循上述方案，可显著提升WebGL应用的稳定性，避免因页面动态操作导致的渲染异常。