Mapbox GL JS：将地图导出为 PNG 或 PDF？答案

【问题标题】：Mapbox GL JS: Export map to PNG or PDF?Mapbox GL JS：将地图导出为 PNG 或 PDF？
【发布时间】：2017-07-17 22:19:58
【问题描述】：

我使用的是 Mapbox GL JS 0.32 版。有没有办法将地图导出为高分辨率 PNG 或 PDF？

显然，我可以截图，但如果有更正式的方式会很好。

我找到了this repo，但它看起来很旧并且不清楚它是如何工作的。

我尝试使用the preserveDrawingBuffer option：

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    minZoom: 4,
    maxZoom: 14,
    center: [-2.0, 53.3],
    preserveDrawingBuffer: true
});
console.log(map.getCanvas().toDataURL());

这会在控制台中输出一个长数据 URL，但将其复制并粘贴到 a base64 converter 似乎只会产生一个空图像。

更新：这是我的新代码，完整：

mapboxgl.accessToken = 'pk.eyXXX';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    minZoom: 4,
    maxZoom: 14,
    center: [-2.0, 53.3],
    preserveDrawingBuffer: true
});
var dpi = 300;
Object.defineProperty(window, 'devicePixelRatio', {
    get: function() {return dpi / 96}
});

map.on('load', function () {
    var content = map.getCanvas().toDataURL();
    console.log(content)
});

控制台的输出是这样的：http://pastebin.com/raw/KhyJkJWJ

【问题讨论】：

嗯，它正在工作。 content 的控制台输出在我看来像爱尔兰、英国和西欧。大多数浏览器都可以通过在地址栏中简单地 c&p 来查看它。要保存 png，请使用 toBlob() 而不是 toDataURL()。最后同样重要的是：要以高分辨率渲染该地图，请查看 github.com/mpetroff/print-maps 了解详细信息。
谢谢。我最终发现 Firefox 会这样做，但 Chrome 不会——因此我很困惑！
有没有办法做到这一点'无头'我不需要在浏览器中绘制任何实际地图，我只想循环通过一堆图层拍摄快照以用作缩略图/预览？

标签： mapbox mapbox-gl-js

【解决方案1】：

有两个主要问题：

1.如何将地图画布作为图像获取？

实际上，您做的事情是正确的，但还为时过早。当load 事件被触发时，给该地图一些时间来加载和获取图像数据：

map.on('load', () => console.log(map.getCanvas().toDataURL()));

2。如何获得高分辨率图像？

通过根据您的目标 dpi 更改 window.devicePixelRatio，您可以欺骗您的浏览器生成高分辨率输出。我在 Matthew Petroff 创建的实现中找到了该解决方案，请参阅他在 https://github.com/mpetroff/print-maps 上的代码。这是他用来生成高分辨率输出的技巧：

Object.defineProperty(window, 'devicePixelRatio', {
    get: function() {return dpi / 96}
});

Source

【讨论】：

谢谢！即使将线路移动到图像加载后，我仍然遇到同样的问题。如果我将输出粘贴到在线解码器中，它会说它无效：如果我将其粘贴到文本文件中并使用.png 扩展名保存，我将无法打开该文件。其他人是否能够成功使用此方法获取 PNG？
对于想知道为什么图像为空白的人...确保您在 mapbox gl 选项中有 preserveDrawingBuffer: true

【解决方案2】：

我为偶然发现此线程的任何人创建了一个简单的工作示例：

（感谢@Vic 指出 Mapbox GL JS 中的 preserveDrawingBuffer-option）

<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style>
    #map {
        margin: auto;
        width: 400px;
        height: 400px;
    }
    </style>
</head>

<body>
    <div id='map'></div>
    <a id="downloadLink" href="" download="map.png">Download ↓</a>
    <div id="image"></div>
    <script>
    mapboxgl.accessToken = 'your-token-here';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-74.50, 40],
        zoom: 9,
        preserveDrawingBuffer: true
    });

    $('#downloadLink').click(function() {
        var img = map.getCanvas().toDataURL('image/png')
        this.href = img
    })
    </script>
</body>

</html>

【讨论】：

最大的秘密是 preserveDrawingBuffer: true 之后它对我有用，谢谢！