Mapbox :将地图导出到PNG或PDF？
Mapbox :将地图导出到PNG或PDF？
提问于 2017-02-27 10:33:01
我正在使用Mapbox版本0.32。有没有办法将地图导出到高分辨率的PNG或PDF？
显然，我可以截图，但如果有一种更正式的方式，那就太好了。
我找到了这个回购，但它看起来很老，不清楚它是如何工作的。
我试过用选项
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
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-02-28 13:23:46
有两个主要问题：
1.如何将地图画布作为图像获取？
事实上，你做的是对的，但为时尚早。在触发load事件时，给该映射一些时间来加载和获取图像数据：
map.on('load', () => console.log(map.getCanvas().toDataURL()));2.如何在高分辨率中获取该图像？
通过根据目的地dpi更改window.devicePixelRatio，可以使浏览器生成高分辨率的输出。我在Matthew创建的实现中找到了该解决方案，请参阅他在https://github.com/mpetroff/print-maps上的代码。这就是他用来生成高分辨率输出的技巧：
Object.defineProperty(window, 'devicePixelRatio', {
get: function() {return dpi / 96}
});Stack Overflow用户
发布于 2018-03-27 20:10:41
我为任何无意中发现这个线程的人创建了一个简单的工作示例：
(谢谢@Vic指出Mapbox中的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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42483449
复制相关文章
相似问题
腾讯云开发者
