Ric*_*ard 17 mapbox mapbox-gl-js
我正在使用Mapbox GL JS版本0.32.有没有办法将地图导出为高分辨率的PNG或PDF？
显然,我可以截图,但如果有更正式的方式会很好.
我找到了这个回购,但它看起来很旧,并不清楚它是如何工作的.
我尝试使用该preserveDrawingBuffer选项:
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,但将其复制并粘贴到base64转换器中似乎只会产生一个空图像.
更新:这是我的新代码,完整:
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
sge*_*elb 15
有两个主要问题:
1.如何将地图画布作为图像？
实际上,你做的是正确的,但是太早了.在load触发事件时,为该映射提供一些时间来加载和获取图像数据:
map.on('load', () => console.log(map.getCanvas().toDataURL()));
2.如何在高分辨率下获得该图像？
通过window.devicePixelRatio根据目标dpi进行更改,您可以欺骗浏览器生成高分辨率输出.我在Matthew Petroff创建的实现中找到了解决方案,请参阅https://github.com/mpetroff/print-maps上的代码 .这是他用于生成高分辨率输出的技巧:
Object.defineProperty(window, 'devicePixelRatio', {
get: function() {return dpi / 96}
});
我为任何偶然发现此线程的人创建了一个简单的工作示例：
\n\n（感谢 @Vic 指出preserveDrawingBufferMapbox GL JS 中的 - 选项）
<!DOCTYPE html>\n<html>\n\n<head>\n <meta charset=\'utf-8\' />\n <title>Display a map</title>\n <meta name=\'viewport\' content=\'initial-scale=1,maximum-scale=1,user-scalable=no\' />\n <script src=\'https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js\'></script>\n <link href=\'https://api.tiles.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css\' rel=\'stylesheet\' />\n <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>\n <style>\n #map {\n margin: auto;\n width: 400px;\n height: 400px;\n }\n </style>\n</head>\n\n<body>\n <div id=\'map\'></div>\n <a id="downloadLink" href="" download="map.png">Download \xe2\x86\x93</a>\n <div id="image"></div>\n <script>\n mapboxgl.accessToken = \'your-token-here\';\n var map = new mapboxgl.Map({\n container: \'map\',\n style: \'mapbox://styles/mapbox/streets-v9\',\n center: [-74.50, 40],\n zoom: 9,\n preserveDrawingBuffer: true\n });\n\n $(\'#downloadLink\').click(function() {\n var img = map.getCanvas().toDataURL(\'image/png\')\n this.href = img\n })\n </script>\n</body>\n\n</html>\n| 归档时间： |
|
| 查看次数： |
5156 次 |
| 最近记录： |