XYZ source opacity problem

[MichalPoty]

Describe the bug
I have ol-tile-layer and ol-source-xyz with url to xyz source. However, when I set the ol-tile-layer layer opacity to 1 (100%), an unwanted white background appears outside the layer area.

My xyz layer is not over the whole world as in the example, but just a square area as you can partly see in the screenshots.

temporary solution:
When I set the opacity to any other value less than 1, for example 0.99, the white background disappears.

illustration code:
<ol-tile-layer :opacity="opacity"> <ol-source-xyz :url="url + '{z}/{x}/{-y}.png'" /> </ol-tile-layer>

1.2.0

Please run npm list --depth=0 vue vue3-openlayers ol ol-ext ol-contextmenu and paste the output below:
├── ol-contextmenu@5.2.1
├── ol-ext@4.0.10
├── ol@7.4.0
├── vue@3.3.4
└── vue3-openlayers@1.2.0

Screenshots
Image 1 (Bug) - Sattelite image is my XYZ area, white background has nothing to do there, opacity == 1.

Image 2 - Image is correct, opacity is set to 0.99, the white background disappears.

[d-koppenhagen]

Hey, @MichalPoty , this could a problem from OpenLayers itself. However, to make it more easy to reproduce, can you please setup a playground using the Stackblitz starter template?

[MichalPoty]

I found the problem. It's because of projection... Default projection EPSG:4326 works fine, but I'm using EPSG:3857 and it's causing that unwanted white background to be rendered. I'm not sure if it's an OL bug, or if it could be caused by my xyz source.

Unfortunately I can't provide playground with my data. Examples sources in the official OL are not the ones to demonstrate this problem on, because they cover the whole world and you can't see the white background... I would need some public xyz source that doesn't cover the whole world, but just a cutout of some area.

[d-koppenhagen]

Okay. So as this lib passes through the properties for projection directly to OpenLayers I assume it's a problem (or not when using an appropriate projection) from OpenLayers or the source.
I will close this issue.

[epou]

I discovered something interesting today: it seems that OpenLayers defaults 'opaque' to false (as per their documentation here: https://openlayers.org/en/latest/apidoc/module-ol_source_XYZ-XYZ.html), whereas in vue3-openlayers, it's set to 'true' by default:

vue3-openlayers/src/components/sources/OlSourceXYZ.vue

Line 22 in 12e3260

opaque: true,

I managed to solve the issue by explicitly setting :opaque="false" -> <ol-source-xyz url='https://example.com' :opaque="false">.

[d-koppenhagen]

Interesting. I think it's better to align the defaults and probably this behavior was not implemented by intention. However, I think I will align the defaults in the future and introduce a breaking change. This will be documented of course. Thanks for digging into it. I will let this issue open since the behavior is not that clear currently.