flip OpenLayers WebGL 滑动功能

Question

我目前正在我的应用程序中使用这个例子

https://openlayers.org/en/latest/examples/webgl-layer-swipe.html

它覆盖了地图的左侧，你可以在你的底图上延伸。

我需要这个确切的功能，但是翻转后，覆盖层位于左侧。

这是执行切片的代码的核心

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

     // get render coordinates and dimensions given CSS coordinates
      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);

我试过将 bottomLeft 移到中心，但我不确定这是正确的方法。

Answer 1

任一个

将图层顺序从

[osm, imagery]

更改为

[imagery, osm]

或者

计算宽度为右边的宽度

  const width = Math.round(
    (topRight[0] - bottomLeft[0]) * (1 - swipe.value / 100)
  );

然后改变剪刀的起始位置

  gl.scissor(topRight[0] - width, bottomLeft[1], width, height);