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)

+-- ol-contextmenu@5.5.0
+-- ol-ext@4.0.27
+-- ol@10.4.0
+-- vue@3.5.13
`-- vue3-openlayers@11.5.0

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
    }
  }
}

[lmc3s3f0r]

EDIT: forget the rest of the message. It did work. The error came because I forgot I uncommented my previous component, the one that was producing the error.

Thanks very much!

---

Original message:

Hi @jeancaffou

I tried your approach in my app, and it works with your data, but when I apply it to my project, I still get the error 500 "resolutions must be sorted in descending order", and I do have them in descending order.

Here's some more info:

• wmts url: 'https://wmts-mapa-lidar.idee.es/lidar'
• capabilities url: https://wmts-mapa-lidar.idee.es/lidar?SERVICE=WMTS&REQUEST=GetCapabilities
• layer: 'EL.GridCoverageDSM'
• matrixSet: 'GoogleMapsCompatible'
• format: 'image/png'
• style: 'default'

This is the component I've been able to do so far. I can briefly see the layer on the map, but the error 500 "resolutions must be sorted in descending order" appears a few miliseconds after page load is finished:

<template>
  <ol-tile-layer :opacity="1" :z-index="9999">
    <ol-source-wmts
      :url="wmtsUrl"
      :layer="layer"
      :matrix-set="matrixSet"
      :format="format"
      :tile-grid="tileGrid"
      :style="style"
      projection="EPSG:3857"
    />
  </ol-tile-layer>
</template>

<script setup lang="ts">
import { get as getProjection } from 'ol/proj'
import { getTopLeft, getWidth } from 'ol/extent'
import WMTSTileGrid from 'ol/tilegrid/WMTS'

// === WMTS Config (Spain lidar service) ===
const wmtsUrl = 'https://wmts-mapa-lidar.idee.es/lidar'
const layer = 'EL.GridCoverageDSM'
const matrixSet = 'GoogleMapsCompatible'
const format = 'image/png'
const style = 'default'

// === Compute WMTS TileGrid for GoogleMapsCompatible matrix set ===
const projection = getProjection('EPSG:3857')!
const extent = projection.getExtent()

const resolutions = Array.from(
  { length: 21 },
  (_, z) => getWidth(extent) / 256 / Math.pow(2, z)
)
console.log('resolutions', resolutions)

const matrixIds = Array.from({ length: 21 }, (_, z) => z.toString())
console.log('matrixIds', matrixIds)
const tileGrid = computed(() => {
  return new WMTSTileGrid({
    origin: getTopLeft(extent),
    resolutions,
    matrixIds,
    tileSize: [256, 256]
  })
})
</script>

The "console.log('resolutions', resolutions)" line returns this:

[
    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,
    0.29858214173896974, // ***
    0.14929107086948487 // ***
]

(***) Apart from these two, the rest of the array is the same as in your example

And this is what the matrixIds console log shows:

[
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10",
    "11",
    "12",
    "13",
    "14",
    "15",
    "16",
    "17",
    "18",
    "19",
    "20"
]

I tried:

• changing matrixSet from GoogleMapsCompatible to EPSG:3857
• Hardcoding extent and resolutions instead of calculating them

No luck so far. I can't figure out where the problem is. I think the error message is misleading, because the resolutions are indeed in descending order.

[jeancaffou]

As another workaround you might try using the <ol-source-xyz> where you build the WMTS URL mapping the correct parameter {x}, {y} to TILEROW and TILECOL, and {z} for ZOOM. For EPSG:3857 I have tested it and it worked. Also take note that TMS and XYZ sources are functionally the same, jst that te {y} is inverted.

[lmc3s3f0r]

Thanks a lot! I'll check it :)

[andreighh]

Just my opinion, but I think we should be able to pass the capabilities URL and the library should do everything by itself.

Take a look at how rlayers does it for React

https://mmomtchev.github.io/rlayers/api/#rlayerwmts
https://github.com/mmomtchev/rlayers/blob/main/src/layer/RLayerWMTS.tsx