angular - OpenLayer 将地图导出到 Image

Question

我正在使用 Angular 8

我正在尝试导出使用 openlayer 创建的地图的图像/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 库就可以使其正常工作的人吗？或者 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
    });
  }

标签： angularopenlayershtml2canvas

Answer 1

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