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. vue项目基本流程

    一.做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue..... 2.编写对应路由 vue-router 3.具体些每个组件功能 一些公共的文件jquery,j ...

  2. Retrofit 实践

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

  3. 让SpringMVC Restful API优雅地支持多版本

    好久没有更新博客,难得有空,记录一下今天写的一个小工具,供有需要的朋友参考. 在移动APP开发中,多版本接口同时存在的情况经常发生,通常接口支持多版本,有以下两种方式: 1.通过不同路径区分不同版本 ...

  4. Python编程软件的安装与使用——Windows、Linux和Mac

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 最近,有读者透露:Python软件如何安装?为什么自己安装的软件会有各种"奇怪"的问题?据此,本 ...

  5. 【特性】select语句中使用字符串链接获取字段值失败

    坑1 在一个多行的表中,想把其中的一个字段值拿出来,组成一个字符串供后面使用. 按照以往,自己就如以下这么写了: declare @sql varchar(8000) set @sql='insert ...

  6. PLEC-交流电机系统+笔记

    1.固有机械特性近似图 2.三相交流电机的控制系统 1)理论推导 第一次制动选择能耗制动,第二次制动选择倒拉制动. 2)模型搭建 3)模拟仿真 3.心得体会和笔记总结 制动方式的选择主要是根据各个制动 ...

  7. 【基础】26个命令玩转linux，菜鸟及面试必备

    1 查看目录与文件:ls #显示当前目录下所有文件的详细信息 ls -la 2 切换目录:cd #切换当前目录为/opt/test cd /opt/test 3 显示当前目录:pwd pwd 4 创建 ...

  8. Django开发基础----创建项目/应用

    环境: 1.python  3.6.2 2.安装django:pip install django==1.10.3 *下面以开发一个简单的用户签到系统介绍Django的使用 创建Django项目: 命 ...

  9. Mysql(一):初识数据库

    一 数据库管理软件的由来 基于我们之前所学,数据要想永久保存,都是保存于文件中,毫无疑问,一个文件仅仅只能存在于某一台机器上. 如果我们暂且忽略直接基于文件来存取数据的效率问题,并且假设程序所有的组件 ...

  10. 速卖通AE平台+聚石塔+奇门 完整教程V2

    公司是跨境电商,在阿里马马的速卖通平台上开有店铺,并且基于速卖通开放平台,自主研发了ERP系统,居今已有3年多的时间了,一直很稳定. 今年初,速卖通AE开放平台改版,并入淘宝开放平台中,我们的麻烦就开 ...