如何翻转OpenLayers WebGL图层滑动功能，调整覆盖层位置？

当前使用OpenLayers的WebGL图层滑动功能，默认覆盖层从右侧扩展，现需调整为覆盖层从左侧显示并向右扩展，实现翻转后的滑动效果。

当前核心裁剪代码 #

this.imagery = this.createCompareLayer()

map.addLayer(this.imagery);

this.imagery.on('prerender', function (event) {
  const gl = <WebGLRenderingContext> event.context;
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.enable(gl.SCISSOR_TEST);

  const mapSize = map.getSize(); // [width, height] in CSS pixels

  // 获取CSS坐标对应的渲染坐标和尺寸
  const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
  const topRight = getRenderPixel(event, [mapSize[0], 0]);

  const width = (topRight[0] - bottomLeft[0]) * (Number(swipe.value) / 100);
  const height = topRight[1] - bottomLeft[1];
  gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
});

修改后的代码（覆盖层居左） #

this.imagery = this.createCompareLayer()

map.addLayer(this.imagery);

this.imagery.on('prerender', function (event) {
  const gl = <WebGLRenderingContext> event.context;
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.enable(gl.SCISSOR_TEST);

  const mapSize = map.getSize(); // [width, height] in CSS pixels

  // 获取CSS坐标对应的渲染坐标和尺寸
  const bottomLeft = getRenderPixel(event, [0, mapSize[1]]);
  const topRight = getRenderPixel(event, [mapSize[0], 0]);

  const totalWidth = topRight[0] - bottomLeft[0];
  // 计算左侧覆盖层宽度：滑动条值占比 × 总渲染宽度
  const width = totalWidth * (Number(swipe.value) / 100);
  const height = topRight[1] - bottomLeft[1];
  
  // 裁剪区域从左侧原点开始，向右延伸对应宽度
  gl.scissor(bottomLeft[0], bottomLeft[1], width, height);
});

修改说明 #

• 新增totalWidth变量明确总渲染宽度，提升代码可读性
• 保持裁剪起始X坐标为地图左侧边缘（bottomLeft[0]），确保覆盖层从左侧显示
• 滑动条值越大，左侧覆盖层宽度越宽，完全匹配原示例的交互逻辑，仅方向翻转

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