🥰 图片/字体资源注册异步方式

[lvisei]

💻 图片/字体资源统一注册使用方式

🏞 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 不能让所有图层出不来