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

WebGIS小智

已于 2023-06-09 13:50:32 修改

阅读量1.2k

点赞数 2

分类专栏： MapBox高阶教学文章标签： mapbox canvas 地图导出地图全屏

于 2023-01-13 16:00:26 首次发布

本文链接：https://blog.csdn.net/lz5211314121/article/details/128673254

版权

MapBox高阶教学专栏收录该内容

16 篇文章 8 订阅 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在MapBox中自定义全屏和地图导出功能。通过JavaScript原生API实现全屏操作，以及利用html2canvas将地图及附加元素转化为图片进行下载。文中详细讲解了获取MapBox canvas元素的方法，并提供了全屏和导出的完整代码示例。

摘要由CSDN通过智能技术生成

在使用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元素，