Add WMTS Layers with API JS 3

ThibaultPetiet · ‎10-11-2022

Hi,

As part of a GIS web application, using the ArcGIS API for JavaScript version 3.19, I would like to add a WMTS Layer.

For this, I copied the code provided by the documentation : documentation. https://developers.arcgis.com/javascript/3/jssamples/layers_wmtslayer.html

url = "https://wxs.ign.fr/parcellaire/geoportail/wmts?service=WMTS&REQUEST=GetCapabilities"
var layerInfo = new esri.layers.WMTSLayerInfo({
	identifier: "PCI",
});
layerIndex = 1;
var options = {
	layerInfo: layerInfo
};

layer = new esri.layers.WMTSLayer(url, options);
this.map.addLayer(layer, layerIndex);

But the addition in the map does not go well. I get an error

The WMTS capabilities XML is not valid.

Looking more closely at the GetCapabilities request, I observe that in the url, the end "/1.0.0/GetCapabilities.xml" seems to be extra.

Is there a way to not have this addition, to no longer encounter this problem?

JoelBennett · ‎10-11-2022

I think the first problem is that you shouldn't specify the query string in the URL as seen on line 1.

Instead, it should just be

url = "https://wxs.ign.fr/parcellaire/geoportail/wmts";

You might also consider the documentation in the constructor for the resourceInfo object. When using WMTS layers, I've preferred specifying the necessary resourceInfo properties up front so that the GetCapabilities request can be bypassed entirely, and the application can just go immediately to rendering the tiles. The necessary information to specify within resourceInfo can be gathered manually from the contents of the GetCapabilities response.

ThibaultPetiet · ‎10-13-2022

Thank you for your reply. I was able to add the resource info object. And I tried to rebuild TileInfo from the GetCapabilities data.

url = "https://wxs.ign.fr/parcellaire/geoportail/wmts"

var tileInfo1 = new esri.layers.TileInfo({
	"dpi": 96,
	"spatialReference": this.map.spatialReference,
	"format": "image/png",
	"origin": {
		"x": 0.0000000000000000,
		"y": 12000000.0000000000000000,
	},
	"lods": lods,
});

var layerInfo = new esri.layers.WMTSLayerInfo({
	format: "image/png",
	fullExtent: this.map.extent,
	initialExtent : this.map.extent,
	identifier: "CADASTRALPARCELS.PARCELS",
	tileInfo: tileInfo1,
	tileMatrixSet: "LAMB93",
	title: "Parcelles cadastrales"
});

var resourceInfo = {
	version: "1.0.0",
	layerInfos: [layerInfo],
}

var options = {
	resourceInfo: resourceInfo,
	serviceMode: "KVP",
};

layer = new esri.layers.WMTSLayer(url, options);

this.map.addLayer(layer, layerIndex);

The layer object is well created but the addition to the map does not take place. Do you think it's a parameter issue or something else ?

JoelBennett · ‎10-17-2022

I'm afraid my time available to help is very limited. The best I might offer at this point is what I would try next if it were me. I would avoid specifying parameters in the constructor for TileInfo since it's not well documented (and maybe even the same for WMSTileInfo).

For example, instead of something like:

var tileInfo = new TileInfo({
	propertyName1: propertValue1,
	propertyName2: propertValue2
});

maybe something like:

var tileInfo = new TileInfo();
tileInfo.propertyName1 = tileInfo.propertyValue1;
tileInfo.propertyName2 = tileInfo.propertyValue2;

In doing that, be sure to use fully instantiated objects as well. For example, when specifying the origin property, I recommend using an Point object instance with its spatialReference specified. The way you presently have it as an object literal, I'm not sure what the API would do, and since there's no spatialReference specified, it would default to WGS 84 (4326), but I can tell you're not trying to use that.

Another example, is that in the "format" property for TileInfo, the documentation for that property accepts the values "png8", "png24", "png32", and "jpg", but you have "image/png".

I hope that helps...I apologize for not being able to do more.

Bertrand_Laurancin · ‎10-21-2022

Hello,

It works like this :

https://codepen.io/blaurancin/pen/abGeWZJ

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Add WMTS Layer</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.41/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.41/"></script>

  <script>
    require([
      "esri/map", "esri/layers/WMTSLayer", "esri/layers/WMTSLayerInfo",
      "esri/geometry/Extent", "esri/layers/TileInfo", "esri/SpatialReference", "esri/geometry/Point",
      "dojo/domReady!"
    ], function(
      Map, WMTSLayer, WMTSLayerInfo,
      Extent, TileInfo, SpatialReference, Point,
    ) {
      // parser.parse();
      var bounds = new Extent({
        "xmin": 14000,
        "ymin": 6000000,
        "xmax": 1200000,
        "ymax": 8100000,
        "spatialReference": {
          "wkid": 2154
        }
      });
      var map = new Map("mapDiv", {
        extent: bounds
      });
      map.spatialReference = new SpatialReference({
        wkid: 2154
      });
      // les paramètres tile matrix
      var tileInfo = new TileInfo({
        "dpi": 96,
        "format": "png",
        "spatialReference": new SpatialReference({
          "wkid": 2154
        }),
        "rows": 256,
        "cols": 256,
        "origin": {
          "x": 0,
          "y": 12000000
        },
        "lods": [{
          "level": "0",
          "scale": 373497230.5353357571875677,
          "resolution": 104579.2245498940
        }, {
          "level": "1",
          "scale": 186705472.6921089404495433,
          "resolution": 52277.5323537905
        }, {
          "level": "2",
          "scale": 93341025.2806978682347108,
          "resolution": 26135.4870785954
        }, {
          "level": "3",
          "scale": 46667469.2207142901243060,
          "resolution": 13066.8913818000
        }, {
          "level": "4",
          "scale": 23332959.3004053602435306,
          "resolution": 6533.2286041135
        }, {
          "level": "5",
          "scale": 11666284.0159382160591122,
          "resolution": 3266.5595244627
        }, {
          "level": "6",
          "scale": 5833092.8735621436167094,
          "resolution": 1633.2660045974
        }, {
          "level": "7",
          "scale": 2916534.1249500003143567,
          "resolution": 816.6295549860
        }, {
          "level": "8",
          "scale": 1458263.9809885714915936,
          "resolution": 408.3139146768
        }, {
          "level": "9",
          "scale": 729131.2196817857459905,
          "resolution": 204.1567415109
        }, {
          "level": "10",
          "scale": 364565.417082857155833,
          "resolution": 102.0783167832
        }, {
          "level": "11",
          "scale": 182282.6603450000154965,
          "resolution": 51.0391448966
        }, {
          "level": "12",
          "scale": 91141.3181225000130965,
          "resolution": 25.5195690743
        }, {
          "level": "13",
          "scale": 45570.6560485714301016,
          "resolution": 12.7597836936
        }, {
          "level": "14",
          "scale": 22785.3272714285733418,
          "resolution": 6.3798916360
        }]
      });
      var tileInfo2 = new TileInfo({
        dpi: 96,
        height: 256,
        lods: [{
            "level": 0,
            "resolution": 2000.0000000000002,
            "scale": 7559040
          },
          {
            "level": 1,
            "resolution": 1000.0000000000001,
            "scale": 3779520
          },
          {
            "level": 2,
            "resolution": 500.00000000000006,
            "scale": 1889760
          },
          {
            "level": 3,
            "resolution": 250.00000000000003,
            "scale": 944880
          },
          {
            "level": 4,
            "resolution": 100,
            "scale": 377952
          },
          {
            "level": 5,
            "resolution": 50,
            "scale": 188976
          },
          {
            "level": 6,
            "resolution": 25,
            "scale": 94488
          },
          {
            "level": 7,
            "resolution": 9.9999470832275,
            "scale": 37795
          },
          {
            "level": 8,
            "resolution": 5.000105833545001,
            "scale": 18898
          },
          {
            "level": 9,
            "resolution": 2.5000529167725003,
            "scale": 9449
          },
          {
            "level": 10,
            "resolution": 1.0001270002540006,
            "scale": 3780
          },
          {
            "level": 11,
            "resolution": 0.5000635001270003,
            "scale": 1890
          },
          {
            "level": 12,
            "resolution": 0.26458386250105836,
            "scale": 1000
          },
          {
            "level": 13,
            "resolution": 0.13229193125052918,
            "scale": 500
          },
          {
            "level": 14,
            "resolution": 0.06614596562526459,
            "scale": 225
          },
          {
            "level": 15,
            "resolution": 0.026458386250105836,
            "scale": 100
          },
          {
            "level": 16,
            "resolution": 0.013229193125052918,
            "scale": 50
          }
        ],
        origin: new Point(0.0000000000000000, 12000000.0000000000000000, new SpatialReference(2154)),
        spatialReference: new SpatialReference(2154),
        width: 256
      });
      var tileInfo3 = new TileInfo({
        dpi: 96,
        height: 256,
        lods: [{
          "level": 0,
          "scale": 395260061.290938,
          "resolution": 104579.22454989403
        }, {
          "level": 1,
          "scale": 197584374.25054678,
          "resolution": 52277.532353790506
        }, {
          "level": 2,
          "scale": 98779793.68288027,
          "resolution": 26135.487078595404
        }, {
          "level": 3,
          "scale": 49386676.08869292,
          "resolution": 13066.891381800004
        }, {
          "level": 4,
          "scale": 24692517.558854178,
          "resolution": 6533.228604113501
        }, {
          "level": 5,
          "scale": 12346051.74600076,
          "resolution": 3266.5595244627007
        }, {
          "level": 6,
          "scale": 6172973.875643717,
          "resolution": 1633.2660045974
        }, {
          "level": 7,
          "scale": 3086473.908608504,
          "resolution": 816.629554986
        }, {
          "level": 8,
          "scale": 1543233.6932666455,
          "resolution": 408.3139146768
        }, {
          "level": 9,
          "scale": 771616.0309073386,
          "resolution": 204.15674151090005
        }, {
          "level": 10,
          "scale": 385807.811464063,
          "resolution": 102.0783167832
        }, {
          "level": 11,
          "scale": 192903.8547273071,
          "resolution": 51.03914489660001
        }, {
          "level": 12,
          "scale": 96451.91461152758,
          "resolution": 25.519569074300005
        }, {
          "level": 13,
          "scale": 48225.954117543304,
          "resolution": 12.7597836936
        }, {
          "level": 14,
          "scale": 24112.976262047247,
          "resolution": 6.379891636000001
        }, {
          "level": 15,
          "scale": 12056.487931842521,
          "resolution": 3.1899457653
        }, {
          "level": 16,
          "scale": 6028.243916220473,
          "resolution": 1.5949728695
        }, {
          "level": 17,
          "scale": 3014.121945826772,
          "resolution": 0.7974864315000002
        }, {
          "level": 18,
          "scale": 1507.0609697007874,
          "resolution": 0.39874321490000003
        }, {
          "level": 19,
          "scale": 753.5304842834646,
          "resolution": 0.1993716073
        }],
        origin: new Point(0.0000000000000000, 12000000.0000000000000000, new SpatialReference(2154)),
        spatialReference: new SpatialReference(2154),
        width: 256
      });
      // console.log(tileInfo2);
      var tileExtent2 = new Extent(14000, 6000000, 1200000, 8100000, new SpatialReference({
        wkid: 2154
      }));
      var layerInfo2 = new WMTSLayerInfo({
        tileInfo: tileInfo,
        fullExtent: tileExtent2,
        initialExtent: tileExtent2,
        identifier: "CADASTRALPARCELS.PARCELS.L93",
        tileMatrixSet: "LAMB93",
        format: "png",
        style: "normal"
      });
      // console.log(layerInfo2);
      var resourceInfo = {
        version: "1.0.0",
        layerInfos: [layerInfo2],
        copyright: "IGN"
      };
      // console.log(resourceInfo);
      var options = {
        serviceMode: "KVP",
        resourceInfo: resourceInfo,
        layerInfo: layerInfo2
      };
      // console.log(options);
      var wmtsLayer = new WMTSLayer("https://wxs.ign.fr/lambert93/geoportail/wmts", options);
      console.log(wmtsLayer);
      map.addLayer(wmtsLayer);
      console.log("map.spatialReference", map.spatialReference)
      console.log("wmtsLayer", wmtsLayer)
      for (var i = 0; i < wmtsLayer.layerInfos[0].tileInfo.lods.length; i++) {
        console.log(i + ":");
        console.log("endTileCol:" + wmtsLayer.layerInfos[0].tileInfo.lods[i].endTileCol);
        console.log("endTileRow:" + wmtsLayer.layerInfos[0].tileInfo.lods[i].endTileRow);
        console.log("level:" + wmtsLayer.layerInfos[0].tileInfo.lods[i].level);
        console.log("resolution:" + wmtsLayer.layerInfos[0].tileInfo.lods[i].resolution);
        console.log("scale:" + wmtsLayer.layerInfos[0].tileInfo.lods[i].scale);
        console.log("startTileCol:" + wmtsLayer.layerInfos[0].tileInfo.lods[i].startTileCol);
        console.log("startTileRow:" + wmtsLayer.layerInfos[0].tileInfo.lods[i].startTileRow);
      }
    });
  </script>

<body>
  <div id="mapDiv">

  </div>
</body>

</html>

Bertrand_Laurancin · ‎10-21-2022

Or like this :

https://codepen.io/blaurancin/pen/VwxNPgW

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Add WMTS Layer</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.41/esri/css/esri.css">
  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
  <script src="https://js.arcgis.com/3.41/"></script>
  <script>
    require([
      "esri/map",
      "esri/layers/WMTSLayer",
      "esri/layers/WMTSLayerInfo",
      "esri/layers/TileInfo",
      "esri/SpatialReference",
      "esri/geometry/Extent",
      "esri/geometry/Point",
      "esri/config",
      "dojo/domReady!"
    ], function(
      Map, WMTSLayer, WMTSLayerInfo, TileInfo, SpatialReference, Extent, Point, esriConfig
    ) {
      esriConfig.defaults.io.corsEnabledServers.push("wxs.ign.fr", "codepen.io");
      const extent2154 = new Extent({
        "xmin": 14000,
        "ymin": 6000000,
        "xmax": 1200000,
        "ymax": 8100000,
        "spatialReference": {
          "wkid": 2154
        }
      });
      const map = new Map("mapDiv", {
        // basemap: "topo-vector",
        // center: [2.4641536, 48.8210432], //27.988056, 86.925
        zoom: 18,
        extent: extent2154
      });
      map.spatialReference = new SpatialReference({
        wkid: 2154
      });
      const tileInfo = new TileInfo({
        "dpi": 96,
        "format": "png",
        "spatialReference": new SpatialReference({
          "wkid": 2154
        }),
        "rows": 256,
        "cols": 256,
        "origin": {
          "x": 0,
          "y": 12000000
        },
        "lods": [{
          "level": "0",
          "scale": 373497230.5353357571875677,
          "resolution": 104579.2245498940
        }, {
          "level": "1",
          "scale": 186705472.6921089404495433,
          "resolution": 52277.5323537905
        }, {
          "level": "2",
          "scale": 93341025.2806978682347108,
          "resolution": 26135.4870785954
        }, {
          "level": "3",
          "scale": 46667469.2207142901243060,
          "resolution": 13066.8913818000
        }, {
          "level": "4",
          "scale": 23332959.3004053602435306,
          "resolution": 6533.2286041135
        }, {
          "level": "5",
          "scale": 11666284.0159382160591122,
          "resolution": 3266.5595244627
        }, {
          "level": "6",
          "scale": 5833092.8735621436167094,
          "resolution": 1633.2660045974
        }, {
          "level": "7",
          "scale": 2916534.1249500003143567,
          "resolution": 816.6295549860
        }, {
          "level": "8",
          "scale": 1458263.9809885714915936,
          "resolution": 408.3139146768
        }, {
          "level": "9",
          "scale": 729131.2196817857459905,
          "resolution": 204.1567415109
        }, {
          "level": "10",
          "scale": 364565.417082857155833,
          "resolution": 102.0783167832
        }, {
          "level": "11",
          "scale": 182282.6603450000154965,
          "resolution": 51.0391448966
        }, {
          "level": "12",
          "scale": 91141.3181225000130965,
          "resolution": 25.5195690743
        }, {
          "level": "13",
          "scale": 45570.6560485714301016,
          "resolution": 12.7597836936
        }, {
          "level": "14",
          "scale": 22785.3272714285733418,
          "resolution": 6.3798916360
        }]
      });
      // map._params.tileInfo = tileInfo3;
      // map.__tileInfo = tileInfo3;
      const url = "https://wxs.ign.fr/lambert93/geoportail/wmts";
      const layerInfo = new esri.layers.WMTSLayerInfo({
        tileInfo: tileInfo,
        identifier: "CADASTRALPARCELS.PARCELS.L93",
        tileMatrixSet: "LAMB93",
        format: "png",
        fullExtent: extent2154,
        initialExtent: extent2154,
        style: "normal"
      });
      const options = {
        serviceMode: "KVP",
        minScale: 100000000,
        maxScale: 200,
        layerInfo: layerInfo
      };
      const aLayers = [];
      // ESRI basemaps
      const strEsriUrl = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
      const esriLayer = new esri.layers.ArcGISTiledMapServiceLayer(strEsriUrl);
      const ignWmtsLayer = new esri.layers.WMTSLayer(url, options);
      //
      console.log("esriLayer", esriLayer)
      console.log("ignWmtsLayer", ignWmtsLayer)
      console.log("map.spatialReference", map.spatialReference)
      // console.log("map", map)
      aLayers.push(ignWmtsLayer);
      // aLayers.push(esriLayer);
      map.addLayers(aLayers);
    });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>

</html>

Bertrand_Laurancin · ‎10-25-2022

The scales are defined here :

https://geoservices.ign.fr/documentation/services/api-et-services-ogc/images-tuilees-wmts-ogc