Turf.js squareGrid结合Mapbox GL渲染网格报错无法正常显示

• 计算量严重溢出：你在地图初始化前就调用squareGrid生成覆盖全球范围的10米网格，该范围下网格单元总量超过3000亿，直接在主线程执行该计算会占用数十GB内存、阻塞主线程数分钟，等计算完成时Mapbox的load事件早已触发完毕，回调根本拿不到预计算的网格数据，直接触发时序报错、渲染异常。
• 实例引用写法冲突：你用map.on("load")的原生Mapbox实例事件绑定写法，回调内却使用map.current的React Ref取值方式调用实例方法，两种写法混用大概率拿到undefined的实例对象，直接抛出方法调用错误。
• 渲染逻辑不符合性能上限：即便你真的生成全量全球10米网格，一次性将百亿级要素传入GeoJSON数据源，会直接超出WebGL的顶点渲染上限，导致页面崩溃、显卡驱动重置。

核心原则：禁止预生成全球范围小尺寸网格，按当前视口+缩放等级动态生成视野内的可见网格。10米精度的网格仅在缩放等级15级以上（街道级视角）有显示意义，低缩放等级下无需计算、无需渲染，从根源上控制计算量和渲染量。

修正后可直接运行的代码如下：

// 防抖工具，避免地图拖动/缩放时频繁触发计算
function debounce(func, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  }
}

map.on("load", function () {
  // 初始化时先挂载空的网格数据源和图层，不提前塞入全量数据
  map.addSource("grid", {
    type: "geojson",
    data: {
      type: "FeatureCollection",
      features: []
    }
  });

  map.addLayer({
    id: "grid",
    type: "line",
    source: "grid",
    // 10米网格仅在15级以上显示，低等级自动隐藏
    minzoom: 15,
    paint: {
      "line-color": "red",
      "line-width": 1
    }
  });

  // 视口变化时动态更新当前视野内的网格
  const updateGrid = debounce(() => {
    const currentZoom = map.getZoom();
    // 缩放等级低于15时直接清空网格，降低性能消耗
    if (currentZoom < 15) {
      map.getSource("grid").setData({
        type: "FeatureCollection",
        features: []
      });
      return;
    }
    // 取当前视口范围，外扩10%避免拖动到边缘出现网格空白
    const rawBbox = map.getBounds().toArray().flat();
    const lngPadding = (rawBbox[2] - rawBbox[0]) * 0.1;
    const latPadding = (rawBbox[3] - rawBbox[1]) * 0.1;
    const renderBbox = [
      rawBbox[0] - lngPadding,
      rawBbox[1] - latPadding,
      rawBbox[2] + lngPadding,
      rawBbox[3] + latPadding
    ];
    const cellSide = 10;
    const options = { units: "meters" };
    // 仅生成当前视野内的网格，要素量控制在千级，无卡顿
    const viewSquares = squareGrid(renderBbox, cellSide, options);
    map.getSource("grid").setData(viewSquares);
  }, 100)

  // 绑定地图交互事件
  map.on("moveend", updateGrid);
  map.on("zoomend", updateGrid);
  // 首次加载完成执行一次初始渲染
  updateGrid();
});

适配提示 #

• 若在React框架下使用react-map-gl等封装库，将代码中直接调用map实例方法的位置统一替换为map.current调用即可，保证实例引用逻辑一致。
• 若需要进一步降低主线程阻塞，可将squareGrid网格计算逻辑移入Web Worker执行，计算完成后再将结果传回主线程更新数据源。
• 不要尝试预加载/预生成全球范围的10米网格：仅存储该网格的几何数据就需要数十PB存储空间，没有任何前端场景可以承载该量级的数据。

内容的提问来源于stack exchange，提问作者Mehmet Aziz Algüllü