From dd1ccb7d0342ed35f7fc4b8d64bdc95477c9c3b5 Mon Sep 17 00:00:00 2001 From: lzxue Date: Tue, 20 Dec 2022 20:25:22 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E5=BC=82=E6=AD=A5=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dev-demos/bugs/scene/demos/exportimg.tsx | 86 +++++++++++++++++++ dev-demos/bugs/scene/exportimg.md | 3 + packages/component/src/control/exportImage.ts | 8 +- .../core/src/services/scene/ISceneService.ts | 2 +- .../core/src/services/scene/SceneService.ts | 5 +- packages/scene/src/IMapController.ts | 2 +- packages/scene/src/index.ts | 8 +- 7 files changed, 102 insertions(+), 12 deletions(-) create mode 100644 dev-demos/bugs/scene/demos/exportimg.tsx create mode 100644 dev-demos/bugs/scene/exportimg.md diff --git a/dev-demos/bugs/scene/demos/exportimg.tsx b/dev-demos/bugs/scene/demos/exportimg.tsx new file mode 100644 index 0000000000..9bb14f0fff --- /dev/null +++ b/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(); + 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 ( + <> + + +
+
+
截图展示：
+ +
+ + ); +}; + +export default Demo; diff --git a/dev-demos/bugs/scene/exportimg.md b/dev-demos/bugs/scene/exportimg.md new file mode 100644 index 0000000000..dc3707a6d6 --- /dev/null +++ b/dev-demos/bugs/scene/exportimg.md @@ -0,0 +1,3 @@ +### 导出图片 + + diff --git a/packages/component/src/control/exportImage.ts b/packages/component/src/control/exportImage.ts index ee6381ed0b..693f194180 100644 --- a/packages/component/src/control/exportImage.ts +++ b/packages/component/src/control/exportImage.ts @@ -28,10 +28,10 @@ export default class ExportImage extends ButtonControl { diff --git a/packages/core/src/services/scene/ISceneService.ts b/packages/core/src/services/scene/ISceneService.ts index 9ff8b6d327..307270935f 100644 --- a/packages/core/src/services/scene/ISceneService.ts +++ b/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 ; addFontFace(fontname: string, fontpath: string): void; destroy(): void; } diff --git a/packages/core/src/services/scene/SceneService.ts b/packages/core/src/services/scene/SceneService.ts index 2fa9f520b0..c7f31d78c5 100644 --- a/packages/core/src/services/scene/SceneService.ts +++ b/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 { const renderCanvas = this.$container?.getElementsByTagName('canvas')[0]; - this.render(); + await this.render(); + const layersPng = type === 'jpg' ? (renderCanvas?.toDataURL('image/jpeg') as string) diff --git a/packages/scene/src/IMapController.ts b/packages/scene/src/IMapController.ts index bf896bdde5..95f0116dbd 100644 --- a/packages/scene/src/IMapController.ts +++ b/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 ; } diff --git a/packages/scene/src/index.ts b/packages/scene/src/index.ts index 8031fe78e0..15c500ae6e 100644 --- a/packages/scene/src/index.ts +++ b/packages/scene/src/index.ts @@ -147,12 +147,12 @@ class Scene public getMapService(): IMapService { return this.mapService; } - public exportPng(type?: 'png' | 'jpg'): string { - return this.sceneService.exportPng(type); + public async exportPng(type?: 'png' | 'jpg'): Promise { + return await this.sceneService.exportPng(type); } - public exportMap(type?: 'png' | 'jpg'): string { - return this.sceneService.exportPng(type); + public async exportMap(type?: 'png' | 'jpg'): Promise { + return await this.sceneService.exportPng(type); } public registerRenderService(render: any) {