ArcGIS API for JavaScript3.x 学习笔记[3] 加载底图天地图(经纬度版)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ArcGIS API for JavaScript3.x 学习笔记[3] 加载底图天地图(经纬度版)相关的知识,希望对你有一定的参考价值。

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <meta charset="utf-8">
  5   <title>天地图底图加载(经纬度版本)</title>
  6   <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
  7   <script src="https://js.arcgis.com/3.21/"></script>
  8 </head>
  9 <body>
 10   <div id="map-container"></div>
 11   <script type="text/javascript">
 12 
 13   // ==========================================
 14   // 测试版本:V3.11 - V3.21
 15   // ==========================================
 16 
 17   require([esri/map,dojo/domReady!],function(EsriMap){
 18     // 创建地图,不设置底图,如果设置底图会造成坐标系无法被转换成 ESPG:4326 (WGS1984)
 19     var map = new EsriMap(map-container,{
 20       center: [0,0],
 21       zoom: 0
 22     })
 23 
 24     // 我们是通过瓦片形式加载天地图的
 25     // 天地图根据投影又分为两种:墨卡托和经纬度
 26     // 经纬度投影的情况下比较复杂,且需要注意的地方比较多,加载过程如下
 27     require([esri/layers/WebTiledLayer, esri/layers/TileInfo],function(WebTiledLayer, TileInfo){
 28 
 29       // 首先我们设定瓦片信息,天地图经纬度地图的切片信息全部使用该信息设定
 30       var tileInfo = new TileInfo({
 31         dpi: 90.71428571427429,
 32         rows : 256,
 33         cols : 256,
 34         compressionQuality : 0,
 35         origin : {
 36           x : -180,
 37           y : 90
 38         },
 39         spatialReference : {
 40           wkid : 4326
 41         },
 42         lods : [
 43           {level : 2,levelValue: 2, resolution : 0.3515625, scale : 147748796.52937502},
 44           {level : 3,levelValue: 3, resolution : 0.17578125, scale : 73874398.264687508},
 45           {level : 4,levelValue: 4,resolution : 0.087890625, scale : 36937199.132343754},
 46           {level : 5,levelValue: 5, resolution : 0.0439453125, scale : 18468599.566171877},
 47           {level : 6,levelValue: 6, resolution : 0.02197265625, scale : 9234299.7830859385},
 48           {level : 7,levelValue: 7, resolution : 0.010986328125, scale : 4617149.8915429693},
 49           {level : 8,levelValue: 8, resolution : 0.0054931640625, scale : 2308574.9457714846},
 50           {level : 9,levelValue: 9, resolution : 0.00274658203125, scale : 1154287.4728857423},
 51           {level : 10,levelValue: 10, resolution : 0.001373291015625, scale : 577143.73644287116},
 52           {level : 11,levelValue: 11, resolution : 0.0006866455078125, scale : 288571.86822143558},
 53           {level : 12,levelValue: 12, resolution : 0.00034332275390625, scale : 144285.93411071779},
 54           {level : 13,levelValue: 13, resolution : 0.000171661376953125, scale : 72142.967055358895},
 55           {level : 14,levelValue: 14, resolution : 8.58306884765625e-005, scale : 36071.483527679447},
 56           {level : 15,levelValue: 15, resolution : 4.291534423828125e-005, scale : 18035.741763839724},
 57           {level : 16,levelValue: 16, resolution : 2.1457672119140625e-005, scale : 9017.8708819198619},
 58           {level : 17,levelValue: 17, resolution : 1.0728836059570313e-005, scale : 4508.9354409599309},
 59           {level : 18,levelValue: 18, resolution : 5.3644180297851563e-006, scale : 2254.4677204799655},
 60           { level: 19,levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },
 61           { level: 20,levelValue: 2, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }
 62         ]
 63       })
 64 
 65       // 根据尝试得到如下经验:
 66       // 当WebTiledLayer 初始化时设置了 tileInfo 属性时,模板字段必须去掉 $ 也就是 {……} 而不是 ${……}
 67       // 同时不要相信文档中的替换说明
 68 
 69       // 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表,瓦片列编号,瓦片行编号,当前缩放(显示)级别
 70       // 经纬度矢量地图瓦片的URL:
 71       // http://t4.tianditu.com/DataServer?T=vec_c&x=27&y=3&l=5
 72 
 73       // 分析上述 URL 我们知道,域名中的 t4 部分代表子域字段,参数列表中的TILECOL, TILEROW, TILEMATRIX 分别对应列编号, 行编号,缩放(显示)级别, 对这几个部分进行替换,得到 url 模板如下
 74       // http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}
 75       // 经过查询资料天地图瓦片可用子域分别有 t0,t1,t2,t3,t4,t5,t6,t7 八个子域
 76       // 根据现有信息新建 WebTiledLayer 如下
 77 
 78       var layer = WebTiledLayer(http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level},{
 79         subDomains: [t0,t1,t2,t3,t4,t5,t6,t7],
 80         tileInfo: tileInfo
 81       })
 82 
 83       map.addLayer(layer)
 84 
 85       // 设定中心点以及缩放级别,使地图的坐标系修正为 ESPG:4326 (WGS1984)
 86       // 这一步及其重要,否则地图坐标系为 ESPG:102100 也就是 Web墨卡托 投影的坐标系
 87       // 如果希望设置地图中心点,以及缩放级别,请在此处设置,在新建地图时给出的坐标可以随意,但请不要和此处相同
 88       require([esri/geometry/Point],function(EsriPoint){
 89         map.centerAndZoom(new EsriPoint({
 90           x: 109,
 91           y: 34.5,
 92           spatialReference: {
 93             wkid: 4326
 94           }
 95         }), 8)
 96       })
 97 
 98       // 下面提供几个天地图经纬度投影的图层地址以及转换后的URL模板
 99 
100       // ============================================================================================================================================================================================
101 
102       // 经纬度矢量底图
103       // http://t4.tianditu.com/DataServer?T=vec_c&x=28&y=4&l=5
104       // http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}
105 
106       // 经纬度矢量中文注记(配合矢量底图使用)
107       // http://t0.tianditu.com/DataServer?T=cva_c&x=28&y=4&l=5
108       // http://{subDomain}.tianditu.com/DataServer?T=cva_c&x={col}&y={row}&l={level}
109 
110       // 经纬度矢量英文注记(配合矢量底图使用)
111       // 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
112       // 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
113 
114       // 经纬度矢量蒙古文注记(配合矢量底图使用)
115       // 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
116       // 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
117 
118       // 经纬度矢量维吾尔文注记(配合矢量底图使用)
119       // 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
120       // 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
121 
122       // ============================================================================================================================================================================================
123 
124       // 经纬度影像底图
125       // 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
126       // 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
127 
128       // 经纬度行政边界(配合经纬度影像底图使用)
129       // 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
130       // 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
131 
132       // 经纬度中文注记(配合经纬度影像底图使用)
133       // 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
134       // 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
135 
136       // 经纬度英文注记(配合经纬度影像底图使用)
137       // 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
138       // 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
139 
140       // 经纬度蒙古文注记(配合经纬度影像底图使用)
141       // 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
142       // 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
143 
144       // 经纬度维吾尔文注记(配合经纬度影像底图使用)
145       // 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
146       // 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
147 
148       // ============================================================================================================================================================================================
149 
150       // 经纬度地形底图
151       // 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
152       // 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
153 
154       // 经纬度行政边界(配合地形底图使用)
155       // 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
156       // 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
157 
158       // 经纬度中文注记(配合经纬度地形底图使用)
159       // 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
160       // 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
161 
162       // 经纬度英文注记(配合经纬度地形底图使用)
163       // 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
164       // 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
165 
166       // 经纬度蒙古文注记(配合经纬度地形底图使用)
167       // 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
168       // 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
169 
170       // 经纬度维吾尔文注记(配合经纬度地形底图使用)
171       // 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
172       // 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
173 
174       // ============================================================================================================================================================================================
175 
176       // 经纬度水系
177       // 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
178       // 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
179 
180       // 经纬度铁路
181       // 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
182       // 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
183 
184       // 总结一下:
185       //
186       // 1. 对于经纬度投影切片的加载直接使用 WebTiledLayer 就可以直接加载,但是不能直接设置底图,同时需要设置切片信息,并且在添加图层之后使用 centerAndZoom 方法设置地图的坐标为 ESPG:4326 (WGS1984)
187       // 2. 对于URL模板的替换需要注意使用的是 {subDomain}, {col}, {row}, {level} 进行对应字段的替换,不要相信文档中的 ${X}, ${Y} ,${Z} 等
188       // 3. 天地图目前的子域为 t0,t1,t2,t3,t4,t5,t6,t7
189     })
190   })
191   </script>
192 </body>
193 </html>

 

以上是关于ArcGIS API for JavaScript3.x 学习笔记[3] 加载底图天地图(经纬度版)的主要内容,如果未能解决你的问题,请参考以下文章

arcgis api for javascript 4.10版本的本地部署

Map学习(arcgis api for javascript3.18)

ArcGIS API for JavaScript学习:第一个地图

ArcGIS API for JavaScript

arcgis api for javascript怎么加载天地图的影像图

如何利用arcgis api for javascript在graphicslayer绘制点线面