前言

關(guān)于本篇功能實現(xiàn)用到的 api 涉及類看不懂的，請參照 esri 官網(wǎng)的 arcgis api 3.x for js：esri 官網(wǎng) api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網(wǎng)在線例子，這個也是學習 arcgis api 3.x 的好素材。

內(nèi)容概覽

1. 基于 arcgis api 3.x 實現(xiàn)加載在線地圖
2. 源代碼 demo 下載

本篇主要講述的是利用 arcgis api 加載互聯(lián)網(wǎng)在線地圖服務(wù)資源，簡單封裝一個底圖切換控件 js，在線地圖包括：天地圖、高德地圖以及百度地圖，效果圖如下：

image

image

實現(xiàn)思路

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);
                },
                /**
                 * 根據(jù)不同的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之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關(guān)注一波

GIS之家作品：GIS之家
GIS之家源碼咨詢：咨詢模式