how to add custom TileLayer

yanli · ‎10-31-2019

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 · ‎11-01-2019

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