1

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

1
  • EPSG:3857 is the official EPSG code for EPSG:900913 which never was an EPSG code. ESRI WKID 102100 is equivalent
    – nmtoken
    Commented Mar 18 at 15:02

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.