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

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

放牧的风3年前 (2018-03-09)前端69

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://faka.grazingwind.com/post/12.html

分享给朋友:

相关文章

【收藏】15 张前端高清知识地图

1、Git Git 常见操作集锦 点击查看原图 Git 分支管理规范及发布流程 点击查看完整思维导图 2、基础前端知识体系 点击查看原图...

经得住拷问的HTTPS原理解析

经得住拷问的HTTPS原理解析

此文涵盖的大致内容:理解HTTPS原理的概念什么是对称加密和非对称加密?什么是数字签名?怎么生成?怎么校验?啥时候是对称加密?啥时候是非对称加密?啥时候进行算法加密?什么算法?第三方机构包含哪些?HTTPS 是什么?具体流程HTTPS和HT...

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

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

用webstorm在chrome 调试页面时一直弹出 copy authorization url to clipboard

用webstorm在chrome 调试页面时一直弹出 copy authorization url to clipboard

用chrome来调试页面,每次刷新会弹出 requested without authorization,是因为更新后的bug,可以在Setting - debugger中设置 ...

NPM install -save 和 -save-dev 傻傻分不清

回顾 npm install 命令我们在使用 npm install 安装模块的模块的时候 ,一般会使用下面这几种命令形式:npm install moduleName # 安装模块到项目目录下 &...

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

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

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

发表评论

访客

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