【官方文档：】

---

一、Intro to widgets using BasemapToggle

widgets(控件)是ArcGIS API for JavaScript的重要内容，widgets是指BasemapToggle(底图切换)、Bookmarks(书签)、Compass(指北针)、Layerlist(图层列表)、Legend(图例)等可以在地图上添加的按钮或功能键。更多widgets的信息，请查看API Reference：。

widgets可以看作是被写好的、具有特定功能的一段JavaScript代码，封装在类(class)中。JS API提供了很多即拿即用(ready-to-use)的widgets。

一些widgets是默认添加在MapView或SceneView中的，如MapView中的Zoom(缩放)按钮、SceneView中的Compass(指北针)按钮。这些默认添加的按钮也是可以去掉的。在特定场景下，如果不需要这些功能，则可以去除。

总的来说，使用widgets有两步。一是创建并实例化widget；二是设置widget的相关属性。

这个例子介绍的是BasemapToggle widget，用于在同一个MapView中切换底图。这种方法在SceneView中也是适用的。

 

1.代码骨架

1  2  3      4         
      5         
      6          7          8         
      9         
     10         11         12         
     13         21         22         25     26     27     28         
     
29     30 

 其中，包括JS API的引入、style样式的设置等等。

 

2.实例化Map和MapView

1 

这里实例化了Map和MapView对象，并设置了相关属性。关于Map和MapView的更多信息，请查看：。

 

3.实例化BasemapToggle widget并设置相关属性

1 //创建BasemapToggle widget并设置相关属性2var toggle=new BasemapToggle({3     view:view,  //设置当前底图为view当前承载的那个底图（"topo"）4     nextBasemap:"hybrid"  //切换至"hybird"底图5 });

view属性可以是MapView或者SceneView。它使得BasemapToggle widget连接至初始底图，即使用BasemapToggle widget切换之前的底图。

nextBasemap属性设置切换之后的底图。这里可以是Esri提供的底图，或者是自己Server发布的服务。

 

4.在view中设置widget的位置

1 //添加widget到view中的指定位置2 view.ui.add(toggle,"top-right");

使用View的ui属性，可以设置widget在view中显示的位置。

 

5.最终代码及运行效果

1  2  3      4         
      5         
      6          7          8         
      9         
     10         11         12         
     13         21             22         52     53     54     55         
     
56     57