ExportImage 导出图片

对当前地图部分进行截图并生成图片的 Base64 字符串。

说明

示例

截图时被截取的目标仅包含：

• 地图底图
• 图层（不包含 MarkerLayer）

注意：由于当前地图底图对应 Canvas 默认开启了缓冲区，导致默认情况下无法截取到地图底图部分。

因此若开发者需要完整的截图能力，则应当在初始化地图实例时传递以下参数以关闭 Canvas 缓冲区。

new GaodeMapV2({
  WebGLParams: {
    preserveDrawingBuffer: true,
  },
});

new Mapbox({
  preserveDrawingBuffer: true,
});

使用

import { Scene, ExportImage } from '@antv/l7';

const scene = new Scene({
  id: 'map',
  map: new GaodeMapV2({
    // 关闭地图缓冲区，否则截图时无法截取到地图部分
    WebGLParams: {
      preserveDrawingBuffer: true,
    },
  }),
});

scene.on('loaded', () => {
  const zoom = new ExportImage({
    onExport: (base64: string) => {
      // download(base64)
    },
  });
  scene.addControl(zoom);
});

配置

Position

export type Position =
  | 'topleft' // ↖ 左上角，纵向排列
  | 'lefttop' // ↖ 左上角，横向排列
  | 'topright' // ↗ 右上角，纵向排列
  | 'righttop' // ↗ 右上角，横向排列
  | 'bottomleft' // ↙ 左下角，纵向排列
  | 'leftbottom' // ↙ 左下角，横向排列
  | 'bottomright' // ↘ 右下角，纵向排列
  | 'rightbottom' // ↘ 右下角，横向排列
  | 'topcenter' // ↑ 上方中央，横向排列
  | 'bottomcenter' // ↓ 下方中间，横向排列
  | 'leftcenter' // ← 左边中间，纵向排列
  | 'rightcenter' // → 右边中间，纵向排列
  | Element; // 传入 DOM 作为当前控件的容器

方法

事件