LarkMap
LarkMap copied to clipboard
🥰 图片/字体资源注册异步方式
💻 图片/字体资源统一注册使用方式
🏞 cene.addImage 是异步的,图层可能先渲染导致没有出来,当下解决的方案 await scene.addImage 完成再渲染图层
import { LarkMap } from '@antv/larkmap';
export default () => {
const [loadedImages, setLoadedImages] = useState(false);
const onSceneLoaded = (scene: Scene) => {
scene.addImage('name', url).then(() => {
setLoadedImages(true);
})
console.log(scene);
};
return (
<LarkMap mapType="Gaode" style={{ height: '300px' }} onSceneLoaded={onSceneLoaded}>
{ loadedImages && <PointLayer {...options} source={source} /> }
</LarkMap>
);
};
🧐 What does the proposed API look like
import { LarkMap } from '@antv/larkmap';
const images = [
{ id: '01', image: 'https://gw.alipayobjects.com/zos/basement_prod/604b5e7f-309e-40db-b95b-4fac746c5153.svg' },
{ id: '02', image: 'https://gw.alipayobjects.com/zos/basement_prod/30580bc9-506f-4438-8c1a-744e082054ec.svg' },
{ id: '03', image: 'https://gw.alipayobjects.com/zos/basement_prod/7aa1f460-9f9f-499f-afdf-13424aa26bbf.svg' },
];
export default () => {
const onSceneLoaded = (scene: Scene) => {
console.log(scene);
};
return (
<LarkMap mapType="Gaode" style={{ height: '300px' }} onSceneLoaded={onSceneLoaded} registerImages={images} >
<PointLayer {...options} source={source} />
</LarkMap>
);
};
🚑 Any additional
统一管理缺点就是加载资源失败,还是需要 try catch 不能让所有图层出不来