web-dev-qa-db-ja.com

Mapbox GL JS：マップをPNGまたはPDFにエクスポートしますか？

Mapbox GL JS version 0.32を使用しています。マップを高解像度のPNGまたはPDFにエクスポートする方法はありますか？

もちろんスクリーンショットを撮ることもできますが、もっと正式な方法があればいいでしょう。

私は this repo を見つけましたが、古く見えて、それがどのように機能するか明確ではありません。

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コンバーター に貼り付けると、空の画像が生成されるようです。

[〜＃〜] 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

mapboxmapbox-gl-js
19
Richard

主な質問は2つあります。

1。マップキャンバスを画像として取得するにはどうすればよいですか？

実際、あなたは正しいことをしていますが、早すぎます。 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}
});

ソース

15
sgelb

私はこのスレッドに出くわした誰かのための簡単な作業例を作成しました：

（MapboxのpreserveDrawingBuffer- optionを指摘してくれた@Vicに感謝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