Problem display with WMS and WMTS

[LionelGOUBET]

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

[JoelBennett · Accepted solution]

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

[LionelGOUBET]

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