OpenLayers 6切换layer spy/swipe渲染功能时清除鼠标描边的实现问题

现有实现存在以下核心问题：

• 重复绑定事件监听：你每次调用toggle函数时都通过layer1.on()新增匿名prerender监听，旧监听不会自动移除。关闭功能时之前绑定的画圆、描边逻辑仍会执行，这是描边无法清除的核心原因
• 逻辑和命名混乱：首先复选框的逻辑注释写反，checked状态对应激活功能更符合用户直觉；其次函数名swipe_toggle和调用的spy_toggle命名不一致，容易导致逻辑错误
• 上下文恢复逻辑错误：ctx.restore()仅能恢复canvas上下文的状态（裁剪、笔触等配置），无法擦除已经绘制到画布上的描边内容，且你没有保证save和restore的一对一匹配，容易导致上下文状态污染
• 缺少重绘触发：关闭功能后没有主动触发图层重绘，画布上已有的内容不会自动刷新

核心思路：通过存储监听函数引用实现精准解绑，关闭功能后直接触发图层重绘清除所有残留内容，完全不需要手动处理clearRect。

第一步：定义全局变量存储监听引用和状态 #

// 存储spy功能的监听函数引用
let spyPrerenderListener = null;
let spyPostrenderListener = null;
const radius = 50; // 自定义spy半径
let mousePosition = null;
// 监听鼠标移动更新坐标
map.on('pointermove', function (evt) {
  mousePosition = evt.pixel;
  map.render();
});

第二步：改造toggle函数 #

function spy_toggle(active) {
  // 先解绑所有旧的监听，避免重复绑定
  if (spyPrerenderListener) {
    layer1.un('prerender', spyPrerenderListener);
    spyPrerenderListener = null;
  }
  if (spyPostrenderListener) {
    layer1.un('postrender', spyPostrenderListener);
    spyPostrenderListener = null;
  }

  if (active) {
    // 绑定prerender处理裁剪和描边
    spyPrerenderListener = function (event) {
      const ctx = event.context;
      ctx.save();
      ctx.beginPath();
      if (mousePosition) {
        const pixel = getRenderPixel(event, mousePosition);
        const offset = getRenderPixel(event, [
          mousePosition[0] + radius,
          mousePosition[1],
        ]);
        const canvasRadius = Math.sqrt(
          Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
        );
        ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);
        ctx.lineWidth = (5 * canvasRadius) / radius;
        ctx.strokeStyle = 'rgba(0,0,0,0.7)';
        ctx.stroke();
      }
      ctx.clip();
    };
    // 绑定postrender恢复上下文，保证save/restore一一对应
    spyPostrenderListener = function (event) {
      const ctx = event.context;
      ctx.restore();
    };

    layer1.on('prerender', spyPrerenderListener);
    layer1.on('postrender', spyPostrenderListener);
  }
  // 触发图层重绘，激活时加载新逻辑，关闭时清除所有残留绘制内容
  layer1.changed();
}

第三步：修正复选框监听逻辑 #

checkbox_spy.addEventListener('change', function() {
  // checked对应激活spy功能，符合用户常规操作直觉
  spy_toggle(this.checked);
});

• 没有冗余逻辑，通过事件解绑+原生图层重绘能力清除残留，不需要手动处理画布擦除
• 避免了事件重复绑定导致的内存泄漏和逻辑冲突
• save和restore一一对应，不会污染canvas全局上下文
• 功能切换逻辑清晰，后续可以直接复用相同的模式实现layer swipe功能

内容的提问来源于stack exchange，提问作者J.B.