MapBox GL 地圖頁面保存為圖片的方法

MapBox GL沒有自帶的截圖api，在github上有人寫了一個控件 https://github.com/geolonia/mbgl-export-control。

但控件只能以固定的方式使用，本人做了一下改動：

核心代碼如下：

import 'canvas-toBlob'
import FileSaver from 'file-saver'
import mapboxgl from 'mapbox-gl'

function setStyles (element, styles) {
  for (const style in styles) {
    element.style[style] = styles[style]
  }
}

export default function (map, name) {
  const actualPixelRatio = window.devicePixelRatio
  Object.defineProperty(window, 'devicePixelRatio', {
    get: () => 300 / 96
  })

  const _container = document.createElement('div')
  document.body.appendChild(_container)

  const width = map.getContainer().offsetWidth
  const height = map.getContainer().offsetHeight
  // const bottomRight = map.unproject([width, height]).toArray()

  setStyles(_container, {
    visibility: 'hidden',
    position: 'absolute',
    top: 0,
    bottom: 0,
    width: `${width}px`,
    height: `${height}px`
  })

  let fontFamily = []
  if (map.style.glyphManager && map.style.glyphManager.localIdeographFontFamily) {
    fontFamily = map.style.glyphManager.localIdeographFontFamily
  }

  let MBGL = mapboxgl.Map
  const _map = new MBGL({
    container: _container,
    center: map.getCenter(),
    zoom: map.getZoom(),
    bearing: map.getBearing(),
    pitch: map.getPitch(),
    style: map.getStyle(),
    localIdeographFontFamily: fontFamily,
    hash: false,
    preserveDrawingBuffer: true,
    interactive: false,
    attributionControl: false
  })

  _map.once('load', () => {
    _map.getCanvas().toBlob((blob) => {
      FileSaver.saveAs(blob, name + '.png')
      _map.remove()
      _container.parentNode.removeChild(_container)
      _loading.parentNode.removeChild(_loading)
      Object.defineProperty(window, 'devicePixelRatio', {
        get: () => actualPixelRatio
      })
    })
  })
}

說明：

1. 需要安裝canvas-toBlob和file-saver，前者用於轉換地圖的canvas，后者用於把blob存儲為圖片；

mapbox-gl 是使用的地圖庫，如果基於ol或minemap的地圖應用，引入相應的庫即可

2. 截圖的主要原理：

a.通過參數獲取當前的map對象，得到div大小，地圖的圖層信息，地圖狀態的center、zoom、pitch和bearing等

b.新建一個和map對象容器一樣大的div，在該div中創建新的地圖對象，添加和原map對象一樣的圖層，設置相同的地圖狀態

注意，該新的div需要設置為隱藏狀態，即 visibility: 'hidden'

c.獲取新的地圖對象的canvas，另存為圖片

 

提供一種思路，可以修改后用於保存其他地圖庫，代碼請參考：

https://github.com/shiyuan598/Map-Visualization/tree/master/mapbox-template