mirror of https://gitee.com/antv-l7/antv-l7
fix: 导出图片使用异步方法
This commit is contained in:
parent
1c62c5c9ea
commit
dd1ccb7d03
|
@ -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;
|
|
@ -0,0 +1,3 @@
|
||||||
|
### 导出图片
|
||||||
|
|
||||||
|
<code src="./demos/exportimg.tsx"></code>
|
|
@ -28,10 +28,10 @@ export default class ExportImage extends ButtonControl<IExportImageControlOption
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
public getImage() {
|
public async getImage() {
|
||||||
const mapImage = this.mapsService.exportMap('png');
|
const mapImage = await this.mapsService.exportMap('png');
|
||||||
const layerImage = this.scene.exportPng('png');
|
const layerImage = await this.scene.exportPng('png');
|
||||||
return this.mergeImage(mapImage, layerImage);
|
return await this.mergeImage(mapImage, layerImage);
|
||||||
}
|
}
|
||||||
|
|
||||||
protected onClick = async () => {
|
protected onClick = async () => {
|
||||||
|
|
|
@ -18,7 +18,7 @@ export interface ISceneService extends EventEmitter {
|
||||||
render(): void;
|
render(): void;
|
||||||
getSceneContainer(): HTMLDivElement;
|
getSceneContainer(): HTMLDivElement;
|
||||||
getMarkerContainer(): HTMLElement;
|
getMarkerContainer(): HTMLElement;
|
||||||
exportPng(type?: 'png' | 'jpg'): string;
|
exportPng(type?: 'png' | 'jpg'): Promise<string> ;
|
||||||
addFontFace(fontname: string, fontpath: string): void;
|
addFontFace(fontname: string, fontpath: string): void;
|
||||||
destroy(): void;
|
destroy(): void;
|
||||||
}
|
}
|
||||||
|
|
|
@ -338,9 +338,10 @@ export default class Scene extends EventEmitter implements ISceneService {
|
||||||
return this.$container as HTMLDivElement;
|
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];
|
const renderCanvas = this.$container?.getElementsByTagName('canvas')[0];
|
||||||
this.render();
|
await this.render();
|
||||||
|
|
||||||
const layersPng =
|
const layersPng =
|
||||||
type === 'jpg'
|
type === 'jpg'
|
||||||
? (renderCanvas?.toDataURL('image/jpeg') as string)
|
? (renderCanvas?.toDataURL('image/jpeg') as string)
|
||||||
|
|
|
@ -82,5 +82,5 @@ export default interface IMapController {
|
||||||
lngLatToPixel(lnglat: Point): IPoint;
|
lngLatToPixel(lnglat: Point): IPoint;
|
||||||
containerToLngLat(pixel: Point): ILngLat;
|
containerToLngLat(pixel: Point): ILngLat;
|
||||||
lngLatToContainer(lnglat: Point): IPoint;
|
lngLatToContainer(lnglat: Point): IPoint;
|
||||||
exportMap(type: 'jpg' | 'png'): string;
|
exportMap(type: 'jpg' | 'png'): Promise<string> ;
|
||||||
}
|
}
|
||||||
|
|
|
@ -147,12 +147,12 @@ class Scene
|
||||||
public getMapService(): IMapService<unknown> {
|
public getMapService(): IMapService<unknown> {
|
||||||
return this.mapService;
|
return this.mapService;
|
||||||
}
|
}
|
||||||
public exportPng(type?: 'png' | 'jpg'): string {
|
public async exportPng(type?: 'png' | 'jpg'): Promise<string> {
|
||||||
return this.sceneService.exportPng(type);
|
return await this.sceneService.exportPng(type);
|
||||||
}
|
}
|
||||||
|
|
||||||
public exportMap(type?: 'png' | 'jpg'): string {
|
public async exportMap(type?: 'png' | 'jpg'): Promise<string> {
|
||||||
return this.sceneService.exportPng(type);
|
return await this.sceneService.exportPng(type);
|
||||||
}
|
}
|
||||||
|
|
||||||
public registerRenderService(render: any) {
|
public registerRenderService(render: any) {
|
||||||
|
|
Loading…
Reference in New Issue