arcgis api 3.x for js 入門開發系列十七線上天地圖、百度地圖、高德地圖（附源碼下載下傳）

本篇主要講述的是利用arcgis api加載網際網路線上地圖服務資源，簡單封裝一個底圖切換控件js，線上地圖包括：天地圖、高德地圖以及百度地圖

前言

關于本篇功能實作用到的 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，線上地圖包括：天地圖、高德地圖以及百度地圖，效果圖如下：

實作思路

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之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢