@amap/screenshot

示例

codepen示例

简介

本项目为高德地图的截图插件

问题说明

地图使用截图功能时必须在初始化地图时增加参数，参数内容：

WebGLParams: {
  preserveDrawingBuffer: true
}

详情请看下方示例

加载方式

当前项目支持CDN加载和npm加载两种方式。

CDN加载

CDN加载需要先加载高德地图JS，代码如下

<!--加载高德地图JS 2.0 -->
<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<!--加载screenshot插件 -->
<script src="https://cdn.jsdelivr.net/npm/@amap/screenshot/dist/index.js"></script>

npm加载

npm加载可以直接使用安装库

npm install '@amap/screenshot'

使用示例

CDN方式

<script src = 'https://webapi.amap.com/maps?v=2.0&key=YOUR_KEY'></script>
<script src="https://cdn.jsdelivr.net/npm/@amap/screenshot/dist/index.js"></script>
<script type="text/javascript">
  const center = [116.335036, 39.900082];
  const map = new AMap.Map(app', {
      center: center,
      zoom: 10,
      viewMode: '3D',
      pitch: 35,
      WebGLParams: {
        preserveDrawingBuffer: true
      }
    });
      map.add(new AMap.Marker({
        position: center
      }))
      const screenshot = new AMap.Screenshot(map)
      function screenMap(){
        screenshot.toDataURL().then(url => {
          document.getElementById('test').setAttribute('src', url)
        })
      }
</script>

npm方式

import {Screenshot} from '@amap/screenshot'
const map = new AMap.Map('app', {
  center: [120,31],
  zoom: 14,
  viewMode: '3D',
  pitch: 35,
  WebGLParams: {
    preserveDrawingBuffer: true
  }
})
const screenshot = new Screenshot(map)
function screenMap() {
  screenshot.toDataURL().then(url => {
    console.log('url: ', url)
  })
}

API文档说明

Screenshot说明

地图截图 new AMap.Screenshot(map: AMap.Map)

参数说明

map: 地图实例对象

成员函数

| 函数名 | 入参 | 返回值 | 描述 | |-----------|-------------------------------------------------------|------------------------------|-------------------------------------------------| | toCanvas | 无 | Promise<HTMLCanvasElement> | 返回生成的canvas对象 | | toDataURL | imageType(可选值：image/png image/jpeg，默认image/png) | Promise<string> | 返回生成的图片的base64值 | | download | {filename: string, type: imageType} | Promise<boolean> | 下载文件，默认下载png格式，可以修改为jpg，type的值与上面toDataURL的参数一致 | | destroy | 无 | 无 | 释放对象内部缓存的内存数据 |

事件列表

| 事件名 | 参数 | 描述 | | ---- | ---- | ---- |