antvis / antvis/L7

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

Open
#2,168 5 comments 3 reactions 1 assignee Claimed by @heiyexing View on GitHub
🌟 star good first issue
Dominant language
TypeScript
Stars
4.1k
Forks
656
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

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

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

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

;
};
```

### 重现链接

_No response_

### 重现步骤

_No response_

### 预期行为

_No response_

### 平台

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

### 屏幕截图或视频(可选)

_No response_

### 补充说明(可选)

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.