Home > Developer > JavaScript
Which supported the Webearth display, mainly through the Esri/views/sceneview implementation.
In the new version, ESRI's own maps are loaded by default.
If you want to load additional maps, you can do so by extending Basetilelayer.
For example, the latest version loads the demo of the Gold map as follows:
[HTML] View plain copy
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta name= "viewport" content= "Initial-scale=1,maximum-scale=1,user-scalable=no" >
<title>custom tilelayer-4.6</title>
<link rel= "stylesheet" href= "Https://js.arcgis.com/4.6/esri/css/main.css" >
<style>
Html
Body
#viewDiv {
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
<script src= "https://js.arcgis.com/4.6/" ></script>
<script>
require ([
"Esri/map",
"Esri/config",
"Esri/request",
"Esri/color",
"esri/ Views/sceneview ",
" Esri/widgets/layerlist ",
" Esri/layers/basetilelayer ",
"Dojo/domready!" ], function (Map, Esriconfig, Esrirequest, Color, Sceneview, Layerlist, Basetilelayer) {//******************* Custom Tile Layer Class Code//Create a subclass of Basetilelayer//* * * var Tintlayer = Basetilelayer.createsubclass ({properties: { Urltemplate:null, tint: {value:null, Type:color}},//Generate the Tile URL for a given level, row and column gettileurl:function (level, row, col) {return this.urlTemplate.rep Lace ("{z}", level). Replace ("{x}", col). Replace ("{y}", row); },//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 GI Ven level, row and ColProvided by the Layerview var url = this.gettileurl (level, row, col); Request for tiles based in 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}). th En (function (response) {//when ESRI request resolves successfully//get the image from the Respons e 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. EsriConfig.request.corsEnabledServers.push ("webst01.is.autonavi.com"); Create a new instance of the Tintlayer and set its properties var stamentilelayer = new Tintlayer ({urltemplate : "Http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", Tint:new Color ("#004FBB"), Title: "German"}); 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 Sceneview ({container: "Viewdiv", Map:map, CE Nter: [0, +], zoom:3}); Create a layer list widget var layerlist = new Layerlist ({View:view,}); VIew.ui.add (Layerlist, "top-right"); });</script>
<body>
<div id= "Viewdiv" ></div>
</body>
[Map Big Data cloud Platform www.favxu.com
Three-dimensional Earth cloud platform 3d.favxu.com
Map Cloud Platform Exchange Cooperation qq:63747667
Email: [Email protected]
ArcGIS API for JavaScript version 4.6 loading high tak land
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
