ArcGIS API for Javascript4.10加载高德地图

本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载高德矢量地图和影像地图，以加载矢量地图为例，我们通过扩展BaseTileLayer来自定义高德地图图层GaodeLayer模块。

1、示例运行效果：

【高德矢量地图】
在这里插入图片描述
【高德影像地图】

2、扩展类BaseTileLayer——定义GaodeLayer.js

参考官方文档说明，我们主要设置两部分：getTileUrl()、fetchTile()。getTileUrl()主要是根据请求级别、行列号生成url；fetchTile()主要是发送动态的url请求并得到返回的地图切片，也可以根据需求进行合并图像。GaodeLayer.js相关代码如下：

define(["dojo/_base/declare","esri/layers/BaseTileLayer","esri/request"],
    function (declare,BaseTileLayer,esriRequest) {
        return BaseTileLayer.createSubclass({
            properties: {
                urlTemplate: null,
            },
            getTileUrl: function(level, row, col) {
                return url = 'http://webrd0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=' + col + '&y=' + row + '&z=' + level;
            },
            fetchTile: function(level, row, col) {
                var url = this.getTileUrl(level, row, col);
                return esriRequest(url, {
                    responseType: "image"
                })
				.then(function(response) {

					var image = response.data;
					var width = this.tileInfo.size[0];
					var height = this.tileInfo.size[0];

					var canvas = document.createElement("canvas");
					var context = canvas.getContext("2d");
					canvas.width = width;
					canvas.height = height;

					context.drawImage(image, 0, 0, width, height);

					return canvas;
				}.bind(this));
            }
        });
    }
)

3、加载GaodeLayer模块并显示图层

在加载我们自定义的模块之前，需要先配置路径。【GaodeLayer.js存储在src文件夹下】

var dojoConfig = {
    parseOnLoad: true,
    packages: [{
        name: "src",
        location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
    }]
};

然后加载模块，并添加到map:

require([
    "esri/Map",
    "src/GaodeLayer",
    "esri/views/SceneView",
    "dojo/domReady!"], 
    function (Map,GaodeLayer,SceneView) {
    //新建矢量图层
    var GaodeLayer = new GaodeLayer();

    var map = new Map({
         layers: [GaodeLayer]
    });

    var view = new SceneView({
         container: "view",
         map: map,
         center: [108.62, 36.32],
         zoom: 4
     });
});

4、源码下载：

源码链接：ArcGIS API for JavaScript4.10之加载高德地图
源码包括高德矢量地图、影像图（加标注）自定义文件(src/*.js)和图层加载显示文件（.html），ArcGIS API for JavaScript使用的是当前最新版本【4.10】。