Angular集成HereMap+wkhtmltopdf：如何监听地图瓦片加载完成事件？

针对你遇到的Angular集成HereMaps后，wkhtmltopdf生成PDF时瓦片加载不完整的问题，这里有几个可靠的方案，帮你精准判断地图是否完全就绪：

方案一：结合视图稳定事件与瓦片加载状态跟踪 #

这个方法先确保地图视图不再变化（缩放/平移结束），再跟踪所有瓦片的加载状态，避免在视图变动时误判：

// 定义变量跟踪加载中的瓦片数和视图状态
let pendingTiles = 0;
let isViewStable = false;

// 监听视图变化结束事件，标记视图已稳定
this.map.addEventListener('mapviewchangeend', () => {
  isViewStable = true;
  // 视图稳定后立即检查瓦片加载状态
  checkIfReadyToPrint();
});

// 获取基础图层的瓦片提供者
const tileProvider = this.map.getBaseLayer().getProvider() as H.map.provider.RemoteTileProvider;

// 监听瓦片开始加载，累加待加载计数
tileProvider.addEventListener('tileloadstart', () => {
  pendingTiles++;
});

// 监听瓦片加载完成，减少待加载计数并检查状态
tileProvider.addEventListener('tileload', () => {
  pendingTiles--;
  checkIfReadyToPrint();
});

// 瓦片加载失败也视为完成，避免无限等待
tileProvider.addEventListener('tileloaderror', () => {
  pendingTiles--;
  checkIfReadyToPrint();
});

// 核心判断逻辑：视图稳定且无待加载瓦片时触发打印
function checkIfReadyToPrint() {
  if (isViewStable && pendingTiles === 0) {
    // 重置状态，防止重复触发
    isViewStable = false;
    this.mapReadyAction(); // 你的打印触发方法
  }
}

方案二：对渲染事件做防抖处理 #

如果方案一的事件监听在wkhtmltopdf环境下不够灵敏，可以尝试对render事件做防抖处理——地图每次加载瓦片都会触发render，当最后一个瓦片加载完成后，不会再触发新的render，此时防抖定时器到期即可判断就绪：

let renderTimeout: NodeJS.Timeout;

this.map.getEngine().addEventListener('render', () => {
  // 每次渲染触发时清除之前的定时器
  clearTimeout(renderTimeout);
  // 设置防抖延迟（可根据瓦片加载速度调整，比如500ms）
  renderTimeout = setTimeout(() => {
    // 额外检查视图是否处于动画状态（比如缩放动画未结束）
    if (!this.map.getViewModel().getLookAtData().isAnimating()) {
      this.mapReadyAction();
    }
  }, 500);
});

方案三：轮询渲染状态（兜底方案） #

如果前两种方案仍有问题，可使用轮询方式兜底，直接检查渲染引擎和视图的状态：

function checkRenderStatus() {
  // 两个判断条件：渲染引擎未在工作 + 视图无动画
  if (!this.map.getEngine().isRendering() && !this.map.getViewModel().getLookAtData().isAnimating()) {
    this.mapReadyAction();
  } else {
    // 每隔100ms检查一次，可根据实际调整间隔
    setTimeout(checkRenderStatus, 100);
  }
}

// 在视图稳定后启动轮询
this.map.addEventListener('mapviewchangeend', checkRenderStatus);

额外提示 #

• 如果你使用了多个叠加图层，需要对每个图层的瓦片提供者都添加监听事件；
• wkhtmltopdf本身建议配置--javascript-delay参数，给JavaScript足够的执行时间，比如--javascript-delay 2000；
• 防抖时间和轮询间隔可根据你的地图瓦片分辨率、网络环境微调，确保所有瓦片有足够加载时间。

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