fix: 导出图片使用异步方法

dev-demos/bugs/scene/demos/exportimg.tsx

@@ -0,0 +1,86 @@
+import { GaodeMap, Scene, ExportImage, PointLayer } from "@antv/l7";
+import React, { useState } from "react";
+// tslint:disable-next-line:no-duplicate-imports
+import { FunctionComponent, useEffect } from "react";
+
+const Demo: FunctionComponent = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [scene, setScene] = useState<Scene | undefined>();
+  const [imgSrc, setImgSrc] = useState("");
+
+  useEffect(() => {
+    const newScene = new Scene({
+      id: "map",
+      map: new GaodeMap({
+        style: "normal",
+        center: [120, 30],
+        pitch: 0,
+        zoom: 6.45,
+        WebGLParams: {
+          preserveDrawingBuffer: true
+        }
+      })
+      // logoVisible: false,
+    });
+
+    newScene.on("loaded", () => {
+      fetch(
+        "https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json"
+      )
+        .then((res) => res.json())
+        .then((data) => {
+          const pointLayer = new PointLayer({
+            autoFit: true
+          })
+            .source(data)
+            .shape("circle")
+            .size("mag", [1, 25])
+            .color("mag", (mag) => {
+              return mag > 4.5 ? "#5B8FF9" : "#5CCEA1";
+            })
+            .active(true)
+            .style({
+              opacity: 0.3,
+              strokeWidth: 1
+            });
+          newScene.addLayer(pointLayer);
+          setScene(newScene);
+        });
+    });
+  }, []);
+
+  return (
+    <>
+      <button
+        onClick={async () => {
+          setImgSrc(await scene.exportPng("png"));
+        }}
+      >
+        导出图层 PNG 图片
+      </button>
+      <button
+        onClick={async () => {
+          setImgSrc(await scene.exportPng("jpg"));
+        }}
+      >
+        导出图层 JPG 图片
+      </button>
+      <div
+        id="map"
+        style={{
+          height: "500px",
+          position: "relative"
+        }}
+      />
+      <div>
+        <div>截图展示：</div>
+        <img
+          src={imgSrc}
+          style={{ width: 200, height: 100, border: "1px solid #000" }}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Demo;

dev-demos/bugs/scene/exportimg.md

@@ -0,0 +1,3 @@
+### 导出图片
+
+<code src="./demos/exportimg.tsx"></code>

packages/component/src/control/exportImage.ts

@@ -28,10 +28,10 @@ export default class ExportImage extends ButtonControl<IExportImageControlOption
     };
   }
 
-  public getImage() {
-    const mapImage = this.mapsService.exportMap('png');
-    const layerImage = this.scene.exportPng('png');
-    return this.mergeImage(mapImage, layerImage);
+  public async getImage() {
+    const mapImage = await this.mapsService.exportMap('png');
+    const layerImage = await this.scene.exportPng('png');
+    return await this.mergeImage(mapImage, layerImage);
   }
 
   protected onClick = async () => {

packages/core/src/services/scene/ISceneService.ts

@@ -18,7 +18,7 @@ export interface ISceneService extends EventEmitter {
   render(): void;
   getSceneContainer(): HTMLDivElement;
   getMarkerContainer(): HTMLElement;
-  exportPng(type?: 'png' | 'jpg'): string;
+  exportPng(type?: 'png' | 'jpg'):  Promise<string> ;
   addFontFace(fontname: string, fontpath: string): void;
   destroy(): void;
 }

packages/core/src/services/scene/SceneService.ts

@@ -338,9 +338,10 @@ export default class Scene extends EventEmitter implements ISceneService {
     return this.$container as HTMLDivElement;
   }
 
-  public exportPng(type?: 'png' | 'jpg'): string {
+  public async exportPng(type?: 'png' | 'jpg'): Promise<string> {
     const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
-    this.render();
+    await this.render();
+
     const layersPng =
       type === 'jpg'
         ? (renderCanvas?.toDataURL('image/jpeg') as string)

packages/scene/src/IMapController.ts

@@ -82,5 +82,5 @@ export default interface IMapController {
   lngLatToPixel(lnglat: Point): IPoint;
   containerToLngLat(pixel: Point): ILngLat;
   lngLatToContainer(lnglat: Point): IPoint;
-  exportMap(type: 'jpg' | 'png'): string;
+  exportMap(type: 'jpg' | 'png'): Promise<string> ;
 }

packages/scene/src/index.ts

@@ -147,12 +147,12 @@ class Scene
   public getMapService(): IMapService<unknown> {
     return this.mapService;
   }
-  public exportPng(type?: 'png' | 'jpg'): string {
-    return this.sceneService.exportPng(type);
+  public async exportPng(type?: 'png' | 'jpg'): Promise<string> {
+    return await this.sceneService.exportPng(type);
   }
 
-  public exportMap(type?: 'png' | 'jpg'): string {
-    return this.sceneService.exportPng(type);
+  public async exportMap(type?: 'png' | 'jpg'): Promise<string>  {
+    return  await this.sceneService.exportPng(type);
   }
 
   public registerRenderService(render: any) {