本文讲述如何在地图上添加地图切换控件。通过底图切换控件，我们可以实现当前地图和的地图之间的一个切换，效果如下：
如上所示，通过右上角的底图切换控件可以实现两地图之间的切换显示，具体操作如下：
添加底图切换控件的容器，并设置样式：
<div id="map">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
<div id="BasemapToggle"></div>
</div>样式代码：
#BasemapToggle{
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}然后通过“esri/dijit/BasemapToggle”模块来实例化一个切换控件，如下：
var basemaptogle=new BasemapToggle({
map:map,
basemap:"satellite"
},"BasemapToggle");
basemaptogle.startup();至此，底图切换的空间已经添加成功，完整代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
#HomeButton{
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
#LocateButton{
position: absolute;
top: 140px;
left: 20px;
z-index: 50;
}
#BasemapToggle{
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
var map；
require(["esri/map",
"esri/dijit/HomeButton",
"esri/dijit/LocateButton",
"esri/dijit/OverviewMap",
"esri/dijit/Scalebar",
"esri/dijit/BasemapToggle",
"dojo/domReady!"], function(Map,HomeButton,LocateButton,OverviewMap,Scalebar,BasemapToggle) {
//创建地图
map = new Map("map", {
basemap: "osm", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [104.072259,30.663527], // longitude, latitude
zoom: 10
});
//创建主页按钮
var home=new HomeButton({
map:map
},"HomeButton");
home.startup();
//创建当前位置定位控件
var geoLocate=new LocateButton({
map:map
},"LocateButton");
geoLocate.startup();
//创建鹰眼图控件
var overviewmapdijit=new OverviewMap({
map:map,
visible:true,
attachTo:"bottom-right"
});
overviewmapdijit.startup();
//创建比例尺控件
var scalebar=new Scalebar({
map:map,
scalebarUnit:"dual"
});
//创建底图切换空间
var basemaptogle=new BasemapToggle({
map:map,
basemap:"satellite"
},"BasemapToggle");
basemaptogle.startup();
});
</script>
</head>
<body>
<div id="map">
<div id="HomeButton"></div>
<div id="LocateButton"></div>
<div id="BasemapToggle"></div>
</div>
</body>
</html>