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. AMDP + XSLX Workbench 报表开发模式

    本文介绍了我和同事通过使用AMDP + XSLX Workbench缩短报表开发周期.分离数据查询处理逻辑和前端展示工作的经验.欢迎讨论. 前言 最近接到了一套人力资源报表的开发需求,需要以EXCEL ...

  2. 在ConcurrentModificationException异常上的联想

    1.什么是ConcurrentModificationException? 大家都听说过快速报错fast-fail吧,fast-fail的发生就是说明发生了ConcurrentModification ...

  3. WEB-INF目录下文件复制的几种方式

    2018年1月31日 10:42:55 工作完写点博客记录下. 需求:从web-inf下拷贝文件到指定目录. 目录结构 直接贴代码 第一种方式,字节流读取 try { int index = 0; S ...

  4. 发送POST测试请求的若干方法

    最近在工作中需要测试发送带Json格式body值的HTTP POST请求.起初,我在Linux环境下使用curl命令去发送请求,但是,在发送的过程中却遇到了一些问题,经过一段时间的摸索,发现了以下几种 ...

  5. 对html语义化的理解

    所有人都知道html即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言. html标签中的大部分都是由"语义化"标签所担任 那么,它有 ...

  6. 简单http文件服务器

    日常工作中,主要是通过ssh终端(putty等)远程开发,经常涉及到传输文件,因为本地系统为Win10,所以没办法利用强大的linux脚本来进行文件传输.之前用过python的SimpleHttp模块 ...

  7. JAVA受检异常和非受检异常举例

    受检异常和非受检异常(运行时异常)举例 RuntimeException(即非受检异常): RuntimeException在默认情况下会得到自动处理,所以通常用不着捕获RuntimeExceptio ...

  8. Hibernate学习（四）get和Load比较

    package cn.lonecloud.test.crud; import org.hibernate.HibernateException; import org.hibernate.Sessio ...

  9. 接口-以PHP为例

    <?php //使用程序模拟现实情况 //使用规范(方法/属性) interface iUSB { public function start(); public function stop() ...

  10. C语言_简单了解一下typedef

    作为一名PHPer,了解一下C还是有必要的,只是做一个简单的了解,因为并没有做开发C的想法. 关于typedef的详细说明,网上搜过了很多帖子,这篇算是最详细的了:http://blog.csdn.n ...