Cannot display WMS tiled layer from GeoServer(GWC) in ArcGIS Maps SDK for JavaScript 4.29

Question

I have WMS tiled service, (I guess it´s WMS-C from GeoWebCache(GWC) according to the url composition, and it´s also WMS-T with TIME dimension) at URL like this:

https://mapy.meteo.pl/geoserver/gwc/service/wms?

I am trying to display it in ArcGIS Maps SDK for JavaScript 4.29 (ArcGIS JS API 4) map app. I am using the WMSLayer class (esri/layers/WMSLayer):

const wmsLayer = new WMSLayer({        


        url: "https://mapy.meteo.pl/geoserver/gwc/service/wms?tiled=true",
        sublayers: [{name: "um:UM1_CLOUD"}],
        customLayerParameters: {
          SERVICE: 'WMS',
          REQUEST: 'GetMap',
          VERSION: '1.1.0,       
          TRANSPARENT: true,          
          FORMAT: 'image/png',
          // TIME: '2024-03-13T00:00:00Z',                   
          // DIM_FORECAST: '77',        
          TILED: true,
          WIDTH: 255,
          HEIGHT: 255,
        }  

but the map doesn´t display the tiles and GeoServer/GWC request reurns an error: "400: Requested horizontal resolution: 1961.0875069406065 , best match: 2445.9849047851562 exceeds 10% threshold. Perhaps the client is configured with an incorrect set of scales (resolutions), or the DPI setting is off compared to the one in GWC ?"

The layer I am requesting is in EPSG:900913 (other CRS is not available for this layer), which should be the same as EPSG:3857 (but is it really?). ArcGIS JS API 4 doesn´t know CRS with WKID 900913 so if I need to declare the CRS, I use

spatialReference: { wkid: 3857 }

The same WMS tiled can be viewed without problem in Leaflet using L.tileLayer.wms class (confirmed by colleague) or in OpenLayers using TileWMS class (tested myself):

...
new TileLayer({   
    source: new TileWMS({ 
      url: 'https://maps.meteo.pl/geoserver/gwc/service/wms',   
      params: {
        'LAYERS': 'um:UM1_CLOUD',     
        'FORMAT': 'image/png',
        'SERVICE': 'WMS',
        'TRANSPARENT': true,
        'VERSION': '1.1.1',
        'REQUEST': 'GetMap',
        'TIME': '2024-02-01T000000Z',
        'TILED': true,
        'DIM_FORECAST': '77',            
        'WIDTH' : 256,
        'HEIGHT' : 256
    }
    }),
  }),

and that works.

So the question is how to properly display this WMS service from GWC in ArcGIS JS API 4. How to construct the initiallization of the layer, should I use different layer class? I tried also esri/layers/WebTileLayer and esri/layers/WMTSLayer, but it did not work, they seems to be meant for other type of source data - XYZ tiling schemes (WebTileLayer) or proper WMTS services (WMTSLayer).

At one point I managed to get in ArcGIS JS API 4 one tile of 255*255 in upper-left corner, but it was always in the corner even when I moved the map and was only one tile, like this:

I need to display the whole extent of the layer. I also need to be able to access the TIME dimension of the WMS-T and DIM_FORECAST custom dimensions.

I am attaching the full code here: https://codepen.io/JuMu/pen/QWPdyvq

Answer 1

I managed to make this work with ArcGIS WMTSLayer. Here is relevant part of the code:

const UM1_CLOUD_WMTSLayer = new WMTSLayer({
  url: "https://mapy.meteo.pl/geoserver/gwc/service/wmts?",
  activeLayer: {
    id: "um:UM1_CLOUD",
  },
  customLayerParameters: {
    VERSION: '1.1.1',
    FORMAT: 'image/png',
    TIME: '2024-03-18T00:00:00Z',                   
    DIM_FORECAST: 13,   
    TRANSPARENT: true,       
    SRS: 'EPSG:900913'
  }          
});

const map = new Map({
  basemap: "topo-vector",   
  layers: [UM1_CLOUD_WMTSLayer]    
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 5,
  center: [18, 50],
  spatialReference: {
    wkid: 3857       
  }
});

and this is the result: