AnsweredAssumed Answered

JSAPI v4.3 - Create custom subClass inherited from WebTileLayer

Question asked by DemersM on Mar 24, 2017
Latest reply on Mar 24, 2017 by thejus.kambi
Hi,

I am trying to create a custom subclass inherited from the WebTileLayer class using esri/core/Accessor. I was following the doc from here: Accessor | API Reference | ArcGIS API for JavaScript 4.3 

 

My custom class module is the following:

 

define(
    ["esri/layers/WebTileLayer", "esri/geometry/SpatialReference", "esri/geometry/Extent", "esri/layers/support/TileInfo"],
    function(WebTileLayer, SpatialReference, Extent, TileInfo) {

        return WebTileLayer.createSubclass({
            constructor: function(urlTemplate) {
                this.urlTemplate = urlTemplate;
                this.spatialReference = new SpatialReference({ wkid: 3857 });
                this.initialExtent = (this.fullExtent = new Extent(-20037508.34787, -20037508.34278, 20037508.34278, 20037508.34787, this.spatialReference));
                this.tileInfo = new TileInfo({
                    "size": 256,
                    "dpi": 96,
                    "format": "PNG",
                    "compressionQuality": 0,
                    "origin": { "x": -20037508.342787, "y": 20037508.342787 },
                    "spatialReference": {
                        "wkid": 3857
                    },
                    "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.597164283559817, "scale": 2256.994353 },
                        { "level": 19, "resolution": 0.298582141647617, "scale": 1128.497176 }
                    ]
                });
                this.load(this);
            },
            getTileUrl: function(level, row, col) {
                var maxY = this.getTileMaxCountY(level);
                var updatedRow = maxY - row - 1;
                return this.urlTemplate.replace("{level}", level).replace("{col}", col).replace("{row}", updatedRow);
            },
            getTileMaxCountY: function(level) {
                switch (level) {
                    case 1:
                        return 2;
                        break;
                    case 2:
                        return 4;
                        break;
                    case 3:
                        return 8;
                        break;
                    case 4:
                        return 16;
                        break;
                    case 5:
                        return 32;
                        break;
                    case 6:
                        return 64;
                        break;
                    case 7:
                        return 128;
                        break;
                    case 8:
                        return 256;
                        break;
                    case 9:
                        return 512;
                        break;
                    case 10:
                        return 1024;
                        break;
                    case 11:
                        return 2048;
                        break;
                    case 12:
                        return 4096;
                        break;
                    case 13:
                        return 8192;
                        break;
                    case 14:
                        return 16384;
                        break;
                    case 15:
                        return 32768;
                        break;
                    case 16:
                        return 65536;
                        break;
                    case 17:
                        return 131072;
                        break;
                    case 18:
                        return 262144;
                        break;
                    case 19:
                        return 524288;
                        break;
                    case 20:
                        return 1048576;
                        break;
                    case 21:
                        return 2097153;
                        break;
                    default:
                        return 0;
                }
            }
        });
});

 

 

 

When I initialize a new instance of this class doing: new MySubClass("https://mydomain.com/msp/{level}/{col}/{row}.png");

 

I got the errror this.load() is not a function. this.load() is called at the end of the constructor method of my subclass, and this method should have been inherited from WebTileLayer class. Why this method is not accessible from the subclass?

 

Thank you,

 

Maxime

Outcomes