（转）Arcgis for js加载天地图

http://blog.csdn.net/gisshixisheng/article/details/44494715

综述：本节讲述的是用Arcgis for js加载天地图的切片资源。

天地图的切片地图可以通过esri.layers.TiledMapServiceLayer来加载，在此将之进行了一定的封装，如下：

1、切片线划图——TDTLayer.js

[javascript] view plain copy
 
 print?
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 4326 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));  
  8.                 this.tileInfo = new esri.layers.TileInfo({  
  9.                     "rows": 256,  
  10.                     "cols": 256,  
  11.                     "compressionQuality": 0,  
  12.                     "origin": {  
  13.                         "x": -180,  
  14.                         "y": 90  
  15.                     },  
  16.                     "spatialReference": {  
  17.                         "wkid": 4326  
  18.                     },  
  19.                     "lods": [  
  20.                         { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },  
  21.                         { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },  
  22.                         { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },  
  23.                         { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },  
  24.                         { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },  
  25.                         { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },  
  26.                         { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },  
  27.                         { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },  
  28.                         { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },  
  29.                         { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },  
  30.                         { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },  
  31.                         { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },  
  32.                         { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },  
  33.                         { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },  
  34.                         { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },  
  35.                         { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },  
  36.                         { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }  
  37.                     ]  
  38.                 });  
  39.                 this.loaded = true;  
  40.                 this.onLoad(this);  
  41.             },  
  42.             getTileUrl: function (level, row, col) {  
  43.                 return "http://t" + col % 8 + ".tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";  
  44.             }  
  45.         });  
  46.     });  


2、切片标注——TDTAnnoLayer.js

[javascript] view plain copy
 
 print?
  1. define(["dojo/_base/declare",  
  2.     "esri/layers/tiled"],  
  3.     function (declare) {  
  4.         return declare(esri.layers.TiledMapServiceLayer, {  
  5.             constructor: function () {  
  6.                 this.spatialReference = new esri.SpatialReference({ wkid: 4326 });  
  7.                 this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference));  
  8.                 this.tileInfo = new esri.layers.TileInfo({  
  9.                     "rows": 256,  
  10.                     "cols": 256,  
  11.                     "compressionQuality": 0,  
  12.                     "origin": {  
  13.                         "x": -180,  
  14.                         "y": 90  
  15.                     },  
  16.                     "spatialReference": {  
  17.                         "wkid": 4326  
  18.                     },  
  19.                     "lods": [  
  20.                         { "level": 2, "resolution": 0.3515625, "scale": 147748796.52937502 },  
  21.                         { "level": 3, "resolution": 0.17578125, "scale": 73874398.264687508 },  
  22.                         { "level": 4, "resolution": 0.087890625, "scale": 36937199.132343754 },  
  23.                         { "level": 5, "resolution": 0.0439453125, "scale": 18468599.566171877 },  
  24.                         { "level": 6, "resolution": 0.02197265625, "scale": 9234299.7830859385 },  
  25.                         { "level": 7, "resolution": 0.010986328125, "scale": 4617149.8915429693 },  
  26.                         { "level": 8, "resolution": 0.0054931640625, "scale": 2308574.9457714846 },  
  27.                         { "level": 9, "resolution": 0.00274658203125, "scale": 1154287.4728857423 },  
  28.                         { "level": 10, "resolution": 0.001373291015625, "scale": 577143.73644287116 },  
  29.                         { "level": 11, "resolution": 0.0006866455078125, "scale": 288571.86822143558 },  
  30.                         { "level": 12, "resolution": 0.00034332275390625, "scale": 144285.93411071779 },  
  31.                         { "level": 13, "resolution": 0.000171661376953125, "scale": 72142.967055358895 },  
  32.                         { "level": 14, "resolution": 8.58306884765625e-005, "scale": 36071.483527679447 },  
  33.                         { "level": 15, "resolution": 4.291534423828125e-005, "scale": 18035.741763839724 },  
  34.                         { "level": 16, "resolution": 2.1457672119140625e-005, "scale": 9017.8708819198619 },  
  35.                         { "level": 17, "resolution": 1.0728836059570313e-005, "scale": 4508.9354409599309 },  
  36.                         { "level": 18, "resolution": 5.3644180297851563e-006, "scale": 2254.4677204799655 }  
  37.                     ]  
  38.                 });  
  39.                 this.loaded = true;  
  40.                 this.onLoad(this);  
  41.             },  
  42.             getTileUrl: function (level, row, col) {  
  43.                 return "http://t" + row % 8 + ".tianditu.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=" + level + "&TILEROW=" + row + "&TILECOL=" + col + "&FORMAT=tiles";  
  44.             }  
  45.         });  
  46.     });  


封装好之后就可以在页面调用了，调用的时候需要导入这些自定义的图层，导入方式为：

[javascript] view plain copy
 
 print?
  1. <script type="text/javascript">  
  2.     dojoConfig = {  
  3.         parseOnLoad: true,  
  4.         packages: [{  
  5.             name: 'tdlib',  
  6.             location: this.location.pathname.replace(//[^/]+$/, "")+"/js/tdlib"  
  7.         }]  
  8.     };  
  9. </script>  
  10. <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>  
  11. <script>  
  12.     require(["tdlib/TDTLayer",  
  13.         "tdlib/TDTAnnoLayer"],  
  14.     function (TDTLayer,  
  15.          TDTAnnoLayer  
  16.     ){  
  17.         var basemap = new TDTLayer();  
  18.         map.addLayer(basemap);  
  19.         var annolayer = new TDTAnnoLayer();  
  20.         map.addLayer(annolayer);  
  21.     });  
  22. </script>  

完整调用页面代码为：

[html] view plain copy
 
 print?
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>TianDi Map</title>  
  6.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css">  
  7.     <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">  
  8.     <style>  
  9.         html, body, #map {  
  10.             height: 100%;  
  11.             margin: 0;  
  12.             padding: 0;  
  13.         }  
  14.     </style>  
  15.     <script type="text/javascript">  
  16.         dojoConfig = {  
  17.             parseOnLoad: true,  
  18.             packages: [{  
  19.                 name: 'tdlib',  
  20.                 location: this.location.pathname.replace(//[^/]+$/, "")+"/js/tdlib"  
  21.             }]  
  22.         };  
  23.     </script>  
  24.     <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>  
  25.     <script>  
  26.         var map;  
  27.         require(["esri/map",  
  28.             "tdlib/TDTLayer",  
  29.             "tdlib/TDTAnnoLayer",  
  30.             "esri/layers/FeatureLayer",  
  31.             "esri/geometry/Point",  
  32.             "esri/symbols/SimpleFillSymbol",  
  33.             "esri/symbols/SimpleLineSymbol",  
  34.             "dojo/_base/Color",  
  35.             "dojo/domReady!"],  
  36.         function (Map,  
  37.              TDTLayer,  
  38.              TDTAnnoLayer,  
  39.              FeatureLayer,  
  40.              Point,  
  41.              SimpleFillSymbol,  
  42.              SimpleLineSymbol,  
  43.              Color  
  44.         ){  
  45.             map = new Map("map", { logo: false });  
  46.             var basemap = new TDTLayer();  
  47.             map.addLayer(basemap);  
  48.             var annolayer = new TDTAnnoLayer();  
  49.             map.addLayer(annolayer);  
  50.   
  51.             var pro = new FeatureLayer("http://localhost:6080/arcgis/rest/services/chinawgs84/MapServer/1");  
  52.             map.addLayer(pro);  
  53.   
  54.             var pt = new Point(103.847, 36.0473);  
  55.             map.centerAndZoom(pt, 3);  
  56.         });  
  57.     </script>  
  58. </head>  
  59. <body>  
  60. <div id="map"></div>  
  61. </body>  
  62. </html>  


在图中，我还添加了一个我本机用Arcgis Server发布的特征层，完成后效果如下：

本文抛砖引玉，更多的天地图如影像等请参照：http://www.tianditu.com/guide/index.html

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/telwanggs/p/6972736.html