05 地图添加底图切换控件

本文讲述如何在地图上添加地图切换控件。通过底图切换控件，我们可以实现当前地图和的地图之间的一个切换，效果如下：

如上所示，通过右上角的底图切换控件可以实现两地图之间的切换显示，具体操作如下：

添加底图切换控件的容器，并设置样式：

<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>

X北辰北的博客，想看更多内容，请移步我的个人博客：http://www.xbeichenbei.com/