ArcGIS API for JavaScript3.x 學習筆記[3] 加載底圖（一）【天地圖（經緯度版）】
阿新 • • 發佈：2017-09-13
矢量地圖 說明 tiled spa 過程 相同 服務器列表 text 服務
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] 加載底圖（一）【天地圖（經緯度版）】