CODEWITHSUNDEEP
openlayersangular-openlayersopenlayers-7
Funn_Bobby
Funn_Bobby

Reputation: 715

Properties don't exist for OpenLayers event.context

I'm trying to follow an example from OpenLayers.

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

I've imported what I need and I'm working on implementing the example in my code but I'm running into an issue where the properties of the "event.context" don't exist?

The code looks like this

const imagery = new TileLayer({
  source: new XYZ({
    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + 
          'key',
    maxZoom: 20,
  }),
});
map.addLayer(imagery);

const swipe = <HTMLInputElement> document.getElementById('swipe');

imagery.on('prerender', function (event) {
  const ctx = event.context;
  const mapSize = map.getSize();
  const width = mapSize[0] * (+swipe.value / 100);
  const tl = getRenderPixel(event, [width, 0]);
  const tr = getRenderPixel(event, [mapSize[0], 0]);
  const bl = getRenderPixel(event, [width, mapSize[1]]);
  const br = getRenderPixel(event, mapSize);

  ctx.save();
  ctx.beginPath();
  ctx.moveTo(tl[0], tl[1]);
  ctx.lineTo(bl[0], bl[1]);
  ctx.lineTo(br[0], br[1]);
  ctx.lineTo(tr[0], tr[1]);
  ctx.closePath();
  ctx.clip();
});

but every property of "ctx" throws an error saying it doesn't exist? A specific example of one of the errors is

TS2339: Property 'save' does not exist on type 'CanvasRenderingContext2D | WebGLRenderingContext'.

It seems like maybe it's using the wrong object type but I'm not sure and everything I've tried hasn't worked...any help would be greatly appreciated!

Upvotes: 0

Views: 214

Answers (1)

Funn_Bobby
Funn_Bobby

Reputation: 715

Based on Mikes answer above and the other thread I got the WebGl scissors to work like this.

const imagery = new TileLayer({
  source: new XYZ({
    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + '19eciGimIzBlp29oJUJO',
    maxZoom: 20,
  }),
});
map.addLayer(imagery);

const swipe = <HTMLInputElement> document.getElementById('swipe');

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

});

imagery.on('postrender', function (event) {
  const gl = <WebGLRenderingContext> event.context;
  gl.disable(gl.SCISSOR_TEST);
});
const listener = function () {
  map.render();
};
swipe.addEventListener('input', listener);
swipe.addEventListener('change', listener);

Upvotes: 0

Related Questions