how to add custom TileLayer

Question

I want to add the custom Tiles ,which is created by Arcgis with catalog. it can get the tile image from server but i can't view in map. my code like this. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Custom TileLayer - 4.12</title> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v412_api/arcgis_js_api/library/4.12/esri/themes/light/main.css"/> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script src="http://localhost/arcgis_js_v412_api/arcgis_js_api/library/4.12/init.js"></script> <script> require([ "esri/Map", "esri/config", "esri/request", "esri/Color", "esri/geometry/Extent", "esri/geometry/SpatialReference", "esri/layers/support/TileInfo", "esri/views/MapView", "esri/widgets/LayerList", "esri/layers/BaseTileLayer", "dojo/domReady!" ], function( Map, esriConfig, esriRequest, Color,Extent, SpatialReference ,TileInfo, MapView, LayerList, BaseTileLayer ) { // ******************************************************* // Custom tile layer class code // Create a subclass of BaseTileLayer // ******************************************************* let spatialReference = new SpatialReference({ wkid: 4550 }); let extent=new Extent({ xmin:273521.70494464, ymin:3302005.502287823, xmax:440043.09505535045, ymax:3379261.04, spatialReference:{wkid:4550} }); let tileInfo = new TileInfo({ dpi: 96, rows: 256, cols: 256, compressionQuality: 0, origin: { x: -5123200, y: 10002100 }, spatialReference: { wkid: 4550 }, lods: [ { level: 0, levelValue: 0, resolution:264.5838625010584, scale: 1000000 }, { level: 1, levelValue: 1, resolution: 132.2919312505292, scale: 500000 }, { level: 2, levelValue: 2, resolution: 66.1459656252646, scale: 250000 }, { level: 3, levelValue: 3, resolution: 33.0729828126323, scale: 125000 }, { level: 4, levelValue: 4, resolution: 16.933367200067735, scale: 64000 } ] }); var TintLayer = BaseTileLayer.createSubclass({ properties: { urlTemplate: null, tint: { value: null, type: Color } , tileInfo: tileInfo, spatialReference: spatialReference }, // generate the tile url for a given level, row and column getTileUrl: function(level, row, col) { return "http://192.168.20.244/TileCache/Layers/_alllayers/" + "L" + dojostring.pad(level, 2, '0') + "/" + "R" + dojostring.pad(row.toString(16), 8, '0') + "/" + "C" + dojostring.pad(col.toString(16), 8, '0') + "." + "png"; }, // This method fetches tiles for the specified level and size. // Override this method to process the data returned from the server. fetchTile: function(level, row, col) { // call getTileUrl() method to construct the URL to tiles // for a given level, row and col provided by the LayerView var url = this.getTileUrl(level, row, col); // request for tiles based on the generated url // set allowImageDataAccess to true to allow // cross-domain access to create WebGL textures for 3D. return esriRequest(url, { responseType: "image", allowImageDataAccess: true }) .then(function(response) { // when esri request resolves successfully // get the image from the response var image = response.data; var width = this.tileInfo.size[0]; var height = this.tileInfo.size[0]; // create a canvas with 2D rendering context var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); canvas.width = width; canvas.height = height; // Draw the blended image onto the canvas. context.drawImage(image, 0, 0, width, height); return canvas; }.bind(this)); } }); // ******************************************************* // Start of JavaScript application // ******************************************************* // Add stamen url to the list of servers known to support CORS specification. var stamenTileLayer = new TintLayer({ tint: new Color("#004FBB"), title: "test" }); // add the new instance of the custom tile layer the map var map = new Map({ layers: [stamenTileLayer] }); // create a new scene view and add the map var view = new MapView({ container: "viewDiv", map: map, center: [360788, 3309983], extent: extent }); // create a layer list widget var layerList = new LayerList({ view: view, }); view.ui.add(layerList, "top-right"); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ My tile url formate:http://192.168.20.244/TileCache/Layers/_alllayers/L00/R00000061/C0000004f.png what't the problem ,can you help me

UndralBatsukh · Answer

Looks like you are missing  "dojo/string" in your test app.