OpenLayers中post-render绘制反向圆时如何适配地图旋转？

问题根源 #

你在post-render中直接使用画布原始坐标系绘制，但OpenLayers地图视图发生旋转、平移后，画布上下文已经应用了视图变换矩阵。map.getPixelFromCoordinate返回的是经过视图变换后的像素坐标，可你绘制矩形和圆形时没有考虑画布当前的变换状态，导致绘制内容与地图视图错位，旋转时圆形位置/角度自然不符合预期。

忽略的关键要点 #

1. 画布变换状态：post-render触发时，画布已经被OpenLayers施加了视图相关的平移、旋转、缩放变换。直接基于原始画布坐标绘制，会和视图变换逻辑冲突。
2. 路径填充规则：反向圆需要实现“画布区域减去圆形区域”的镂空效果，依赖Canvas的填充规则来处理路径差集，你之前的代码没有利用这一规则。

修正后的post-render代码 #

tileLayer.on('postrender', function (event) {
  const ctx = event.context;
  const [x, y] = map.getPixelFromCoordinate(circleOrigin);
  const radius = 50 / view.getResolution();

  // 保存当前画布变换状态，避免干扰后续地图渲染
  ctx.save();
  // 重置画布变换，回到原始坐标系
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  
  ctx.beginPath();
  // 先绘制整个画布范围
  ctx.rect(0, 0, ...map.getSize());
  // 再绘制圆形（路径方向配合填充规则实现镂空）
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  // 使用奇偶填充规则，让矩形与圆形重叠区域被镂空
  ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
  ctx.fill('evenodd');
  
  // 恢复画布原有变换状态
  ctx.restore();
});

补充说明 #

• save()和restore()是为了保证我们修改画布变换后，不影响OpenLayers后续的地图渲染流程。
• evenodd填充规则是实现反向圆的核心：当两个路径重叠时，该规则会交替填充区域，从而自然实现“画布减去圆形”的镂空效果。
• 原示例在手机端的异常，多是因为自定义渲染逻辑未适配移动设备的视图变换或触摸事件下的渲染时序，修正后的post-render方案处理好变换后，可在移动端正常工作。

内容的提问来源于stack exchange，提问作者M I P A