ArcGIS API for JavaScript 4.X版本升级后，API发生了很大的变化。
其中就支持了WebEarth展示，主要是通过 esri/views/SceneView实现的。
在新版本中，默认都是加载Esri自己的地图。
若想加载其他地图，可以通过扩展BaseTileLayer实现。
例如，最新版本加载谷歌地图的demo如下：
<!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.4</title><link rel="stylesheet" href="/4.4/esri/css/main.css"><style>html,body,#viewDiv {padding: 0;margin: 0;height: 100%;width: 100%;}</style><script src="/4.4/"></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 columngetTileUrl: function(level, row, col) {return this.urlTemplate.replace("{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 given level, row and col provided by the LayerViewvar 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 responsevar image = response.data;var width = this.tileInfo.size[0];var height = this.tileInfo.size[0];// create a canvas with 2D rendering contextvar 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("/");// Create a new instance of the TintLayer and set its propertiesvar stamenTileLayer = new TintLayer({urlTemplate: "/maps/vt/lyrs=s@142&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil",tint: new Color("#004FBB"),title: "Google Map"});// add the new instance of the custom tile layer the mapvar map = new Map({layers: [stamenTileLayer]});// create a new scene view and add the mapvar view = new SceneView({container: "viewDiv",map: map,center: [0, 30],zoom: 3});// create a layer list widgetvar layerList = new LayerList({view: view,});view.ui.add(layerList, "top-right");});</script></head><body><div id="viewDiv"></div></body></html>
最终展示效果如下
