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="https://js.arcgis.com/4.4/esri/css/main.css">

  <style>

    html,

    body,

    #viewDiv {

      padding: 0;

      margin: 0;

      height: 100%;

      width: 100%;

    }

  </style>

  <script src="https://js.arcgis.com/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 column

        getTileUrl: 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 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.

      esriConfig.request.corsEnabledServers.push("http://www.google.cn/");

      // Create a new instance of the TintLayer and set its properties

      var stamenTileLayer = new TintLayer({

        urlTemplate: "http://www.google.cn/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 map

      var map = new Map({

        layers: [stamenTileLayer]

      });

      // create a new scene view and add the map

      var view = new SceneView({

        container: "viewDiv",

        map: map,

        center: [0, 30],

        zoom: 3

      });

      // 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>

最终展示效果如下

ArcGIS API for JavaScript 4.4 版本加载谷歌地图的更多相关文章

  1. ArcGIS API for Silverlight 调用GP服务加载等值线图层

    原文:ArcGIS API for Silverlight 调用GP服务加载等值线图层 第二篇.Silverlight客户端调用GP服务 利用ArcGIS API for Silverlight实现G ...

  2. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  3. ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询？【FindTask类的使用】

    从第一篇到现在都是基于地图的,不管怎么样,不管是2D还是3D,至少有个图. 这次来个没有图的例子,看看纯文字的空间查询是什么样的. 本例适用于后台查询或低性能电脑的查询. 预览图 由于4.3和4.2的 ...

  4. ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画

    这是个很有意思的例子,不过例子给的比较复杂,需要查很多API,我会在文章最后给出关键的类和属性解释. 同样发现一个很有意思的事儿:博客园似乎有爬虫,我4号发布的blogs,5号就在百度和google搜 ...

  5. ArcGIS API For Javascript ：双屏（多屏）地图联动的方法

    在遇到地图对比的应用场景下,我们需要双屏地图或者多屏地图来满足我们的业务需求. 解决思路:首先生成两份(多份)地图,然后通过监听地图缩放拖拽,用地图四至将不同的地图对象做绑定,实现多地图联动. 前端部 ...

  6. OpenLayers加载谷歌地图服务

    谷歌地图的地址如下: 谷歌交通地图地址:http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i3800725 ...

  7. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

  8. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  9. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

随机推荐

  1. HDU1013，1163 ，2035九余数定理 快速幂取模

    1.HDU1013求一个positive integer的digital root,即不停的求数位和,直到数位和为一位数即为数根. 一开始,以为integer嘛,指整型就行吧= =(too young ...

  2. Unable to add window -- token android.os.BinderProxy@3a067204 is not valid错误分析记录

    打开APP时,出现闪退的情况,查看android studio报错信息,主要为: Unable to add window -- token android.os.BinderProxy@3a0672 ...

  3. 小甲鱼OD学习第12讲

    这次我们的任务是破解这个需要特定的注册码的软件,如下图 我们从字符串入手,输入register,搜索 我们点击    查找下一个,看看有什么有用的字符串,如下图 然后,在下方,我们发现了  Regis ...

  4. springMvc+swagger整合例子

    Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集成到服 ...

  5. 读书共享 Primer Plus C-part 9

    第十二章 存储类.链接和内存管理                                                       针对代码块中的static变量做如下范本 #include ...

  6. [求助][SPOJ MARIOGAM]-高斯消元(内含标程,数据等)

    小蒟蒻开始做概率的题之后,遇到了这道题,然而,他发现自己的程序调试了无数次也无法通过,系统总是返回令人伤心的WA, 于是,他决定把这一天半的时间收集到的资料放在网上, 寻求大家的帮助, 也可以节省后来 ...

  7. Java经典编程题50道之四

    将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. public class Example04 {    public static void main(String[] args ...

  8. php进阶之路--转载

    之前有看过相关的文章,觉得还是这篇详细点,有具体的目标实现起来才更有动力 转载自:http://wen.52fhy.com/2016/2016-09-03-PHP-cheng-xu-yuan-xue- ...

  9. Python数据结构之四——set（集合）

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 经过几天的回顾和学习,我终于把Python 3.x中的基础知识介绍好啦.下面将要继续什么呢?让我想想先~~~嗯,还是 ...

  10. position的四种定位方式：static、fixed、relative、absolute

    position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  固定定位 是相对于浏览器窗口来进行定位: ...