web-dev-qa-db-fra.com

Mapbox GL JS: Exporter la carte en PNG ou 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 manière plus formelle.

J'ai trouvé ce dépôt , mais il a l'air vieux et ne sait pas comment cela fonctionne.

J'ai essayé d'utiliser l'option 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());

Cela génère une longue URL de données dans la console, mais le copier et le coller dans n convertisseur base64 semble simplement produire une image vide.

[~ # ~] mise à jour [~ # ~] : Voici 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 la suivante: http://Pastebin.com/raw/KhyJkJWJ

mapboxmapbox-gl-js
19
Richard

Il y a deux questions principales:

1. Comment obtenir le canevas de carte en tant qu'image?

En fait, vous faites ce qu'il faut, mais juste trop tôt. Donnez à cette carte un certain temps pour charger et récupérer les données d'image lorsque l'événement load est déclenché:

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

2. Comment obtenir cette image en haute résolution?

En changeant window.devicePixelRatio selon votre dpi de destination, vous pouvez inciter votre navigateur à générer une sortie haute résolution. 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 l'astuce qu'il utilise pour générer une sortie haute résolution:

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

Source

15
sgelb

J'ai créé un exemple de travail simple pour quiconque tombe sur ce fil:

(Merci @Vic d'avoir signalé l'option preserveDrawingBuffer- dans 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>
2
st_phan