ArcGIS API for JavaScript 4.X 版本加载腾讯地图

时间  2021-08-15

ArcGIS API for JavaScript 4.X 版本升级后，API发生了很大的变化。

其中就支持了WebEarth展示，主要是通过 esri/views/SceneView 实现的。

在新版本中，默认都是加载Esri自己的地图。

若想加载其他地图，可以通过扩展BaseTileLayer实现。

例如，最新版本加载腾讯地图的demo如下：

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">  
  7.   <title>Custom TileLayer - 4.6</title>  
  8.   
  9.   <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">  
  10.   
  11.   <style>  
  12.     html,  
  13.     body,  
  14.     #viewDiv {  
  15.       padding: 0;  
  16.       margin: 0;  
  17.       height: 100%;  
  18.       width: 100%;  
  19.     }  
  20.   </style>  
  21.   
  22.   <script src="https://js.arcgis.com/4.6/"></script>  
  23.   
  24.   <script>  
  25.     require([  
  26.       "esri/Map",  
  27.       "esri/config",  
  28.       "esri/request",  
  29.       "esri/Color",  
  30.       "esri/views/SceneView",  
  31.       "esri/widgets/LayerList",  
  32.       "esri/layers/BaseTileLayer",  
  33.   
  34.       "dojo/domReady!"  
  35.     ], function(  
  36.       Map, esriConfig, esriRequest, Color,  
  37.       SceneView, LayerList, BaseTileLayer  
  38.     ) {  
  39.   
  40.       // *******************************************************  
  41.       // Custom tile layer class code  
  42.       // Create a subclass of BaseTileLayer  
  43.       // *******************************************************  
  44.   
  45.       var TintLayer = BaseTileLayer.createSubclass({  
  46.         properties: {  
  47.           urlTemplate: null,  
  48.           tint: {  
  49.             value: null,  
  50.             type: Color  
  51.           }  
  52.         },  
  53.   
  54.         // generate the tile url for a given level, row and column  
  55.         getTileUrl: function(level, row, col) {  
  56.           return this.urlTemplate.replace("{z}", level).replace("{x}",  
  57.             col).replace("{y}", row);  
  58.         },  
  59.   
  60.         // This method fetches tiles for the specified level and size.  
  61.         // Override this method to process the data returned from the server.  
  62.         fetchTile: function(level, row, col) {  
  63.   
  64.           // call getTileUrl() method to construct the URL to tiles  
  65.           // for a given level, row and col provided by the LayerView  
  66.           var url = this.getTileUrl(level, row, col);  
  67.   
  68.           // request for tiles based on the generated url  
  69.           // set allowImageDataAccess to true to allow  
  70.           // cross-domain access to create WebGL textures for 3D.  
  71.           return esriRequest(url, {  
  72.               responseType: "image",  
  73.               allowImageDataAccess: true  
  74.             })  
  75.             .then(function(response) {  
  76.               // when esri request resolves successfully  
  77.               // get the image from the response  
  78.               var image = response.data;  
  79.               var width = this.tileInfo.size[0];  
  80.               var height = this.tileInfo.size[0];  
  81.   
  82.               // create a canvas with 2D rendering context  
  83.               var canvas = document.createElement("canvas");  
  84.               var context = canvas.getContext("2d");  
  85.               canvas.width = width;  
  86.               canvas.height = height;  
  87.   
  88.   
  89.               // Draw the blended image onto the canvas.  
  90.               context.drawImage(image, 0, 0, width, height);  
  91.   
  92.               return canvas;  
  93.             }.bind(this));  
  94.         }  
  95.       });  
  96.   
  97.       // *******************************************************  
  98.       // Start of JavaScript application  
  99.       // *******************************************************  
  100.   
  101.       // Add stamen url to the list of servers known to support CORS specification.  
  102.       esriConfig.request.corsEnabledServers.push("p0.map.gtimg.com");  
  103.   
  104.       // Create a new instance of the TintLayer and set its properties  
  105.       var stamenTileLayer = new TintLayer({  
  106.         urlTemplate: "http://p{num}.map.gtimg.com/sateTiles/{z}/{x}/{y}/{col}_{row}.jpg",  
  107.         tint: new Color("#004FBB"),  
  108.         title: "腾讯地图"  
  109.       });  
  110.   
  111.       // add the new instance of the custom tile layer the map  
  112.       var map = new Map({  
  113.         layers: [stamenTileLayer]  
  114.       });  
  115.   
  116.       // create a new scene view and add the map  
  117.       var view = new SceneView({  
  118.         container: "viewDiv",  
  119.         map: map,  
  120.         center: [0, 30],  
  121.         zoom: 3  
  122.       });  
  123.   
  124.       // create a layer list widget  
  125.       var layerList = new LayerList({  
  126.         view: view,  
  127.       });  
  128.       view.ui.add(layerList, "top-right");  
  129.     });  
  130.   </script>  
  131. </head>  
  132.   
  133. <body>  
  134.   <div id="viewDiv"></div>  
  135. </body>  
  136.   
  137. </html>  




地图大数据云平台  http://www.favxu.com

三维地球云平台    http://www.hapxu.com

地图云平台交流合作 QQ:63747667

邮箱：[email protected]

联系我们 沪ICP备13005482号-10