Uncaught (in promise) Error: resolutions must be sorted in descending order

[jeancaffou]

Describe the bug
WMTS layers not working on latest versions of vue3-openlayers, Vite, crashes with:

vue3-openlayers.js?v=51cfb193:959 Uncaught (in promise) Error: `resolutions` must be sorted in descending order
    at assert (vue3-openlayers.js?v=51cfb193:959:11)
    at new TileGrid (vue3-openlayers.js?v=51cfb193:19924:5)
    at new WMTSTileGrid (vue3-openlayers.js?v=51cfb193:20414:5)
    at ComputedRefImpl.fn (vue3-openlayers.js?v=51cfb193:85726:14)
    at refreshComputed (chunk-EPASFQWC.js?v=51cfb193:636:29)
    at get value (chunk-EPASFQWC.js?v=51cfb193:1828:5)
    at setup (vue3-openlayers.js?v=51cfb193:85735:26)
    at callWithErrorHandling (chunk-EPASFQWC.js?v=51cfb193:2263:19)
    at setupStatefulComponent (chunk-EPASFQWC.js?v=51cfb193:9983:25)
    at setupComponent (chunk-EPASFQWC.js?v=51cfb193:9944:36)

Affected version(s)

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]

To Reproduce
Steps to reproduce the behavior:

1. install latest Quasar
2. install latest vue3-openlayers, ol
3. add WMTS tile layer

<ol-tile-layer :opacity="1" :z-index="0"><ol-source-wmts url="https://karstdb.zrc-sazu.si/gis/" matrixSet="EPSG:3857" format="image/png" layer="lidar-tif" styles="default" /></ol-tile-layer>

Additional context
On previous versions it was working

[lmc3s3f0r]

Having the exact same error. Here's hoping for a fix.

[jeancaffou]

As a workaround I have added the tile-grid definition:

<ol-tile-layer :opacity="1" :z-index="0"><ol-source-wmts url="https://karstdb.zrc-sazu.si/gis/" :tile-grid="tileGrid" matrixSet="EPSG:3857" format="image/jpeg" layer="lidar-tif" styles="default" /></ol-tile-layer>

export default {
  computed: {
    tileGrid() {
      // Use full precision values and an explicit extent for EPSG:3857.
      // The standard Web Mercator extent:
      const extent = [-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244];
      // The origin is the top-left corner of the extent:
      const origin = [extent[0], extent[3]];  // [-20037508.342789244, 20037508.342789244]

      // Use more precise resolution values calculated as:
      // resolution = ScaleDenominator × 0.00028
      const resolutions = [
        156543.03392804097,
        78271.51696402048,
        39135.75848201024,
        19567.87924100512,
        9783.93962050256,
        4891.96981025128,
        2445.98490512564,
        1222.99245256282,
        611.49622628141,
        305.748113140705,
        152.8740565703525,
        76.43702828517625,
        38.21851414258813,
        19.109257071294063,
        9.554628535647032,
        4.777314267823516,
        2.388657133911758,
        1.194328566955879,
        0.5971642834779395
      ];

      // Create matrix IDs for zoom levels 0–18.
      const matrixIds = resolutions.map((_, z) => z.toString());

      // Create the WMTS tile grid instance.
      const tileGrid = new WMTS({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds,
        tileSize: [256, 256],
        extent: extent // explicitly set the extent to help with alignment
      });

      return tileGrid
    }
  }
}