OpenLayers中混合TileLayer与WebGLTileLayer的Layer Swipe功能实现问题

针对你遇到的WebGLTileLayer在Layer Swipe裁剪区域缩小时残留旧内容的问题，这是因为WebGL图层默认采用增量渲染（复用帧缓冲），而普通TileLayer每次都会重新绘制可见区域。下面提供几个不依赖图层数量、类型的通用解决方案：

方案1：强制WebGL图层重绘+Scissor测试限制绘制区域 #

这个方案结合了强制图层刷新和WebGL的裁剪测试，既能清除残留，又能保证只绘制指定区域：

步骤1：给图层添加裁剪逻辑 #

编写通用函数处理不同类型图层的裁剪：

function setupLayerSwipeClip(layer, swipeRatio, showLeftHalf) {
  const handleWebGL = (event) => {
    const gl = event.context;
    const frameSize = event.frameState.size;
    const swipeX = swipeRatio * frameSize[0]; // swipeRatio为0-1的比例值

    // 计算裁剪区域
    let scissorX, scissorWidth;
    if (showLeftHalf) {
      scissorX = 0;
      scissorWidth = swipeX;
    } else {
      scissorX = swipeX;
      scissorWidth = frameSize[0] - swipeX;
    }

    // 启用Scissor测试，限制绘制范围
    gl.enable(gl.SCISSOR_TEST);
    gl.scissor(scissorX, 0, scissorWidth, frameSize[1]);
  };

  const handleCanvas = (event) => {
    const ctx = event.context;
    const frameSize = event.frameState.size;
    const swipeX = swipeRatio * frameSize[0];

    // 保存画布状态，添加裁剪路径
    ctx.save();
    ctx.beginPath();
    if (showLeftHalf) {
      ctx.rect(0, 0, swipeX, frameSize[1]);
    } else {
      ctx.rect(swipeX, 0, frameSize[0] - swipeX, frameSize[1]);
    }
    ctx.clip();
  };

  // 移除旧的事件监听，避免重复绑定
  layer.un('prerender', handleWebGL);
  layer.un('postrender', () => event.context.disable(gl.SCISSOR_TEST));
  layer.un('precompose', handleCanvas);
  layer.un('postcompose', (event) => event.context.restore());

  // 根据图层类型绑定对应事件
  if (layer instanceof ol.layer.WebGLTile) {
    layer.on('prerender', handleWebGL);
    layer.on('postrender', (event) => {
      event.context.disable(gl.SCISSOR_TEST);
    });
  } else {
    layer.on('precompose', handleCanvas);
    layer.on('postcompose', (event) => {
      event.context.restore();
    });
  }
}

步骤2：滑动时强制WebGL图层重绘 #

每次滑动位置变化时，更新裁剪逻辑并触发WebGL图层的完整重绘：

function updateSwipePosition(swipeRatio) {
  // 遍历所有需要参与滑动的图层
  yourLayerList.forEach((layer, index) => {
    // 示例：第一个图层显示左半部分，其余显示右半部分，可根据需求调整规则
    const showLeft = index === 0;
    setupLayerSwipeClip(layer, swipeRatio, showLeft);

    // 强制WebGL图层重绘，清除旧帧缓冲内容
    if (layer instanceof ol.layer.WebGLTile) {
      const currentRevision = layer.get('revision') || 0;
      layer.set('revision', currentRevision + 1);
    }
  });
}

调用updateSwipePosition时传入0-1的比例值（比如滑动控件的位置），就能实现无残留的混合图层滑动对比。

方案2：统一设置图层可见范围 #

另一种思路是直接限制每个图层的可见范围，让图层只渲染裁剪后的区域：

function updateSwipeExtent(map, swipeRatio) {
  const view = map.getView();
  const mapSize = map.getSize();
  const [mapMinX, mapMaxY] = view.toCoordinate([0, 0]);
  const [mapMaxX, mapMinY] = view.toCoordinate([mapSize[0], mapSize[1]]);
  const swipeXCoord = view.toCoordinate([swipeRatio * mapSize[0], 0]);

  yourLayerList.forEach((layer, index) => {
    let newExtent;
    if (index === 0) {
      // 第一个图层显示左侧区域
      newExtent = [mapMinX, mapMinY, swipeXCoord[0], mapMaxY];
    } else {
      // 其余图层显示右侧区域
      newExtent = [swipeXCoord[0], mapMinY, mapMaxX, mapMaxY];
    }
    layer.setExtent(newExtent);
  });
}

这个方案的优势是无需处理WebGL的底层API，利用OpenLayers的图层范围控制自动裁剪渲染，不管是Tile还是WebGLTile图层都能适配。唯一需要注意的是，当地图缩放或平移时，需要重新计算可见范围并更新。

方案3：使用自定义WebGL渲染函数（进阶） #

如果你需要更精细的控制，可以给WebGLTileLayer设置customRenderFunction，在渲染阶段手动处理裁剪：

const webglLayer = new ol.layer.WebGLTile({
  source: yourWebGLSource,
  render: function (frameState, layerState, context) {
    const gl = context;
    const swipeRatio = getCurrentSwipeRatio(); // 获取当前滑动比例
    const frameSize = frameState.size;
    const swipeX = swipeRatio * frameSize[0];

    // 启用Scissor测试限制绘制范围
    gl.enable(gl.SCISSOR_TEST);
    gl.scissor(swipeX, 0, frameSize[0] - swipeX, frameSize[1]);

    // 调用默认渲染逻辑
    ol.layer.WebGLTile.defaultRenderFunction(frameState, layerState, context);

    gl.disable(gl.SCISSOR_TEST);
  }
});

这个方案适合需要深度定制WebGL渲染流程的场景，但需要熟悉OpenLayers的WebGL渲染API。

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