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. 基于Citus和ASP.NET Core开发多租户应用

    Citus是基于PsotgreSQL的扩展,用于切分PsotgreSQL的数据,非常简单地实现数据“切片(sharp)”.如果不使用Citus,则需要开发者自己实现分布式数据访问层(DDAL),实现路 ...

  2. youtube视频字幕下载

    视频下载 安装TamperMonkey插件 字幕下载 http://mo.dbxdb.com/setting.html https://zhuwei.me/y2b/

  3. PPPoE拨号流程

    PPPoE(Point to Point Protocol over Ethernet,基于以太网的点对点协议)的工作流程包含发现(Discovery)和会话(Session)两个阶段,发现阶段是无状 ...

  4. 基于jq的表单填充

    //表单填充 formDataLoad: function (domId, obj) { for (var property in obj) { if (obj.hasOwnProperty(prop ...

  5. 通过修改注册表设置windows环境变量

    开发环境搭建每次都要设置很多环境变量, 一般是通过  [菜单]->[计算机]->[属性]->[高级设置]->[环境变量]进行设置,重装系统后,每次都要设置很多环境变量,很麻烦. ...

  6. html2canvas在微信中无法使用

    html2canvas: https://github.com/niklasvh/html2canvas 本来想在微信网页中使用html2canvas生成图片,结果死活不行 测试发现在Chrome,手 ...

  7. 深入理解ES6之—对象

    Object新方法 Object.is()方法 在js中比较两个值时,你可能会用相等运算符==或者严格相等运算符 ===.为了避免在比较时发生强制类型转换,许多开发者更倾向于使用后者. Object. ...

  8. springMvc学习笔记一

    什么是springmvc  springmvc就是spring框架的一个模块 所以springmvc与spring之间无需通过中间整合层进行整合的. springmvc又是基于mvc的web框架 mv ...

  9. SpringMVC+FreeMarker实现静态资源文件自动添加版本号(md5)

    近日切换java开发,开始学习springframework.在实现静态资源文件自动计算版本号的实例时,因为不熟悉框架,走了不少弯路,好在最终解决了问题.这里写篇文章记录一下实现,也希望对大家有些用处 ...

  10. c++ 如何把RGB图像转换成HSV图像？

    CV_<bit_depth>(S|U|F)C<number_of_channels> 1--bit_depth---比特数---代表8bite,16bites,32bites, ...