自定义mapbox插件 - 地图快照下载（JS）

效果预览

mapbox 是一个非常好用的开源地图引擎，他支持得平台有android，ios，js，rn等等，功能多样，但是对于地图插件开发这一块，没找到具体的实施文档。因此本文以js 为例，来把开发mapbox插件这一过程记录下来。

mapbox

var map = new mapboxgl.Map({
    container: "map", // container id
    style: "mapbox://styles/mapbox/streets-v11", // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9, // starting zoom
    preserveDrawingBuffer: true // 这个需要开启，才能获取正确的base64
  });

在开发之前先简述下mapbox的地图。在显示一张地图时，有两个属性是必须的，一个就是container ，地图的容器，接受一个dom的id，另一个就是style，地图实际渲染所需的资源配置都在这里，mapbox是支持室内外地图的，也就是在style的source属性中去分别加载indoor，outdoor的资源（可以是瓦片，也可以是geojson），有了这两个属性，就可以将地图显示出来了，其余属性不过多介绍。

mapbox 插件

mapbox 官方提供了很多插件，如线面绘制，地图比较等等。本次我开发的插件功能很简单，下载地图的快照，即将当前地图显示导出图片。mapbox 渲染完毕是一个canvas标签，而canvas 可以直接转成图片的base64资源，然后转成文件资源去进行下载。