Mapbox GL绘制大量可识别多边形的性能优化问询

我正在使用Mapbox GL在地图上绘制大量等尺寸多边形，当前采用addLayer方法实现，但当多边形数量较多时，地图性能大幅下降、操作卡顿。我需要一种更高效的绘制方式，同时需保证每个多边形可识别以支持交互。目前绘制50×50个矩形后页面已严重卡顿，我的实现代码如下：

useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: "mapbox://styles/mapbox/light-v11",
      center: origin,
      zoom: 22, // starting zoom
    });
    map.on("load", () => {
      // Add a data source containing GeoJSON data.
      var iter;
      var destination = [-86.872238, 40.46873];
      for (var i = 0; i < 50; i++) {
        for (var j = 0; j < 50; j++) {
          var pixelOrigin = merc.px(origin, 22);
          const pixelDest1 = [pixelOrigin[0], pixelOrigin[1] - 38];
          const pixelDest2 = [pixelOrigin[0] + 38, pixelOrigin[1] - 38];
          const pixelDest3 = [pixelOrigin[0] + 38, pixelOrigin[1]];
          const cordDest1 = merc.ll(pixelDest1, 22);
          const cordDest2 = merc.ll(pixelDest2, 22);
          const cordDest3 = merc.ll(pixelDest3, 22);
          if (j == 0) {
            iter = cordDest3;
          }
          map.addSource("x: " + i + "y: " + j, {
            type: "geojson",
            data: {
              type: "Feature",
              geometry: {
                type: "Polygon",
                // These coordinates outline Maine.
                coordinates: [
                  [origin, cordDest1, cordDest2, cordDest3, origin],
                ],
              },
            },
          });
          origin = cordDest1;

          map.addLayer({
            id: "x: " + i + "y: " + j,
            type: "line",
            source: "x: " + i + "y: " + j,
            layout: {},
            paint: {
              "line-color": "#808080",
              "line-width": 1,
            },
          });
        }
        origin = iter;
      }

      // Add a black outline around the polygon.
    });

    // Clean up on unmount
    return () => map.remove();
  }, []);

优化方案 #

• 合并所有多边形到单个GeoJSON数据源
  你的核心问题是给每个多边形单独创建source和layer，2500个数据源+图层会让Mapbox的渲染压力陡增。正确的做法是把所有多边形Feature整合到一个FeatureCollection，只创建一个source和一个图层，同时给每个Feature添加唯一标识属性用于交互。

  优化后的示例代码：

  useEffect(() => {
      const map = new mapboxgl.Map({
        container: mapContainerRef.current,
        style: "mapbox://styles/mapbox/light-v11",
        center: origin,
        zoom: 22,
      });
  
      map.on("load", () => {
        const features = [];
        let currentOrigin = [...origin]; // 避免修改原始origin变量
        let iter;
  
        for (let i = 0; i < 50; i++) {
          for (let j = 0; j < 50; j++) {
            const pixelOrigin = merc.px(currentOrigin, 22);
            const pixelDest1 = [pixelOrigin[0], pixelOrigin[1] - 38];
            const pixelDest2 = [pixelOrigin[0] + 38, pixelOrigin[1] - 38];
            const pixelDest3 = [pixelOrigin[0] + 38, pixelOrigin[1]];
            const cordDest1 = merc.ll(pixelDest1, 22);
            const cordDest2 = merc.ll(pixelDest2, 22);
            const cordDest3 = merc.ll(pixelDest3, 22);
  
            if (j === 0) {
              iter = cordDest3;
            }
  
            // 给每个多边形添加唯一标识属性
            features.push({
              type: "Feature",
              properties: {
                gridId: `x${i}-y${j}`,
                x: i,
                y: j
              },
              geometry: {
                type: "Polygon",
                coordinates: [[currentOrigin, cordDest1, cordDest2, cordDest3, currentOrigin]]
              }
            });
  
            currentOrigin = cordDest1;
          }
          currentOrigin = iter;
        }
  
        // 只添加一个数据源
        map.addSource("grid-polygons", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: features
          }
        });
  
        // 只添加一个图层
        map.addLayer({
          id: "grid-lines",
          type: "line",
          source: "grid-polygons",
          layout: {},
          paint: {
            "line-color": "#808080",
            "line-width": 1
          }
        });
  
        // 实现点击交互，识别具体多边形
        map.on("click", "grid-lines", (e) => {
          const targetFeature = e.features[0];
          if (targetFeature) {
            console.log("选中的网格：", targetFeature.properties.gridId);
            // 这里可以添加高亮、弹窗等交互逻辑
          }
        });
  
        // 鼠标悬停切换光标（提升交互体验）
        map.on("mouseenter", "grid-lines", () => {
          map.getCanvas().style.cursor = "pointer";
        });
        map.on("mouseleave", "grid-lines", () => {
          map.getCanvas().style.cursor = "";
        });
      });
  
      return () => map.remove();
    }, [origin]);
  

• 超大规模数据用矢量瓦片（可选）
  如果后续多边形数量远超2500，可以用工具（比如tippecanoe）把数据预先生成矢量瓦片，然后通过vector类型的source加载，性能会比GeoJSON更稳定。

• 额外性能优化细节

  • 提前计算网格坐标增量：避免在循环中重复调用merc.px和merc.ll，可以先算出单个网格的宽高对应的地理坐标差值，循环里直接累加即可
  • 设置图层可见范围：通过minzoom和maxzoom让图层只在合适的缩放级别显示，避免不必要的渲染
  • 保持几何简洁：每个矩形只保留必要的5个坐标点，不要添加冗余节点

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