在打字稿中将传单地图导出为 JPG angular 4

Question

我正在制作一个带有传单地图的 Angular4 应用程序，我需要将地图的当前视图导出为一张 JPG 图像。类似于截屏，但只是带有标记和多段线的地图。

所以，首先我在传单地图中放置了标记和多段线，然后我必须按下一个按钮，将当前视图（包括标记和多段线）导出为 JPG 或 PNG 图像，然后询问我保存到哪里图片。

有什么办法吗？我可以使用一些插件吗？

请帮忙

Answer 1

这里是一个粗略的实现，替换成你自己的相关代码。

最后一个函数 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");
}

在打字稿中将传单地图导出为 JPG angular 4

Export Leaflet Map as JPG in typescript angular 4

screenshot

leaflet

typescript

export-to-image

angular