程序喵描述：此示例显示了如何使用按钮来切换不同层之间中的地图。从ArcGIS Online地图中的所有图层发生ArcGISTiledMapServiceLayers。
这个 BasemapGallery 组件，在2.1版本的ArcGISJavaScript API的引入，简化了ArcGIS Online basemaps切换显示的过程。
在此示例中在库中每个菜单项 创建每一个basemap . 由于 showArcGISBasemaps 设置为true,从ArcGIS Online库中包含底图。
basemapGallery =new esri.dijit.BasemapGallery({
showArcGISBasemaps:true,
map: map
});当一个菜单项被选择的默认 basemap 被改变到所选的item
onClick: dojo.hitch(this,function(){
this.basemapGallery.select(basemap.id);
})
esri.dijit.BasemapGallery从ArcGIS.com或用户自定义的地图或image services，这个BasemapGallery的dijit显示一个底图的集合。当一个新的底图在BasemapGallery被选中后，当前层被移除，并被添加了新的层。（新的图层被添加，旧的图层将会被移除）http://help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#basemapgallery
引用链接：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/map_agol
在线演示：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_agol/index.html
Dojo在线API：http://dojotoolkit.org/api/
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>显示多个 ArcGIS Online Services</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map { padding:0; }
</style>
<script>
var dojoConfig = {
parseOnLoad: true // 解析加载
};
</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
<script>
// 导入包
dojo.require("esri.map");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("dijit.Tooltip");
var map;
var basemapGallery;
function init() {
map = new esri.Map("map", {
center: [-31.036, 42.747], // 地图居中，数组包含经度和纬度(如,[-98，40]) 或 esri.geometry.Point作为输入的位置。
zoom: 3 // 缩放深度
});
basemapGallery = new esri.dijit.BasemapGallery({ // 新的图层被添加，旧的图层将会被移除
showArcGISBasemaps: true, // 可选，默认为true 查询ArcGIS.com来检索有效底图，为false时，只有用户自定义的地图指定地图属性才被显示
map: map // 显示地图
});
dojo.connect(basemapGallery, "onLoad", function(){ // 初始化加载
// basemapGallery.basemaps用户定义的数组底图显示在BasemapGallery
dojo.forEach(basemapGallery.basemaps, function(basemap) {
// 当菜单选项没选中时，每个底图添加一个菜单项
dijit.byId("basemapMenu").addChild(
new dijit.MenuItem({
label: basemap.title, // basemap包含的参数有id,thumbnailUrl(地理底图的缩略图图像的URL),title
title: basemap.thumbnailUrl,
onClick: dojo.hitch(this, function() { // dojo.hitch给一个方法绑定其执行上下文
alert("basemao.id :"+basemap.id);
this.basemapGallery.select(basemap.id); // 选择一个新的地图底图。地图刷新，如果没有找到具有指定ID的底图，则返回null
})
})
);
});
});
}
dojo.ready(init); // 初始化加载
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
<div style="position:absolute; right:50px; top:10px; z-Index:99;">
<button id="dropdownButton" label="Basemaps" data-dojo-type="dijit.form.DropDownButton">
<div data-dojo-type="dijit.Menu" id="basemapMenu">
<!--从底图动态创建的菜单项 -->
</div>
</button>
</div>
</div>
</div>
</body>
</html>此处发现我们并没有创建图层服务，但是为什么会有图层显示呢？
因为showArcGISBasemaps: true, // 可选，默认为true 查询ArcGIS.com来检索有效底图，为false时，只有用户自定义的地图指定地图属性才被显示
如果指定自定义方式就将此属性设置为false，然后使用<Basemap[]>basemaps 参数即可
可选。用户定义的数组底图显示在BasemapGallery。
var basemaps= [];
var waterBasemap = new esri.dijit.Basemap({
layers:[waterTemplateLayer],
title:"Water Template",
thumbnailUrl:"images/waterThumb.png"
});
basemaps.push(waterBasemap);显示结果如下：
未经允许请勿转载：程序喵 » ArcGIS For JavaScript API Toggle multiple ArcGIS Online services —— 切换多个ArcGIS Online服务