本篇主要介绍利用ArcGIS API for Javascript 4版本的最新版本4.10加载天地图的矢量地图、影像地图和地形图（墨卡托投影），以加载矢量地图为例，我们通过扩展BaseTileLayer来自定义矢量地图图层TiandiMapLayer模块。
1、示例运行效果：
【矢量地图】
【影像地图】
【地形图】
2、申请秘钥
从开始，天地图访问需要申请账户秘钥，在【控制台】—【应用管理】中新建一个应用，此时就会生成对应的秘钥。
3、扩展类BaseTileLayer——定义TiandiMapLayer、TiandiAnnoLayer
参考官方文档说明，我们主要设置三部分：请求url、getTileUrl()、fetchTile()。getTileUrl()主要是根据请求级别、行列号生成url；fetchTile()主要是发送动态的url请求并得到返回的图片，同时，可以根据需求进行合并图像。矢量图层的代码如下：
define(["dojo/_base/declare", "dojo/_base/lang","esri/config","esri/layers/BaseTileLayer","esri/request"],function (declare,lang,esriConfig,BaseTileLayer,esriRequest) {return BaseTileLayer.createSubclass({properties: {urlTemplate: null},getTileUrl: function(level, row, col) {var url = "http://t"+col % 8 +"./DataServer?T=vec_w&tk=申请的秘钥&x="+col+"&y="+row+"&l="+level;return url;},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));}});})
矢量中文标注的图层代码如下：
define(["dojo/_base/declare", "dojo/_base/lang","esri/config","esri/layers/BaseTileLayer","esri/request"],function (declare,lang,esriConfig,BaseTileLayer,esriRequest) {return BaseTileLayer.createSubclass({properties: {urlTemplate: null},getTileUrl: function(level, row, col) {var url = "http://t"+col % 8 +"./DataServer?T=cva_w&tk=申请的秘钥&x="+col+"&y="+row+"&l="+level;return url;},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));}});})
4、加载TiandiMapLayer、TiandiAnnoLayer模块并显示图层
在加载我们自定义的模块之前，需要先配置路径。【TiandiMapLayer.js、TiandiAnnoLayer.js存储在src文件夹下】
var dojoConfig = {parseOnLoad: true,packages: [{name: "src",location: location.pathname.replace(/\/[^/]+$/, "")+"/src"}]};
然后加载模块，并添加到map:
require(["esri/Map","src/TiandiMapLayer","src/TiandiAnnoLayer","esri/views/SceneView","dojo/domReady!"], function (Map,TiandiMapLayer,TiandiAnnoLayer,SceneView) {//新建TiandiMapLayervar TiandiMapLayer = new TiandiMapLayer();//新建标注图层var TiandiAnnoLayer = new TiandiAnnoLayer();var map = new Map({layers: [TiandiMapLayer,TiandiAnnoLayer]});var view = new SceneView({container: "view",map: map,center: [104.9, 35.7],zoom: 4});});
5、源码下载
源码链接：ArcGIS API for JavaScript4.10之加载天地图
源码包括矢量地图（加标注）、影像图（加标注）、地形图（加标注）自定义文件(src/*.js)和图层加载显示文件（.html），ArcGIS API for JavaScript使用的是当前最新版本【4.10】。
