前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：esri 官网 api，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：esri 官网在线例子，这个也是学习 arcgis api 3.x 的好素材。

内容概览

1. 基于 arcgis api 3.x 实现加载在线地图
2. 源代码 demo 下载

本篇主要讲述的是利用 arcgis api 加载互联网在线地图服务资源，简单封装一个底图切换控件 js，在线地图包括：天地图、高德地图以及百度地图，效果图如下：

image

image

实现思路

1. 简单的底图切换控件 map.LayerSwitcherToolbar.js 文件，里面自定义加载天地图、高德地图以及百度地图类，其实都是继承 TiledMapServiceLayer类：

• 高德地图：

//高德地图图层扩展
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 = 'http://webrd0' + (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 = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=6&x=' + col + '&y=' + row + '&z=' + level;
                         break;
                     case "label"://影像标
                         url = 'http://webst0' + (col % 4 + 1) + '.is.autonavi.com/appmaptile?style=8&x=' + col + '&y=' + row + '&z=' + level;
                         break;
                     default:
                         url = 'http://webrd0' + (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();
        }
});

• 百度地图：

更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式