Angular中OpenLayers导出PDF时TMS地图瓦片不渲染问题求助

我在Angular应用中想要生成包含地图图像和折线的PDF文档，但尝试从HTML元素生成PDF时，地图瓦片无法在Canvas中渲染。生成的PDF文件仅显示折线图层，尝试过jsPDF也无法解决该问题。

现有代码 #

HTML部分 #

<div id="map" (contextmenu)="openContextMenu($event); false"></div>
<p-button type="button" class="btn" icon="fas fa-print" (click)="generatePdf('test')" label="Print"></p-button>

TypeScript部分 #

async generatePdf(title: string): Promise<void> {
    const docDefinition: TDocumentDefinitions = {
        content: [
            { text: title, style: 'header' },
            { text: 'Additional Information', style: 'subheader' },
            {
                image: await this.getImageMapUrl(),
                width: 500,
            },
        ],
        styles: {
            header: { fontSize: 18, bold: true },
            subheader: { fontSize: 14, bold: true, margin: [0, 10, 0, 5] },
        },
    };
    pdfMake.createPdf(docDefinition).open();
}

public async getImageMapUrl(): Promise<any> {
    this.map.getView().setCenter(fromLonLat([15, 46]))
    const element = document.getElementById('map');

    if (!element) {
        throw new Error(`Element with id not found.`);
    }
    const exportOptions: Partial<Options> = {
        useCORS: true,
        imageTimeout: 100
    };
    const canvas = await html2canvas(element, exportOptions);
    return canvas.toDataURL('image/png');
}

解决思路 #

• 调整html2canvas参数：当前imageTimeout仅设置为100ms，地图瓦片加载速度通常慢于这个阈值，建议调整为3000ms以上；同时确认瓦片图片是否添加了crossorigin="anonymous"属性，确保跨域资源能被正常读取。
• 使用地图原生导出功能：如果使用的是OpenLayers（从代码中的fromLonLat、map.getView()判断），直接调用地图图层的渲染方法生成Canvas，比html2canvas更适配地图场景：

public async getImageMapUrl(): Promise<string> {
  this.map.getView().setCenter(fromLonLat([15, 46]));
  // 等待地图渲染完成
  await new Promise(resolve => setTimeout(resolve, 800));
  const mapCanvas = document.createElement('canvas');
  const size = this.map.getSize() || [800, 600];
  mapCanvas.width = size[0];
  mapCanvas.height = size[1];
  const mapContext = mapCanvas.getContext('2d');
  if (mapContext) {
    // 遍历所有图层并渲染
    this.map.getLayers().forEach(layer => {
      (layer as any).render(mapContext, this.map.getViewState());
    });
  }
  return mapCanvas.toDataURL('image/png');
}

• 等待地图完全渲染：在调用截图方法前，监听地图的rendercomplete事件，或者添加延迟，确保所有瓦片都加载并渲染完成后再执行截图操作。
• 检查瓦片服务器CORS配置：如果瓦片服务器未配置跨域允许，浏览器会阻止html2canvas读取瓦片图片。可以通过配置代理服务器转发瓦片请求，或者更换支持CORS的瓦片源（如OpenStreetMap的公开瓦片）。

内容的提问来源于stack exchange，提问作者Jure Beton