WMTS tiles images in wrong order

PauPérez_Puigcerver

I'm loading a WMTS layer in my html viewer (API for JavaScript 2.4), but the tiles in the layer are displayed in wrong order (see attached image).

I'm using this code to load the WMTS layer:

dojo.declare("ogc.WMTSLayer", esri.layers.TiledMapServiceLayer, { // create WMTSLayer by extending esri.layers.TiledMapServiceLayer
constructor: function() {
this.spatialReference = new esri.SpatialReference({wkid: 25830});
this.initialExtent = new esri.geometry.Extent(600000, 4150000, 850000, 4550000, this.spatialReference);
this.fullExtent = new esri.geometry.Extent(600000, 4150000, 850000, 4550000, this.spatialReference);
//
this.tileInfo = new esri.layers.TileInfo({
"dpi": "90.71428571427429",
"format": "image/png",
"compressionQuality": 0,
"spatialReference": {"wkid": "25830"},
"rows": 256,
"cols": 256,
"origin": {
"x": 600000,
"y": 4550000
},
"lods": [{
"level": "00",
"scale": 1600000,
"resolution": 448
}, {
"level": "01",
"scale": 1000000,
"resolution": 280
}, {
"level": "02",
"scale": 800000,
"resolution": 224
}, {
"level": "03",
"scale": 600000,
"resolution": 168
}, {
"level": "04",
"scale": 500000,
"resolution": 140
}, {
"level": "05",
"scale": 400000,
"resolution": 112
}, {
"level": "06",
"scale": 300000,
"resolution": 84
}, {
"level": "07",
"scale": 250000,
"resolution": 70
}, {
"level": "08",
"scale": 10000,
"resolution": 2.8
}]
});
this.loaded = true;
this.onLoad(this);
},

getTileUrl: function(level, row, col) {
return "http://cartoplora:8081/service" + "?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile" + "&LAYER=orto_icv" + "&STYLE=_null" + "&FORMAT=image/png" + "&TILEMATRIXSET=grid_orto" + "&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col;
}
});

How can I do to load the tile rows in the correct order?

Thanks in advance.

Pau Pérez
PRODEVELOP S.L.
Conselleria de infraestructuras, Territorio y Medio Ambiente.
http://cartoweb.cma.gva.es

tiles_wmts.jpg

20220207NetworkIssueScreenShot2.jpg

image3.png

bobcarr

Using the constructor to extend the TileMapServiceLayer (http://help.arcgis.com/en/webapi/javascript/arcgis/help/jshelp/inside_custom_layers.htm), and reversing the order of "row" and "col" in the arguments to the calling function, I believe the map is now returning the correct tiles.

A sample is posted at:  http://geologic.dyndns.org/new_nexrad.html

Thanks, Derek, for reviewing my earlier post.

function init() {
        initLayer();
 var map = new esri.Map("map");
 var startExtent = new esri.geometry.Extent({"xmin":-11301768,"ymin": 3962510, "xmax":-7052110,"ymax": 6422839,"spatialReference": new esri.SpatialReference({"wkid":102100})});
        map.setExtent(startExtent);
        map.addLayer(new MesonetNexTiledMapServiceLayer());
      }
      function initLayer(){
          
          dojo.declare("MesonetNexTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, {
              constructor: function() {
           
            this.spatialReference = new esri.SpatialReference({ wkid:102100 });
            this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-20037508.340000,-20037508.340000,20037508.340000,20037508.340000, this.spatialReference));
           
            this.tileInfo = new esri.layers.TileInfo({
                "rows" : 256,
                "cols" : 256,
                "dpi" : 96,
                "format" : "PNG24",
                "compressionQuality" : 0,
                "origin" : {
                    "x" : -20037508.340000,
                    "y" : 20037508.340000
                },
                "spatialReference" : {
                "wkid" : 102100
                },
                "lods" : [
             {"level" : 0, "resolution" : 156543.033928, "scale" : 591657528},
            {"level" : 1, "resolution" : 78271.51695000000472646207, "scale" : 295828764},
                   {"level" : 2, "resolution" : 39135.75847500000236323103, "scale" : 147914382},
                   {"level" : 3, "resolution" : 19567.87923750000118161552, "scale" : 73957191},
                   {"level" : 4, "resolution" : 9783.93961875000059080776, "scale" : 36978595},
                   {"level" : 5, "resolution" : 4891.96980937500029540388, "scale" : 18489298},
                   {"level" : 6, "resolution" : 2445.98490468750014770194, "scale" : 9244649},
                   {"level" : 7, "resolution" : 1222.99245234375007385097, "scale" : 4622324},
                   {"level" : 8, "resolution" : 611.49622617187503692548, "scale" : 2311162},
                   {"level" : 9, "resolution" : 305.74811308593751846274, "scale" : 1155581},
                   {"level" : 10, "resolution" : 152.87405654296875923137, "scale" : 577791},
                   {"level" : 11, "resolution" : 76.43702827148437961569, "scale" : 288895},
                   {"level" : 12, "resolution" : 38.21851413574218980784, "scale" : 144448},
                   {"level" : 13, "resolution" : 19.10925706787109490392, "scale" : 72224},
                   {"level" : 14, "resolution" : 9.55462853393554745196, "scale" : 36112},
       {"level" : 15, "resolution" : 4.77731426696777372598, "scale" : 18056},
     {"level" : 16, "resolution" : 2.38865713348388686299, "scale" : 9028},
     {"level" : 17, "resolution" : 1.19432856674194343150, "scale" : 4514},
       {"level" : 18, "resolution" : 0.59716428337097171575, "scale" : 2257},
     {"level" : 19, "resolution" : 0.29858214168548585787, "scale" : 1128}
                ]
            });

            this.loaded = true;
            this.onLoad(this);
          },

           getTileUrl: function(level, col, row) {
           
            return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + level +"/" + row.toString() +"/" + col.toString() +".png?";
          }
      });
    }