当前位置:首页 > 前端 > 正文内容

ArcGIS API for JavaScript 4.4 版本加载谷歌地图

放牧的风6年前 (2018-03-09)前端1031

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>

 

最终展示效果如下

20170719110220883.jpg

扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://grazingwind.com/post/12.html

分享给朋友:

相关文章

Chrome浏览器开启Ajax跨域访问调试

Chrome浏览器开启Ajax跨域访问调试

由于浏览器安全性限制,Ajax是不能跨域访问的,而我们在日常开发工作中,经常会出现本地开发环境需要访问其他服务器上的API情况。提示信息为:Access to XMLHttpRequest at 'http://****'...

JavaScript for...of与for...in的区别

JavaScript for...of与for...in的区别

无论是for…in还是for…of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。for…in 语句以原始插入顺序迭代对象的可枚举属性。for…of 语句遍历可迭代对象定义要迭代的数据。以下示例显示了与Array一起使用时,fo...

跨域资源共享 CORS 详解

跨域资源共享 CORS 详解

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。本文详...

JavaScript内存管理和垃圾回收机制

JavaScript内存管理和垃圾回收机制

像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()。相反,JavaScript是在创建变量(对象,字符串等)时自动进行了分配内存,并且在不使用它们时“自动”释放。 释放的过程称为垃圾回收。这个“...

彻底理解浏览器的缓存机制

彻底理解浏览器的缓存机制

概述浏览器的缓存机制也就是我们说的HTTP缓存机制,其机制是根据HTTP报文的缓存标识进行的,所以在分析浏览器缓存机制之前,我们先使用图文简单介绍一下HTTP报文,HTTP报文分为两种:HTTP请求(Request)报文,报文格式为:请求行...

三十分钟包会——正则表达式

三十分钟包会——正则表达式

一、前言正则表达式,对大家来说既熟悉又陌生。熟悉是因为工作中有很多场景能用到,比如手机号、邮箱、密码等规则校验。陌生则是因为正则表达式看上去就是一堆乱码,且一眼看上去很难看懂匹配规则。有时候在网上去找一个特定规则的正则表达式,搜出来的结果各...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。