Mapbox GL如何将地图导出为图片？

方法一：设置preserveDrawingBuffer:true，a标签动态添加href；

（1）初始化地图添加preserveDrawingBuffer:true（注意：初始化地图写法请参考：Mapbox GL JS显示一个地图）

（2）HTML

 <a :href="href"  download="map.png">
      <i class="iconfontMain icon-piliangdaochu-75"></i>
      <span>导出</span>
  </a>

（3）href获取 注意：amap.pmap指向mapbox

 this.href = amap.pmap.getCanvas().toDataURL('image/png')

（4）缺点：
此方法只是导出了图层，像弹窗，控件等都不能导出；
（5）效果图：

方法二：通过html2canvas截图

（1）下载html2canvas

// Install NPM
npm install --save html2canvas
// Install Yarn
yarn add html2canvas
// 引入
import html2canvas from 'html2canvas';

（2）初始化地图添加preserveDrawingBuffer:true，因为html2canvas 不读取canvas标签中的内容。
（3）导出图片

    html2canvas(document.getElementById('mapGridLeftWrapper')).then(function(canvas) {
        var image = document.createElement('a'); 
        //image.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 
        image.href = canvas.toDataURL("image/png");
        image.download = 'map.png'; 
        image.click(); 
    });

具体属性设置请参考：html2canvas属性设置

（4）优缺点：
优点：
可将页面中除canvas的内容导出；
缺点：
html2canvas对有些CSS 属性不起作用，比如常见的box-shadow、border-image。具体内容请看不支持的CSS属性

（5）效果展示：