Mapbox GL JS: Export map to PNG or PDF?
J'utilise Mapbox GL js version 0.32. Existe-t-il un moyen d'exporter la carte vers un PNG ou PDF à haute résolution?
évidemment, je peux juste faire une capture d'écran, mais ce serait bien s'il y avait une façon plus formelle.
j'ai trouvé ce repo, mais il semble vieux et n'est pas clair comment il fonctionne.
j'ai essayé en utilisant 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());
cela produit une longue URL de données dans la console, mais la copie et le coller dans un base64 convertisseur semble juste produire une image vide.
UPDATE: Ceci est mon nouveau code en entier:
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)
});
la sortie vers la console est:http://pastebin.com/raw/KhyJkJWJ
2 réponses
Il y a deux questions principales:
1. Comment puis-je obtenir la carte en tant qu'image?
en Fait, vous faites la bonne chose, mais un peu trop tôt. Donnez à cette carte un peu de temps pour charger et récupérer les données d'image quand le load l'événement est déclenché:
map.on('load', () => console.log(map.getCanvas().toDataURL()));
2. Comment puis-je obtenir cette image en haute résolution?
En changeant window.devicePixelRatio selon votre destination dpi, Vous pouvez tromper votre navigateur dans la génération de haute résolution sortie. J'ai trouvé cette solution dans une implémentation créée par Matthew Petroff, voir son code sur https://github.com/mpetroff/print-maps.
C'est le truc qu'il utilise pour générer des sorties haute résolution:
Object.defineProperty(window, 'devicePixelRatio', {
get: function() {return dpi / 96}
});
j'ai créé un exemple de travail simple pour quiconque trébuchant sur ce fil:
(Merci @ Vic d'avoir souligné le preserveDrawingBuffer - option in Mapbox GL JS)
<!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>