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:

enter image description here

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

• nmtoken: EPSG:3857 is the official EPSG code for EPSG:900913 which never was an EPSG code. ESRI WKID 102100 is equivalent

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:

enter image description here