Make sure labels and symbols do not get cut off in XYZ Tiles mode about qgis-js HOT 5 CLOSED

I will try that out, thanks!

The downside is that we will probably render (or at least take into consideration) more data than actually necessary to render the whole extent? In this sense, the OpenLayers canvas source will be more economical (and probably more performant). But let’s see it in action and compare then.

Maybe a bit off topic here, but during testing of #8 I got aware of devicePixelContentBox (see here for a nice write up). I added this method to the pure JS implementation. The nice thing about this is, that when for example the whole page gets zoomed, it will use all the physicals pixels (so the canvas size / rendered image will actually grow), but also increase the devicePixelRatio, so that the rendered map will look the same (besides any symbols in px). OpenLayers doesn't do that, it will just stretch the canvas. So maybe it is worth investing some more time into a custom canvas renderer anyways...

from qgis-js.

The downside is that we will probably render (or at least take into consideration) more data than actually necessary to render the whole extent? In this sense, the OpenLayers canvas source will be more economical (and probably more performant). But let’s see it in action and compare then.

Yes - I am aware of this - that it will have a performance impact - but getting proper labels, diagrams and point symbols at tile borders that aren't cut off is important. The user can decide what mode (canvas vs xyz) should be used.

The XYZ mode also has advantages when panning at the same zoom level. It can then use the cached tiles.

from qgis-js.

I've added the "Extent Buffer Factor" (as discussed yesterday) to the QgisXYZDataSourceOptions

With a value of 0.5 the labels of the "AoS - Precipitation per balance basin" demo map seem to look good.

When the next build job finishes, you can test it on the project site

Let me know what you think and what would be a good default value to add here and here

I also did some performance testing:

console.log("Start 'extentBufferFactor' test");
const doTest = async (buffer: number) => {
for (let x = 0; x < 10; x++) {
  for (let y = 0; y < 10; y++) {
    await api.renderXYZTile(16099 + x, 10959 + y, 15, 256, 1, buffer);
  }
}
};
for (let i = 0; i < 5; i += 0.25) {
const timer = "with buffer " + i.toFixed(2);
console.time(timer);
await doTest(i);
console.timeEnd(timer);
}
console.log("End 'extentBufferFactor' test");

Start 'extentBufferFactor' test
with buffer 0.00: 4369.24ms - timer ended
with buffer 0.25: 4090.8ms - timer ended
with buffer 0.50: 4067.74ms - timer ended
with buffer 0.75: 4187.72ms - timer ended
with buffer 1.00: 4178.3ms - timer ended
with buffer 1.25: 4258.8ms - timer ended
with buffer 1.50: 4344.56ms - timer ended
with buffer 1.75: 4224.42ms - timer ended
with buffer 2.00: 4229.26ms - timer ended
with buffer 2.25: 4306.76ms - timer ended
with buffer 2.50: 4326.92ms - timer ended
with buffer 2.75: 4397.78ms - timer ended
with buffer 3.00: 4353.14ms - timer ended
with buffer 3.25: 4342.84ms - timer ended
with buffer 3.50: 4391.06ms - timer ended
with buffer 3.75: 4504.52ms - timer ended
with buffer 4.00: 4493.12ms - timer ended
with buffer 4.25: 4386.26ms - timer ended
with buffer 4.50: 4535.62ms - timer ended
with buffer 4.75: 4333.3ms - timer ended
End 'extentBufferFactor' test

Start 'extentBufferFactor' test
with buffer 0.00: 5465.216796875 ms
with buffer 0.25: 5771.030029296875 ms
with buffer 0.50: 5685.670166015625 ms
with buffer 0.75: 5565.19091796875 ms
with buffer 1.00: 5318.02294921875 ms
with buffer 1.25: 5480.2861328125 ms
with buffer 1.50: 5370.35693359375 ms
with buffer 1.75: 5334.903076171875 ms
with buffer 2.00: 5177.893798828125 ms
with buffer 2.25: 5221.556884765625 ms
with buffer 2.50: 5656.748046875 ms
with buffer 2.75: 5537.4580078125 ms
with buffer 3.00: 5761.090087890625 ms
with buffer 3.25: 5696.218017578125 ms
with buffer 3.50: 5590.222900390625 ms
with buffer 3.75: 5731.06689453125 ms
with buffer 4.00: 5599.095947265625 ms
with buffer 4.25: 5574.143798828125 ms
with buffer 4.50: 5230.76220703125 ms
with buffer 4.75: 5712.307373046875 ms
End 'extentBufferFactor' test

🤔

So the factor has either a negligible effect, the implementation (or test) is broken, or QGIS will cache the data in a way, that it makes no sense to re-render the same tiles for a measurement like this..?

from qgis-js.

Thank you @boardend for adding the "extent buffer factor"

I don't know why the test results are so unexpected.

I think 0.5 would be a good default value.

from qgis-js.

@boardend - I think we can close this issue. The solution provided works fine for me!

from qgis-js.