Экспорт карты листовки в формате JPG в машинописном наборе 4 - PullRequest
Новая
       20

Экспорт карты листовки в формате JPG в машинописном наборе 4

0 голосов
/ 09 октября 2018

Я создаю приложение Angular4 с листовыми картами, и мне нужно экспортировать текущий вид карты в одно изображение JPG.Что-то вроде снимка экрана, но только карта с маркерами и полилиниями.

Итак, сначала я помещаю маркеры и полилинии в свою карту листовок, а затем мне нужно нажать кнопку, которая экспортирует текущий вид (включая маркеры).полилинии) в изображении JPG или PNG, а затем спросите меня, где сохранить изображение.

Есть ли способ сделать это?Какой-нибудь плагин, который я мог бы использовать?

Пожалуйста, помогите

1 Ответ

0 голосов
/ 09 октября 2018

Вот грубая реализация, подставьте в свой собственный соответствующий код.

Последняя функция saveSvgAsPng() из этой библиотеки https://github.com/exupero/saveSvgAsPng, позволяет сохранить элемент <svg> вPNG или URL-адрес данных 

function convertToPng() {
  const mapContainerRect = yourLeafletMapInstance.getContainer().getBoundingClientRect();
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  const mapTiles = document.querySelectorAll('classe-of-map-tile-image');
  const markers = document.querySelectorAll('classe-of-marker');
  const polylines = document.querySelectorAll('polyline-element-class');

  svg.setAttribute('width', mapContainerRect.width;
  svg.setAttribute('height', mapContainerRect.height);

  mapTiles.forEach(tile => {
    const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    const tileRect = tile.getBoundingClientRect();
    image.setAttribute('width', tileRect.width);
    image.setAttribute('height', tileRect.height);
    image.setAttribute('x', tileRect.left - mapContainerRect.left);
    image.setAttribute('y', tileRect.top - mapContainerRect.top);
    image.setAttribute('xlink:href', tile.src);
    svg.appendChild(image);
  });

  markers.forEach(marker => {
    const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    const markerRect = marker.getBoundingClientRect();
    image.setAttribute('width', markerRect.width);
    image.setAttribute('height', markerRect.height);
    image.setAttribute('x', markerRect.left - mapContainerRect.left);
    image.setAttribute('y', markerRect.top - mapContainerRect.top);
    image.setAttribute('xlink:href', marker.src);
    svg.appendChild(image);
  });

  polylines.forEach(polyline => {
    const copy = polyline.cloneNode();
    svg.appendChild(copy);
  });


  saveSvgAsPng(svg, "map.png");
}
...