OpenLayers 导出地图到图像

Question

我正在使用 Angular 8

我正在尝试导出使用 openlayer 创建的 image/blob 地图，但我无法让它工作。我什至尝试将 ViewChild 与 html2canvas 一起使用，但后来我只得到 div 除了地图之外的所有内容。

     @ViewChild('download', { static: false }) public download: ElementRef;

    pdfDownload() {
    let domElement = this.download.nativeElement as HTMLElement;
    console.log(domElement);
    html2canvas(domElement).then(canvas => {
      var imgData = canvas.toDataURL("image/png");
      console.log(imgData); //here i get a blob that has everything from the div like buttons and so on, but not the map itself thats also inside this div
      });
  }

我确实看到了一些带有 openlayer 的 javascript 版本，他们设法在不使用其他库的情况下下载了它，但我无法设法将其翻译成打字稿。

有人知道如何使用 openlayer 或 html2canvas lib 让它工作吗？或者 mby 甚至其他东西？

也尝试了以下但没有成功，因为它基本上是一样的

 pdfDownload() {
    var cnvs = document.getElementById('map');   
    html2canvas(cnvs).then(canvas => {
      var imgData = canvas.toDataURL("image/png");
      console.log(imgData); //here i get a blob that has everything from the div like buttons and so on, but not the map itself thats also inside this div
    });
  }

Answer 1

您可以使用 ol-ext print control 将打印封装在控件中。

Answer 2

问题与 CORS 有关

OpenLayers 导出地图到图像

OpenLayer export map to Image

openlayers

html2canvas

angular