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");
}

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

1 个答案: