對于中國開發者在創建GIS應用的時候，往往比較頭疼的是底圖資源的缺乏。其實國家測繪地信局就提供一個很好的免費資源：天地圖。使用ArcGIS API的開發人員可以直接利用該資源作為地圖應用的底圖。
ArcGIS JavaScript API最近新推出了3.18版本。所以下面示例代碼將基于該版本。
?
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /><title>Test Map</title><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css" /><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.18/3.18/esri/css/esri.css" /><style>html,body,#ui-map-view {margin: 0;padding: 0;width: 100%;height: 100%;}</style><script src="http://localhost/arcgis_js_api/library/3.18/3.18/init.js"></script><script>
var myMaprequire(['dojo/_base/declare','esri/layers/ArcGISTiledMapServiceLayer','esri/layers/TiledMapServiceLayer','esri/map','esri/layers/TileInfo','esri/layers/LOD','esri/SpatialReference','dojo/domReady!'
], function (declare, TileLayer, TiledMapServiceLayer, Map, TileInfo, LOD, SpatialReference) {declare('TDTLayer', TiledMapServiceLayer, {constructor: function () {this.spatialReference = new esri.SpatialReference({ wkid: 4490 })this.initialExtent = (this.fullExtent = new esri.geometry.Extent(-180.0, -90.0, 180.0, 90.0, this.spatialReference))this.tileInfo = new esri.layers.TileInfo({'rows': 256,'cols': 256,'compressionQuality': 0,'origin': {'x': -180,'y': 90},'spatialReference': {'wkid': 4490},'lods': [{'level': 2, 'resolution': 0.3515625, 'scale': 147748796.52937502},{'level': 3, 'resolution': 0.17578125, 'scale': 73874398.264687508},{'level': 4, 'resolution': 0.087890625, 'scale': 36937199.132343754},{'level': 5, 'resolution': 0.0439453125, 'scale': 18468599.566171877},{'level': 6, 'resolution': 0.02197265625, 'scale': 9234299.7830859385},{'level': 7, 'resolution': 0.010986328125, 'scale': 4617149.8915429693},{'level': 8, 'resolution': 0.0054931640625, 'scale': 2308574.9457714846},{'level': 9, 'resolution': 0.00274658203125, 'scale': 1154287.4728857423},{'level': 10, 'resolution': 0.001373291015625, 'scale': 577143.73644287116},{'level': 11, 'resolution': 0.0006866455078125, 'scale': 288571.86822143558},{'level': 12, 'resolution': 0.00034332275390625, 'scale': 144285.93411071779},{'level': 13, 'resolution': 0.000171661376953125, 'scale': 72142.967055358895},{'level': 14, 'resolution': 8.58306884765625e-005, 'scale': 36071.483527679447},{'level': 15, 'resolution': 4.291534423828125e-005, 'scale': 18035.741763839724},{'level': 16, 'resolution': 2.1457672119140625e-005, 'scale': 9017.8708819198619},{'level': 17, 'resolution': 1.0728836059570313e-005, 'scale': 4508.9354409599309},{'level': 18, 'resolution': 5.3644180297851563e-006, 'scale': 2254.4677204799655}]})this.loaded = truethis.onLoad(this)},getTileUrl: function (level, row, col) {return 'http://t0.tianditu.com/DataServer?T=vec_c&X=' + col + '&Y=' + row + '&L=' + level}})myMap = new Map('ui-map-view', {center: [111.87, 23.57]})var tdt = new TDTLayer()myMap.addLayer(tdt)})</script>
</head><body class="claro"><div id="ui-map-view"></div>
</body></html>
)
