MapBox实现自定义按钮全屏和自定义按钮地图导出（地图截屏下载）

在使用mapbox的时候发现官方虽然提供了全屏组件和地图导出的插件，但是使用起来不方便，而且全屏按钮的样式和位置也是很难改，很费劲，因此就想着自己写一个组件来实现全屏和地图导出（地图截屏）

其实原理很简单，全屏的原理其实就是让页面上的某个元素，例如div，canvas等全屏，现在我们的目的就是让mapbox所渲染的那个canvas全屏就行了。因此我们可以这样做：

1.首先要了解如何让一个普通的html元素全屏？

我们可以写下面这段代码：

function launchIntoFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
}

我们封装一个函数，这个函数的参数是一个dom元素，然后调用requesFullScreen方法将其全屏，这个API是js原生自带的，不过不同内核的浏览器名称不同。

2.接下来就要想办法将地图所在的dom元素，传入这个函数，我们随便打开一个mapbox渲染的地图可以发现