[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets簡介
【官方文檔：https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html】
一、Intro to widgets using BasemapToggle
widgets(控件)是ArcGIS API for JavaScript的重要內容，widgets是指BasemapToggle(底圖切換)、Bookmarks(書簽)、Compass(指北針)、Layerlist(圖層列表)、Legend(圖例)等可以在地圖上添加的按鈕或功能鍵。更多widgets的信息，請查看API Reference：https://developers.arcgis.com/javascript/latest/api-reference/index.html。
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 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <title>Intro to widgets</title> 7 8 <!-- JS API的引入--> 9 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 10 <script src="https://js.arcgis.com/4.8/"></script> 11 12 <!-- 樣式的設置 --> 13 <style> 14 html,body,#viewDiv{ 15 padding:0; 16 margin:0; 17 height:100%; 18 width:100%; 19 } 20 </style> 21 22 <script> 23 24 </script> 25 </head> 26 27 <body> 28 <div id="viewDiv"></div> 29 </body> 30 </html>
其中，包括JS API的引入、style樣式的設置等等。
2.實例化Map和MapView
1 <script> 2 require([ 3 "esri/Map", 4 "esri/views/MapView", 5 "esri/widgets/BasemapToggle", //加載BasemapToggle widget模塊 6 "dojo/domReady!" 7 ],function(Map,MapView,BasemapToggle){ 8 //實例化Map 9 var map=new Map({ 10 basemap:"topo" 11 }); 12 13 //實例化MapView 14 var view=new MapView({ 15 container:"viewDiv", 16 map:map, 17 center:[117,34], 18 zoom:3 19 }); 20 }); 21 </script>
這裏實例化了Map和MapView對象，並設置了相關屬性。關於Map和MapView的更多信息，請查看：https://www.cnblogs.com/wangmengdx/p/9385033.html。
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 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> 6 <title>Intro to widgets</title> 7 8 <!-- JS API的引入 --> 9 <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css"> 10 <script src="https://js.arcgis.com/4.8/"></script> 11 12 <!-- 樣式的設置 --> 13 <style> 14 html,body,#viewDiv{ 15 padding:0; 16 margin:0; 17 height:100%; 18 width:100%; 19 } 20 </style> 21 22 <script> 23 require([ 24 "esri/Map", 25 "esri/views/MapView", 26 "esri/widgets/BasemapToggle", //加載BasemapToggle widget模塊 27 "dojo/domReady!" 28 ],function(Map,MapView,BasemapToggle){ 29 //實例化Map 30 var map=new Map({ 31 basemap:"topo" 32 }); 33 34 //實例化MapView 35 var view=new MapView({ 36 container:"viewDiv", 37 map:map, 38 center:[117,34], 39 zoom:3 40 }); 41 42 //創建BasemapToggle widget並設置相關屬性 43 var toggle=new BasemapToggle({ 44 view:view, //設置當前底圖為view當前承載的那個底圖（"topo"） 45 nextBasemap:"hybrid" //切換至"hybird"底圖 46 }); 47 48 //添加widget到view中的指定位置 49 view.ui.add(toggle,"top-right"); 50 }); 51 </script> 52 </head> 53 54 <body> 55 <div id="viewDiv"></div> 56 </body> 57 </html>
[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets簡介