ArcGIS API for JavaScript（4.x）- 加载天地图

更新于 2019-06-29写于 2019-02-28
ArcGIS API for JavaScript（3.x）如何加载天地图《ArcGIS API for Javascript 加载天地图（经纬度投影） - 张凯强 - 博客园》这篇文章已经写的很好了，但放到 4.x 上没法用，这里我将他的方法升级到 4.x 版本供大家参考。（4.x 修改了挺多东西）
在线预览：ArcGIS TianDiTu

代码：

html
  1<!DOCTYPE html>
  2<html style="height: 100%;">
  3<head>
  4  <meta charset="utf-8">
  5  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  6  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
  7  <title>天地图底图加载（经纬度版本）</title>
  8  <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
  9  <script src="https://js.arcgis.com/4.7/"></script>
 10</head>
 11<body style="height: 100%;">
 12  <!-- 100vh兼容性不好 -->
 13  <div id="map-container" style="width: 100%;height: 100%;"></div>
 14  <script type="text/javascript">
 15
 16  // ==========================================
 17  // 测试版本：V4.7
 18  // ==========================================
 19
 20  require([
 21    'esri/Map',
 22    'esri/views/MapView',
 23    'esri/layers/WebTileLayer',
 24    'esri/layers/support/TileInfo',
 25    'dojo/domReady!'
 26    ],function(Map, MapView, WebTileLayer, TileInfo){
 27    
 28      // 我们是通过瓦片形式加载天地图的
 29      // 天地图根据投影又分为两种：墨卡托和经纬度
 30      // 经纬度投影的情况下比较复杂，且需要注意的地方比较多，加载过程如下
 31
 32      // 首先我们设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
 33      var tileInfo = new TileInfo({
 34        dpi: 90.71428571427429,
 35        rows : 256,
 36        cols : 256,
 37        compressionQuality : 0,
 38        origin : {
 39          x : -180,
 40          y : 90
 41        },
 42        spatialReference : {
 43          wkid : 4326
 44        },
 45        lods : [
 46          {level : 2,levelValue: 2, resolution : 0.3515625, scale : 147748796.52937502},
 47          {level : 3,levelValue: 3, resolution : 0.17578125, scale : 73874398.264687508},
 48          {level : 4,levelValue: 4,resolution : 0.087890625, scale : 36937199.132343754},
 49          {level : 5,levelValue: 5, resolution : 0.0439453125, scale : 18468599.566171877},
 50          {level : 6,levelValue: 6, resolution : 0.02197265625, scale : 9234299.7830859385},
 51          {level : 7,levelValue: 7, resolution : 0.010986328125, scale : 4617149.8915429693},
 52          {level : 8,levelValue: 8, resolution : 0.0054931640625, scale : 2308574.9457714846},
 53          {level : 9,levelValue: 9, resolution : 0.00274658203125, scale : 1154287.4728857423},
 54          {level : 10,levelValue: 10, resolution : 0.001373291015625, scale : 577143.73644287116},
 55          {level : 11,levelValue: 11, resolution : 0.0006866455078125, scale : 288571.86822143558},
 56          {level : 12,levelValue: 12, resolution : 0.00034332275390625, scale : 144285.93411071779},
 57          {level : 13,levelValue: 13, resolution : 0.000171661376953125, scale : 72142.967055358895},
 58          {level : 14,levelValue: 14, resolution : 8.58306884765625e-005, scale : 36071.483527679447},
 59          {level : 15,levelValue: 15, resolution : 4.291534423828125e-005, scale : 18035.741763839724},
 60          {level : 16,levelValue: 16, resolution : 2.1457672119140625e-005, scale : 9017.8708819198619},
 61          {level : 17,levelValue: 17, resolution : 1.0728836059570313e-005, scale : 4508.9354409599309},
 62          {level : 18,levelValue: 18, resolution : 5.3644180297851563e-006, scale : 2254.4677204799655},
 63          { level: 19,levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
 64          { level: 20,levelValue: 2, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
 65        ]
 66      })
 67
 68      // 根据尝试得到如下经验：
 69      // 当WebTiledLayer 初始化时设置了 tileInfo 属性时，模板字段必须去掉 $ 也就是 {……} 而不是 ${……}
 70      // 同时不要相信文档中的替换说明
 71
 72      // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
 73      // 经纬度矢量地图瓦片的URL:
 74      // http://t4.tianditu.com/DataServer?T=vec_c&x=27&y=3&l=5
 75
 76      // 分析上述 URL 我们知道，域名中的 t4 部分代表子域字段，参数列表中的TILECOL, TILEROW, TILEMATRIX 分别对应列编号， 行编号，缩放(显示)级别， 对这几个部分进行替换，得到 url 模板如下
 77      // http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}
 78      // 经过查询资料天地图瓦片可用子域分别有 t0,t1,t2,t3,t4,t5,t6,t7 八个子域
 79      // 根据现有信息新建 WebTiledLayer 如下
 80
 81      var layer = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=174705aebfe31b79b3587279e211cb9a',{
 82        // subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],
 83        subDomains: ['t0'],
 84        tileInfo: tileInfo
 85      })
 86      var layer_anno = WebTileLayer('http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}&tk=174705aebfe31b79b3587279e211cb9a',{
 87        //subDomains: ['t0','t1','t2','t3','t4','t5','t6','t7'],
 88        subDomains: ['t0'],
 89        tileInfo: tileInfo
 90      })
 91
 92      // 创建地图，不设置底图，如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
 93      var map = new Map({
 94        spatialReference : {
 95          wkid : 4326
 96        },
 97        basemap: {
 98          baseLayers: [layer, layer_anno]
 99        }
100      });
101
102      // 创建MapView
103      var view = new MapView({
104        container: "map-container",
105        spatialReference : {
106          wkid : 4326
107        },
108        map: map,
109        center: [121.67, 42.01],
110        //1:scale的图
111        scale: 2000
112      });
113
114
115      // 下面提供几个天地图经纬度投影的图层地址以及转换后的URL模板
116
117      // ============================================================================================================================================================================================
118
119      // 经纬度矢量底图
120      // http://t4.tianditu.com/DataServer?T=vec_c&x=28&y=4&l=5
121      // http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}
122
123      // 经纬度矢量中文注记（配合矢量底图使用）
124      // http://t0.tianditu.com/DataServer?T=cva_c&x=28&y=4&l=5
125      // http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}
126
127      // 经纬度矢量英文注记（配合矢量底图使用）
128      // http://t0.tianditu.cn/eva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eva&tileMatrixSet=c&TileMatrix=10&TileRow=158&TileCol=821&style=default&format=tiles
129      // http://{subDomain}.tianditu.cn/eva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
130
131      // 经纬度矢量蒙古文注记（配合矢量底图使用）
132      // http://t7.tianditu.cn/mva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mva&tileMatrixSet=c&TileMatrix=10&TileRow=158&TileCol=823&style=default&format=tiles
133      // http://{subDomain}.tianditu.cn/mva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
134
135      // 经纬度矢量维吾尔文注记（配合矢量底图使用）
136      // http://t5.tianditu.cn/wva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wva&tileMatrixSet=c&TileMatrix=3&TileRow=0&TileCol=6&style=default&format=tiles
137      // http://{subDomain}.tianditu.cn/wva_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
138
139      // ============================================================================================================================================================================================
140
141      // 经纬度影像底图
142      // http://t3.tianditu.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix=5&TileRow=4&TileCol=26&style=default&format=tiles
143      // http://{subDomain}.tianditu.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
144
145      // 经纬度行政边界（配合经纬度影像底图使用）
146      // http://t3.tianditu.cn/ibo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=c&TileMatrix=10&TileRow=160&TileCol=849&style=default&format=tiles
147      // http://{subDomain}.tianditu.cn/ibo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
148
149      // 经纬度中文注记（配合经纬度影像底图使用）
150      // http://t5.tianditu.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix=5&TileRow=4&TileCol=26&style=default&format=tiles
151      // http://{subDomain}.tianditu.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
152
153      // 经纬度英文注记（配合经纬度影像底图使用）
154      // http://t4.tianditu.cn/eia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eia&tileMatrixSet=c&TileMatrix=7&TileRow=18&TileCol=106&style=default&format=tiles
155      // http://{subDomain}.tianditu.cn/eia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
156
157      // 经纬度蒙古文注记（配合经纬度影像底图使用）
158      // http://t2.tianditu.cn/mia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mia&tileMatrixSet=c&TileMatrix=7&TileRow=20&TileCol=105&style=default&format=tiles
159      // http://{subDomain}.tianditu.cn/mia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
160
161      // 经纬度维吾尔文注记（配合经纬度影像底图使用）
162      // http://t6.tianditu.cn/wia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wia&tileMatrixSet=c&TileMatrix=7&TileRow=19&TileCol=106&style=default&format=tiles
163      // http://{subDomain}.tianditu.cn/wia_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wia&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
164
165      // ============================================================================================================================================================================================
166
167      // 经纬度地形底图
168      // http://t4.tianditu.cn/ter_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=c&TileMatrix=5&TileRow=5&TileCol=26&style=default&format=tiles
169      // http://{subDomain}.tianditu.cn/ter_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ter&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
170
171      // 经纬度行政边界（配合地形底图使用）
172      // http://t0.tianditu.cn/tbo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=tbo&tileMatrixSet=c&TileMatrix=5&TileRow=5&TileCol=23&style=default&format=tiles
173      // http://{subDomain}.tianditu.cn/tbo_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=tbo&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
174
175      // 经纬度中文注记（配合经纬度地形底图使用）
176      // http://t6.tianditu.cn/cta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cta&tileMatrixSet=c&TileMatrix=5&TileRow=4&TileCol=26&style=default&format=tiles
177      // http://{subDomain}.tianditu.cn/cta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
178
179      // 经纬度英文注记（配合经纬度地形底图使用）
180      // http://t6.tianditu.cn/eta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eta&tileMatrixSet=c&TileMatrix=7&TileRow=20&TileCol=106&style=default&format=tiles
181      // http://{subDomain}.tianditu.cn/eta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=eta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
182
183      // 经纬度蒙古文注记（配合经纬度地形底图使用）
184      // http://t7.tianditu.cn/mta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mta&tileMatrixSet=c&TileMatrix=7&TileRow=19&TileCol=105&style=default&format=tiles
185      // http://{subDomain}.tianditu.cn/mta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=mta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
186
187      // 经纬度维吾尔文注记（配合经纬度地形底图使用）
188      // http://t0.tianditu.cn/wta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wta&tileMatrixSet=c&TileMatrix=7&TileRow=19&TileCol=106&style=default&format=tiles
189      // http://{subDomain}.tianditu.cn/wta_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wta&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
190
191      // ============================================================================================================================================================================================
192
193      // 经纬度水系
194      // http://t4.tianditu.cn/wat_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wat&tileMatrixSet=c&TileMatrix=4&TileRow=0&TileCol=14&style=default&format=tiles
195      // http://{subDomain}.tianditu.cn/wat_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=wat&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
196
197      // 经纬度铁路
198      // http://t3.tianditu.cn/raw_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=raw&tileMatrixSet=c&TileMatrix=9&TileRow=77&TileCol=414&style=default&format=tiles
199      // http://{subDomain}.tianditu.cn/raw_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=raw&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles
200
201      // 总结一下：
202      //
203      // 1. 对于经纬度投影切片的加载直接使用 WebTiledLayer 就可以直接加载，但是不能直接设置底图，同时需要设置切片信息，并且在添加图层之后使用 centerAndZoom 方法设置地图的坐标为 ESPG:4326 (WGS1984)
204      // 2. 对于URL模板的替换需要注意使用的是 {subDomain}, {col}, {row}, {level} 进行对应字段的替换，不要相信文档中的 ${X}, ${Y} ,${Z} 等
205      // 3. 天地图目前的子域为 t0,t1,t2,t3,t4,t5,t6,t7
206  })
207  </script>
208</body>
209</html>