mapbox - Mapbox GL JS:将 map 导出为PNG或PDF？

Question

我正在使用Mapbox GL JS版本0.32。是否可以将 map 导出为高分辨率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中似乎会产生一个空图像。

UPDATE :这是我的新代码，全文:

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

Answer 1

主要有两个问题:

1.如何获取 map Canvas 作为图像？

实际上，您在做正确的事，但为时过早。触发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