Problem display with WMS and WMTS

LionelGOUBET — Wed, 14 Sep 2022 08:50:02 GMT

Hi,

Depending on the order of raster backgrounds specified for the map,
the WMTS service is not displayed when the first layer is the IGN WMS service.

Apparently the problem comes from the fact that the capabilities service returns the
<CRS>CRS:84</CRS> first but not 3857 but how to change it ?

My sample code for test (see join file wms_wmts_ign_arcgis.zip)

// Add layers to array

// esri first one => OK it works
/*aLayers.push(esriLayer);
aLayers.push(ignWmtsLayer);
aLayers.push(ignWmsLayer);*/

// wmts first one => OK it works
/*aLayers.push(ignWmtsLayer);
aLayers.push(ignWmsLayer);
aLayers.push(esriLayer);*/

// wms first one => NO it doesn't work => how change CRS WMS in spatialreferences ?
aLayers.push(ignWmsLayer);
aLayers.push(ignWmtsLayer);
aLayers.push(esriLayer);

Thanks for your help

Re: Problem display with WMS and WMTS

JoelBennett — Wed, 14 Sep 2022 18:02:29 GMT

The issue you're running into is the same underlying issue discussed here: the 3.x API can have problems with tiled layers when the first layer added to the map is not tiled. The solution is to define the map's tiling info up front.

Try this instead, which would replace your current call to "require":

require([ "esri/map","esri/SpatialReference", "esri/geometry/Extent", "esri/layers/WMSLayer", "esri/layers/WMSLayerInfo", "esri/layers/WMTSLayer", "esri/layers/WMTSLayerInfo", "esri/config", "esri/layers/TileInfo", "esri/geometry/Point", "dojo/domReady!" ], function( Map, SpatialReference, Extent, WMSLayer,WMSLayerInfo, WMTSLayer, WMTSLayerInfo, esriConfig, TileInfo, Point ) { var extent3857 = new Extent({ xmin: 612056.7798435382, ymin: 5682778.707431033, xmax: 822811.5409472634, ymax: 5780363.363667572, spatialReference: { wkid: 102100, latestWkid: 3857 } }); var extent4326 = new Extent({ xmin: 5.7238, ymin: 45.6390, xmax: 5.984802, ymax: 45.828799, spatialReference: { wkid: 4326 } }); esriConfig.defaults.io.proxyUrl = "/AP_voirie/web/kernel/proxy/proxy.ashx"; map = new Map("map", { extent:extent3857,//pseudo mercator, zoom: 13 }); var tileInfo = new TileInfo({ dpi: 96, height: 256, lods: [ { level: 0, resolution: 156543.033928, scale: 591657527.591555 }, { level: 1, resolution: 78271.5169639999, scale: 295828763.795777 }, { level: 2, resolution: 39135.7584820001, scale: 147914381.897889 }, { level: 3, resolution: 19567.8792409999, scale: 73957190.948944 }, { level: 4, resolution: 9783.93962049996, scale: 36978595.474472 }, { level: 5, resolution: 4891.96981024998, scale: 18489297.737236 }, { level: 6, resolution: 2445.98490512499, scale: 9244648.868618 }, { level: 7, resolution: 1222.99245256249, scale: 4622324.434309 }, { level: 8, resolution: 611.49622628138, scale: 2311162.217155 }, { level: 9, resolution: 305.748113140558, scale: 1155581.108577 }, { level: 10, resolution: 152.874056570411, scale: 577790.554289 }, { level: 11, resolution: 76.4370282850732, scale: 288895.277144 }, { level: 12, resolution: 38.2185141425366, scale: 144447.638572 }, { level: 13, resolution: 19.1092570712683, scale: 72223.819286 }, { level: 14, resolution: 9.55462853563415, scale: 36111.909643 }, { level: 15, resolution: 4.77731426794937, scale: 18055.954822 }, { level: 16, resolution: 2.38865713397468, scale: 9027.977411 }, { level: 17, resolution: 1.19432856685505, scale: 4513.988705 }, { level: 18, resolution: 0.59716428355981721, scale: 2256.994353 }, { level: 19, resolution: 0.29858214164761665, scale: 1128.4971760000001 }, { level: 20, resolution: 0.1492910708899543, scale: 564.248588 }, { level: 21, resolution: 0.0746455354449772, scale: 282.124294 }, { level: 22, resolution: 0.0373227677224886, scale: 141.062147 }, { level: 23, resolution: 0.0186613838612443, scale: 70.5310735 }, { level: 24, resolution: 0.0093306919306222, scale: 35.26553675 } ], origin: new Point(-20037508.342787, 20037508.342787, new SpatialReference(3857)), spatialReference: new SpatialReference(3857), width: 256 }); map._params.tileInfo = tileInfo; map.__tileInfo = tileInfo; dojo.connect(map, "onLoad", function () { console.log("maponload"); //ignWmsLayer.spatialReference = { wkid: 102100, latestWkid: 3857 } ; //ignWmtsLayer.spatialReference = { wkid: 102100, latestWkid: 3857 } ; //ignWmsLayer.spatialReferences[0] = 3857; console.log(ignWmsLayer.spatialReferences); console.log("spatialReference esriLayer : " , esriLayer.spatialReference); console.log("spatialReference ignwms : " , ignWmsLayer.spatialReference); console.log("spatialReference ignWmtsLayer : " , ignWmtsLayer.spatialReference); }); var aLayers = []; // ESRI basemaps var strEsriUrl = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"; esriLayer = new esri.layers.ArcGISTiledMapServiceLayer(strEsriUrl); // IGN basemaps // WMS // https://wxs.ign.fr/cartes/geoportail/r/wms?request=GetCapabilities&service=WMS // Premier systeme de coordonnées de référence : CRS:84 comment le changer au chargement var strIgnWmsUrl = "https://wxs.ign.fr/cartes/geoportail/r/wms"; /* Test avec Layer info var WMSLayerInfo1 = new esri.layers.WMSLayerInfo({ name: 'SCANREG_PYR-JPEG_WLD_WM', title: 'SCANREG_PYR-JPEG_WLD_WM', spatialReferences : [3857] }); var resourcesInfo = { layerInfos: [WMSLayerInfo1], spatialReferences : [3857], extent: extent3857 }; ignWmsLayer = new esri.layers.WMSLayer(strIgnWmsUrl, { format: "jpeg", minScale: 100000000, maxScale: 200, resourceInfo : resourcesInfo, visibleLayers: ["SCANREG_PYR-JPEG_WLD_WM"], transparent: true, id: "WMS ScanRegion" }); */ ignWmsLayer = new esri.layers.WMSLayer(strIgnWmsUrl, { format: "jpeg", minScale: 100000000, maxScale: 200, visibleLayers: ["SCANREG_PYR-JPEG_WLD_WM"], transparent: true, id: "WMS ScanRegion" }); // WMTS // https://wxs.ign.fr/ortho/geoportail/wmts?request=GetCapabilities&service=WMTS&version=1.0.0 var strIgnWmtsUrl = "https://wxs.ign.fr/ortho/geoportail/wmts"; var layerInfo = new esri.layers.WMTSLayerInfo({ identifier: "ORTHOIMAGERY.ORTHOPHOTOS", tileMatrixSet: "PM", format: "jpeg" }); var ignOptions = { serviceMode: "KVP", minScale: 100000000, maxScale: 200, layerInfo: layerInfo }; ignWmtsLayer = new esri.layers.WMTSLayer(strIgnWmtsUrl, ignOptions); // Add layers to array // esri first one => OK it works /*aLayers.push(esriLayer); aLayers.push(ignWmtsLayer); aLayers.push(ignWmsLayer);*/ // wmts first one => OK it works /*aLayers.push(ignWmtsLayer); aLayers.push(ignWmsLayer); aLayers.push(esriLayer);*/ // wms first one => NO it doesn't work => how change CRS WMS in spatialreferences ? aLayers.push(ignWmsLayer); aLayers.push(ignWmtsLayer); aLayers.push(esriLayer); // setVisibility first layer for (let index = 0; index < aLayers.length; index++) { let layer = aLayers[index]; if (index == 0) layer.setVisibility(true); else layer.setVisibility(false); } // Add basemaps layers map.addLayers(aLayers); });

Re: Problem display with WMS and WMTS

LionelGOUBET — Thu, 15 Sep 2022 13:00:28 GMT

OK thanks a lot ... it works 😁

I suppose you guess you found the tile values with the properties "level" on https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer

I can found the others values on wmts capabilities if I need on element TileMatrixSet
sample : https://wxs.ign.fr/ortho/geoportail/wmts?request=GetCapabilities&service=WMTS&version=1.0.0;

this is the reason why it work with wmts at first.

However, this solution is not automatic...

topic Re: Problem display with WMS and WMTS in ArcGIS JavaScript Maps SDK Questions

Problem display with WMS and WMTS

Re: Problem display with WMS and WMTS

Re: Problem display with WMS and WMTS