如何加载通过arcgis of Js 4.x 加载高德地图

最新推荐文章于 2024-05-19 22:05:56 发布

Jose_Yang

最新推荐文章于 2024-05-19 22:05:56 发布

阅读量1.1k

点赞数

分类专栏： arcgis of js

原文链接：https://blog.csdn.net/hui1788/article/details/79816957

版权

arcgis of js 专栏收录该内容

13 篇文章 6 订阅

订阅专栏

关于如何加载高德地图，目前在网上找到的加载卫星切片图片加载的高德地图
主要是参考官方demo上的
Custom TileLayer
然后修改进行使用的

以下代码转载于 ArcGIS API for JavaScript 4.X 版本加载高德地图
具体代码如下（我将其修改为2D）

<!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.6</title>
 
  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
 
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
 
  <script src="https://js.arcgis.com/4.6/"></script>
 
  <script>
    require([
      "esri/Map",
	  "esri/views/MapView",
      "esri/config",
      "esri/request",
      "esri/Color",
      "esri/views/SceneView",
      "esri/widgets/LayerList",
      "esri/layers/BaseTileLayer", 
      "dojo/domReady!"
    ], function(
      Map,MapView, 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) { 
		  //构建切片URL
          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("webst01.is.autonavi.com"); 
      // Create a new instance of the TintLayer and set its properties
      var stamenTileLayer = new TintLayer({
        urlTemplate: "http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        tint: new Color("#004FBB"),
        title: "高德"
      });   
	  
  
      // 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 MapView({
      	container: "viewDiv",
      	map: map,
      	zoom: 6,
      	center: [123.9634086609, 35.9595912264],
      });
	    
		
      // 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>

Jose_Yang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
如何加载通过arcgis of Js 4.x 加载高德地图

关于如何加载高德地图，目前在网上找到的加载卫星切片图片加载的高德地图主要是参考官方demo上的Custom TileLayer 然后修改进行使用的以下代码转载于 ArcGIS API for JavaScript 4.X 版本加载高德地图具体代码如下（我将其修改为2D）<!DOCTYPE html><html> <head> <met...
复制链接

扫一扫