以打字稿角度4将传单地图导出为JPG答案

【问题标题】：Export Leaflet Map as JPG in typescript angular 4以打字稿角度4将传单地图导出为JPG
【发布时间】：2019-03-14 14:00:11
【问题描述】：

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

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

有没有办法做到这一点？我可以使用一些插件吗？

请帮忙

【问题讨论】：

您的标记和折线是 SVG 元素还是 img 图像？
你好@Dummy标记是png图像，折线是传单线
你在 Angular 应用程序中使用 ngx-leaflet 还是仅使用传单库？

标签： angular typescript leaflet screenshot export-to-image

【解决方案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");
}

【讨论】：