Viglino/ol-ext

Swipe does not work on two WebGLTile layers

Closed this issue · 6 comments

znxd-wh commented

I create two WebGLTile layers with GeoTiff source,
When I use Swipe,left layer disapears.

var source1 = new GeoTIFF({
sources: [
{
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif',
},
],
});
var webglLayer1 = new WebGLTile({
source: source1
})
var source2 = new GeoTIFF({
sources: [
{
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif',
},
],
});
var webglLayer2 = new WebGLTile({
source: source2
})
var map = new Map({
target: 'map',
view: source1.getView(),
layers: [webglLayer1,webglLayer2]
});
var swipe = new Swipe({
position: 0.5,
orientation: 'vertical'
});
swipe.addLayer(webglLayer1,false)
swipe.addLayer(webglLayer2,true)
map.addControl(swipe);

Viglino commented

It's working for me...
Do you have a working example online?

znxd-wh commented

hey man

here is the example.Just copy the code into map.control.swipe.html in your ol-ext project examples template.

map.control.swipe.zip

Viglino commented

You have to set a className to the layers:

var webglLayer1 = new WebGLTile({
   className: 'layer1
   source: source1
})
var webglLayer2 = new WebGLTile({
   className: 'layer2
   source: source2
})
znxd-wh commented

well done man,
it works,
thanks a lot

  • 👍1
znxd-wh commented

I still have a question,why TileLayer works well without className,but WebGLTileLayer needs a className otherwise it does not work?

Viglino commented

TileLayer uses a CanvasRenderingContext2D and WebGLTileLayer a WebGLRenderingContext.
The way there are drawing is quite different.
Using a className creates a new drawing context and prevent mix beetween the 2 layers crop.

  • 👍1