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

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

放牧的风7年前 (2018-03-09)前端1320

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

分享给朋友:

相关文章

npm更新模块并同步到package.json中

npm更新模块并同步到package.json中

使用原始npm1.查看需要更新的版本npm outdated该命令会列出所有需要更新的项目2.修改package.json中需要更新的包对应的版本号npm update由于npm update只能按照package.js...

webstorm中用npm运行任务(即显示npm面板)

webstorm中用npm运行任务(即显示npm面板)

第一步右击package.json文件,点击show npm Scripts第二步出现npm面板第三步点击即可运行任务  ...

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

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

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

如何理解HTTP响应的状态码?

如何理解HTTP响应的状态码?

我们知道HTTP协议是通过HTTP请求和HTTP响应来实现双向通信的。 HTTP状态码(HTTP Status Code)是用以表示Web服务器HTTP响应状态的3位数字代码,由RFC 2616规范定义。 合理的状态码不仅可以让用...

浏览器同源政策及其规避方法

浏览器同源政策及其规避方法

浏览器安全的基石是"同源政策"(same-origin policy)。很多开发者都知道这一点,但了解得不全面。本文详细介绍"同源政策"的各个方面,以及如何规避它。一、概述1.1 含义1995年,同源...

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

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

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