本篇主要讲述的是操作arcgis api加载互联网在线舆图处事资源，简单封装一个底图切换控件js，在线舆图包孕：天舆图、高德舆图以及百度舆图，效果图如下：
实现思路：
1.简单的底图切换控件map.LayerSwitcherToolbar.js文件，里面自界说加载天舆图、高德舆图以及百度舆图类，其实都是担任TiledMapServiceLayer类：
（1）高德舆图：
//高德舆图图层扩展 GAODELayer = DObject({ id:null, esriLayer: null, esriLayerType:‘road‘, construct: function (options) { DUtil.extend(this, options); dojo.declare("GaoDeTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, { id:null, layertype: "road",//图层类型 constructor: function (args) { this.spatialReference = new esri.SpatialReference(MapConfig.mapInitParams.gaode_spatialReference); DUtil.extend(this, args); this.fullExtent = new esri.geometry.Extent({ xmin: MapConfig.params_gaode.fullExtent.xmin, ymin: MapConfig.params_gaode.fullExtent.ymin, xmax: MapConfig.params_gaode.fullExtent.xmax, ymax: MapConfig.params_gaode.fullExtent.ymax, spatialReference: this.spatialReference }); this.initialExtent = this.fullExtent; this.tileInfo = new esri.layers.TileInfo(MapConfig.params_gaode); this.loaded = true; this.onLoad(this); }, /** * 按照差此外layType返回差此外图层 * @param level * @param row * @param col * @returns {string} */ getTileUrl: function (level, row, col) { var url = ""; switch (this.layertype) { case "road"://矢量 url = ‘‘ + (col % 4 + 1) + ‘.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=‘ + col + ‘&y=‘ + row + ‘&z=‘ + level; break; case "st"://影像 url = ‘‘ + (col % 4 + 1) + ‘.is.autonavi.com/appmaptile?style=6&x=‘ + col + ‘&y=‘ + row + ‘&z=‘ + level; break; case "label"://影像标 url = ‘‘ + (col % 4 + 1) + ‘.is.autonavi.com/appmaptile?style=8&x=‘ + col + ‘&y=‘ + row + ‘&z=‘ + level; break; default: url = ‘‘ + (col % 4 + 1) + ‘.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=‘ + col + ‘&y=‘ + row + ‘&z=‘ + level; break; } return url; } }); this.esriLayer = new GaoDeTiledMapServiceLayer({id:this.id,layertype:this.esriLayerType}); }, hide: function () { this.esriLayer.hide(); }, show: function () { this.esriLayer.show(); } });
（2）百度舆图：
//百度舆图图层扩展 BDLayer = DObject({ id: null, esriLayer: null, esriLayerType: ‘bd_vec‘, construct: function (options) { DUtil.extend(this, options); dojo.declare("BDTiledMapServiceLayer", esri.layers.TiledMapServiceLayer, { id: null, layertype: "bd_vec",//图层类型 constructor: function (args) { this.spatialReference = new esri.SpatialReference(MapConfig.mapInitParams.bd_spatialReference); DUtil.extend(this, args); this.fullExtent = new esri.geometry.Extent({ xmin: MapConfig.params_bd.fullExtent.xmin, ymin: MapConfig.params_bd.fullExtent.ymin, xmax: MapConfig.params_bd.fullExtent.xmax, ymax: MapConfig.params_bd.fullExtent.ymax, spatialReference: this.spatialReference }); this.initialExtent = this.fullExtent; this.tileInfo = new esri.layers.TileInfo(MapConfig.params_bd); this.loaded = true; this.onLoad(this); }, /** * 按照差此外layType返回差此外图层 * @param level * @param row * @param col * @returns {string} */ getTileUrl: function (level, row, col) { var zoom = level - 1; var offsetX = parseInt(Math.pow(2, zoom)); var offsetY = offsetX - 1; var numX = col - offsetX, numY = (-row) + offsetY; var num = (col + row) % 8 + 1; var url = ""; switch (this.layertype) { case "bd_vec"://矢量 url = "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + level + "&styles=pl&scaler=1&udt=20141103"; break; case "bd_img"://影像 url = "http://shangetu" + num + ".map.bdimg.com/it/u=x=" + numX + ";y=" + numY + ";z=" + level + ";v=009;type=sate&fm=46&udt=20141015"; break; case "bd_cva"://影像标注 url = "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + level + "&styles=sl&udt=20141015"; break; default: url = "http://online" + num + ".map.bdimg.com/tile/?qt=tile&x=" + numX + "&y=" + numY + "&z=" + level + "&styles=pl&scaler=1&udt=20141103"; break; } return url; } }); this.esriLayer = new BDTiledMapServiceLayer({ id: this.id, layertype: this.esriLayerType }); }, hide: function () { this.esriLayer.hide(); }, show: function () { this.esriLayer.show(); } });
（3）天舆图：