OpenLayers event.context调用方法报错：TS2339属性不存在求助

云上老周

2026-7-28

解决OpenLayers图层滑动示例中的TS2339类型错误

问题原因

TypeScript对event.context的类型定义是CanvasRenderingContext2D | WebGLRenderingContext，而save、beginPath等方法仅属于Canvas 2D上下文，WebGL上下文没有这些方法，因此触发TS2339错误。

解决方案

有两种可行的处理方式：

1. 类型断言（推荐，适合仅使用Canvas渲染器的场景）

直接将event.context断言为CanvasRenderingContext2D，明确告诉TypeScript该上下文的具体类型：

const ctx = event.context as CanvasRenderingContext2D;

2. 类型守卫（兼容WebGL渲染器的场景）

通过检查上下文是否包含save方法，让TypeScript自动推断出正确的类型：

const ctx = event.context;
if ('save' in ctx) {
  // 此处ctx会被自动推断为CanvasRenderingContext2D
  ctx.save();
  // 后续绘图逻辑...
}

修改后的完整代码（类型断言版本）

const imagery = new TileLayer({
  source: new XYZ({
    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + 
          'key',
    maxZoom: 20,
  }),
});
map.addLayer(imagery);

const swipe = <HTMLInputElement> document.getElementById('swipe');

imagery.on('prerender', function (event) {
  // 断言为Canvas 2D上下文
  const ctx = event.context as CanvasRenderingContext2D;
  const mapSize = map.getSize();
  const width = mapSize[0] * (+swipe.value / 100);
  const tl = getRenderPixel(event, [width, 0]);
  const tr = getRenderPixel(event, [mapSize[0], 0]);
  const bl = getRenderPixel(event, [width, mapSize[1]]);
  const br = getRenderPixel(event, mapSize);

  ctx.save();
  ctx.beginPath();
  ctx.moveTo(tl[0], tl[1]);
  ctx.lineTo(bl[0], bl[1]);
  ctx.lineTo(br[0], br[1]);
  ctx.lineTo(tr[0], tr[1]);
  ctx.closePath();
  ctx.clip();
});