Mapbox GL JS: экспортировать карту в PNG или PDF?

Я использую 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 Converter просто создает пустое изображение.

ОБНОВЛЕНИЕ. Это мой новый код полностью:

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


mapbox mapbox-gl-js
person Richard    schedule 27.02.2017    source источник
comment
Что ж, работает. Ваш консольный вывод content мне кажется Ирландией, Великобританией и Западной Европой. Большинство браузеров могут просмотреть его, просто вставив его в адресную строку. Чтобы сохранить png, используйте toBlob() вместо toDataURL(). . И последнее, что не менее важно: чтобы отобразить эту карту в высоком разрешении, загляните в github.com/mpetroff/ распечатайте карты, чтобы узнать подробности.   -  person sgelb    schedule 03.03.2017
comment
Спасибо. В конце концов я понял, что Firefox будет делать это, а Chrome - нет - отсюда и мое замешательство!   -  person Richard    schedule 05.03.2017
comment
Есть ли способ сделать это «без головы». Мне не нужно рисовать карту в браузере, я просто хочу прокрутить кучу слоев, сделав снимки для использования в качестве эскизов / превью?   -  person maxwell    schedule 28.09.2018

Ответы (2)


arrow_upward
24
arrow_downward

Есть два основных вопроса:

1. Как получить холст карты в виде изображения?

На самом деле, вы поступаете правильно, но слишком рано. Дайте этой карте некоторое время для загрузки и извлечения данных изображения при запуске события load:

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

2. Как мне получить это изображение в высоком разрешении?

Изменяя window.devicePixelRatio в соответствии с целевым dpi, вы можете обманом заставить свой браузер генерировать выходные данные с высоким разрешением. Я нашел это решение в реализации, созданной Мэтью Петроффом, см. Его код на https://github.com/mpetroff/print-maps. Вот трюк, который он использует для генерации вывода в высоком разрешении:

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

Источник

person sgelb    schedule 28.02.2017
comment
Спасибо! У меня все еще есть та же проблема, хотя даже после перемещения строки после загрузки изображения. Если я вставляю вывод в онлайн-декодер, он говорит, что он недействителен: если я вставлю его в текстовый файл и сохраню с расширением .png, я не смогу открыть файл. Могут ли другие успешно использовать этот метод для получения PNG? - person Richard; 03.03.2017
comment
для людей, которые задаются вопросом, почему изображение пустое ... убедитесь, что у вас есть preserveDrawingBuffer: true в параметрах gl mapbox - person Vic; 25.01.2018

arrow_upward
2
arrow_downward

Я создал простой рабочий пример для всех, кто наткнется на эту ветку:

(Спасибо @Vic за указание на preserveDrawingBuffer-параметр в 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>
person st_phan    schedule 27.03.2018
comment
Большой секрет был preserveDrawingBuffer: true После этого у меня все заработало, спасибо! - person Jonas Rotilli; 22.09.2020