无底图Scene画Geojson数据边界与填充,加载时长超10秒,问一下改怎么优化
- 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
Assessment
This issue has not been assessed yet.