html2canvas无法捕获矢量型Google地图，PDF生成无地图内容求助

核心问题原因 #

Google矢量地图基于WebGL渲染，html2canvas/dom-to-image这类DOM快照工具仅能处理常规DOM元素和CSS样式，无法捕获WebGL画布内容，导致地图在PDF中缺失。以下是三种可行解决方案：

方案1：改用Google Maps Static API生成带样式的静态图（推荐） #

直接通过Static API生成包含自定义行政区着色的地图图片，无需依赖前端渲染的矢量地图，完美兼容PDF生成流程。

实现步骤

1. 复用原有Geocoder逻辑，收集需要着色的行政区placeId及对应颜色；
2. 构造Static API请求URL，将样式规则编码为参数；
3. 加载静态图并直接插入PDF，或替换页面中的矢量地图容器后再用html2canvas捕获。

代码示例

// 存储需着色的行政区信息：placeId + 对应颜色
private coloredPlaceIds: { placeId: string; color: string }[] = [];

// 复用原有Geocoder逻辑时，收集placeId和颜色
emergencies.forEach((emergency) => {
  geocoder.geocode({ address: `${emergency.latitud}, ${emergency.longitud}` })
    .then(({ results }) => {
      if (results[0]) {
        results.forEach((result) => {
          if (result.types[0] === 'administrative_area_level_1') {
            const color = this.getColorsByDepartamento(cleanString(emergency.descripcion));
            this.coloredPlaceIds.push({ placeId: result.place_id, color });
          }
        });
      }
    });
});

// 生成静态地图URL
generateStaticMapUrl(): string {
  const baseUrl = 'https://maps.googleapis.com/maps/api/staticmap';
  const center = '4.570868,-74.297333';
  const zoom = '4.5';
  const size = '800x600';
  const apiKey = 'YOUR_API_KEY'; // 替换为你的Google Maps API密钥

  // 构建Static API样式规则
  const styleRules = this.coloredPlaceIds.map(item => ({
    featureType: 'administrative.area_level_1',
    elementType: 'geometry',
    stylers: [{ color: item.color }, { weight: 3 }],
    featureFilter: { placeId: item.placeId }
  }));

  const styleParam = encodeURIComponent(JSON.stringify(styleRules));
  return `${baseUrl}?center=${center}&zoom=${zoom}&size=${size}&style=${styleParam}&key=${apiKey}`;
}

// 修改下载方法
download() {
  const pdf = new jsPDF();
  const staticMapUrl = this.generateStaticMapUrl();

  // 加载静态地图并添加到PDF
  const mapImg = new Image();
  mapImg.crossOrigin = 'anonymous';
  mapImg.onload = () => {
    // 先添加地图到PDF
    pdf.addImage(mapImg, 'PNG', 0, 50, 210, 150);
    // 捕获报告其他内容（排除原地图容器）
    html2canvas(this.fullReport.nativeElement, {
      useCORS: true,
      ignoreElements: el => el.id === 'divMap'
    }).then(reportCanvas => {
      const reportImgData = reportCanvas.toDataURL('image/png');
      pdf.addImage(reportImgData, 'PNG', 0, 0, 210, 50);
      pdf.save('reporte.pdf');
    });
  };
  mapImg.src = staticMapUrl;
}

方案2：利用WebGL快照工具捕获矢量地图 #

使用专门支持WebGL画布捕获的工具，将矢量地图转为普通canvas后再生成PDF。

代码示例（使用mapcanvas库）

// 先安装依赖：npm install mapcanvas
import { mapCanvas } from 'mapcanvas';

download() {
  const pdf = new jsPDF();

  // 捕获Google矢量地图的canvas内容
  mapCanvas(this.mapa, { width: 800, height: 600 }).then(mapCanvasEl => {
    // 替换页面中的矢量地图容器
    this.divMap.nativeElement.innerHTML = '';
    this.divMap.nativeElement.appendChild(mapCanvasEl);
    
    // 捕获整个报告生成PDF
    html2canvas(this.fullReport.nativeElement, { useCORS: true }).then(reportCanvas => {
      const imgData = reportCanvas.toDataURL('image/png');
      pdf.addImage(imgData, 'PNG', 0, 0, 210, 297);
      pdf.save('reporte.pdf');
    });
  });
}

方案3：直接用jsPDF绘制行政区（高复杂度） #

若对PDF精度要求极高，可提前获取行政区GeoJSON数据，用jsPDF的绘图API直接绘制边界和填充色。此方法无需依赖Google Maps，但开发成本较高，需处理GeoJSON到PDF路径的转换。

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