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. Retrofit 实践

    Retrofit是一套RESTful架构的Android(Java)客户端实现,基于注解,提供JSON to POJO(Plain Ordinary Java Object,简单Java对象),POJ ...

  2. linux shell 执行远程命令

    我在本地的shell脚本中,想要直接执行远程服务器的一个shell脚本: ssh -l root 192.168.1.1 "/data/t.sh" 记得提前给远程服务器的 /dat ...

  3. zabbix如何监控进程

    zabbix中item的配置如下: zabbix中trigger的配置如下:

  4. /dev/null 2>&1 详解

     今天一个朋友突然在自己的维护的Linux中, /var/spool/cron/root 中看到了以下的内容: 30 19 * * * /usr/bin/**dcon.sh > /dev/nul ...

  5. 【JavaWeb】客户关系管理系统

    前言 为了巩固开发的流程,我们再拿一个客户关系管理系统来练手...! 成果图 我们完成的就是下面的项目! 搭建配置环境 配置Tomcat 导入开发包 建立开发用到的程序包 在数据库创建相对应的表 CR ...

  6. Angular2 ^ 资源链接

     Angular2 资源链接 Material Desgin 2 githubhttps://github.com/Promact/md2 DEMOhttp://code.promactinfo.co ...

  7. Mysql(三)-2:数据类型

    一 介绍 存储引擎决定了表的类型,而表内存放的数据也要有不同的类型,每种数据类型都有自己的宽度,但宽度是可选的 详细参考: http://www.runoob.com/mysql/mysql-data ...

  8. prop&attr区别和用法,以多选框为例

    1.比较 相同点 : prop和attr作为jquery的方法都可以获取属性值; 不同点 : (1) 对于HTML元素本身就带有的固有属性,使用prop方法, attr获取checkbox的check ...

  9. LeetCode第四天

    leetcode 第四天 2018年1月4日 15.(628)Maximum Product of Three Numbers JAVA class Solution { public int max ...

  10. SpringBoot+Mybatis+PageHelper简化分页实现

    前言 经过一段时间的测试和修改PageHelper插件逐渐走到了让我觉得靠谱的时候,它功能的就是简化分页的实现,让分页不需要麻烦的多写很多重复的代码. 已经加入我的github模版中:https:// ...