Как экспортировать карту mapBoxGL?

Я использую mapboxGL для рендеринга карт на веб-странице, я хотел бы экспортировать карту как изображение, включая данные GeoJSON, которые были нанесены на карту. Я пытался использовать плагин листовок, но он не отображает кластеры и другой пользовательский HTML-код, который отображается на карте в виде всплывающего окна или аннотации.

Даже если я попытаюсь сделать это на сервере, например, используя phantomjs, тогда он (phantomjs) не поддерживает webgl .. застрял и не знаю, как мне это сделать, есть предложения?


person Mahendra Sonwane    schedule 09.06.2016    source источник
comment
Mapbox GL JS отображает элемент <canvas>. Есть решения canvas2png. Обратите внимание, что вам нужно будет установить preserveDrawingBuffer: true в параметрах при инициализации карты.   -  person tristen    schedule 21.06.2016


Ответы (1)


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

в объявлении карты убедитесь, что вы установили preserveDrawingBuffer в true

var map = new mapboxgl.Map({
  container: 'map',
  style: myawesomestyle,
  zoom: 8,
  bearing: 0,
  pitch: 0,
  center: [13, 52.35],
  preserveDrawingBuffer: true
});

Мне нравится использовать CanvasToBlob и FileSaver для выполнения внутренних шагов, поэтому в заголовке документа включите две библиотеки:

<script type="text/javascript" src="//cdn.jsdelivr.net/canvas-toblob/0.1/canvas-toBlob.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/eligrey/FileSaver.js/1.3.3/FileSaver.min.js"></script>

и свяжите это вместе с небольшой функцией печати

function printMap() {
  map.getCanvas().toBlob(function (blob) {
    saveAs(blob, 'map.png');
  })
}
person abenrob    schedule 14.06.2017