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

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

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

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

分享给朋友:

相关文章

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

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

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

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请求(Request)报文,报文格式为:请求行...