webglopenlayerswebgl2angular-openlayersopenlayers-7

flip OpenLayers WebGL swipe functionality

I'm currently using this example in my application

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

which overlays the left side of the map with a lay that you can extend over your base map.

I need this exact functionality however flipped so that the layer that overlays is on the left.

This is the guts of the code that does the slice

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);

I've tried moving the bottomLeft to the center but I'm not sure this is the right approach.

Solution

  • Either

    change the layer order from [osm, imagery] to [imagery, osm]

    Or

    calculate the width as the width of the right side

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

    and then change the start position of the scissor

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