无底图Scene画Geojson数据边界与填充，加载时长超10秒，问一下改怎么优化

[Mr-bean-z]

问题描述

组件代码如下，regions为乌干达Geojson格式数据，数据填入组件渲染超过10秒

const Gis: FC<IAntvGis> = ({ regions, isUpper = false }) => {
  const [scene, setScene] = useState<Scene>();

  useEffect(() => {
    const scenes = new Scene({
      id: 'map',
      map: new Map({
        zoom: 8,
        pitch: 45,
      }),
      logoVisible: false,
    });
    setScene(scenes);
  }, []);

  // 画区域边界，填充，名称
  useEffect(() => {
    if (regions.length && scene) {
      const regionNames = regions.map(item => item.properties);
      const regionData = regions.reduce(
        (prev: IBound[][], cur) => {
          prev[cur.level === regions[0].level ? 0 : 1].push(cur);
          return prev;
        },
        [[], []],
      );
      const boundaryLayer = getBoundaryLayer(regionData[1], isUpper ? '#202a36' : '#67768e');
      const regionNameLayer = new PointLayer().source(regionNames).shape('name', 'text');
      const regionFillLayer = isUpper
        ? new PolygonLayer({ autoFit: true, zIndex: 1 })
            .source({ type: 'FeatureCollection', features: regionData[1] })
            .shape('fill')
            .color('#2F3B4B')
        : new PolygonLayer({ autoFit: true, zIndex: 1 })
            .source({ type: 'FeatureCollection', features: regionData[1] })
            .shape('fill')
            .style({
              opacityLinear: {
                enable: true,
                dir: 'in',
              },
            })
            .color('#505f78');
      scene.addLayer(boundaryLayer);
      scene.addLayer(regionNameLayer);
      scene.addLayer(regionFillLayer);
      scene.render();
    }
  }, [regions, scene]);

  return <div id="map" className="w-full h-full"></div>;
};

重现链接

No response

重现步骤

No response

预期行为

No response

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[github-actions]

Hi @Mr-bean-z, Please star this repo if you find it useful! Thanks ⭐!
你好 @Mr-bean-z。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[github-actions]

hi @Mr-bean-z, welcome!

[lzxue]

数据是不是很大，如果顶点很多可以考虑抽稀

[Mr-bean-z]

数据是不是很大，如果顶点很多可以考虑抽稀

数据量有点大，但是看官网矢量瓦片的例子画中国城市边界都不卡，怎么才能做到这个优化，边界数据肯定没有这个大，怎样才能做到这个优化：https://l7.antv.antgroup.com/zh/examples/tile/vector/#chinamap

[lzxue]

简化一下数据吧：http://www.mapshaper.org/

官网的是切片的数据比较复杂