1. 鷹眼
OverviewMap小部件用於在其關聯的主地圖內較清楚的當前鳥瞰圖的范圍。當主地圖范圍變化時，鷹眼圖會自動在其空間內更新范圍以保持和地圖的當前范圍保持一致，當鷹眼圖空間的地圖范圍變化時，主地圖的顯示范圍也會變化，主地圖范圍在OverviewMap控件中以矩形表示。
| 構造方法：esri.dijit.OverviewMap (params, srcNodeRef) 構造方法在創建一個鷹眼圖的時候需要傳入關聯的地圖對象和一個用於呈現鷹眼圖控件的HTML元素，該元素可選，如果沒有設置該HTML元素，將呈現在地圖對象上，另外還包括很多可選參數，以下幾個為常用的可選參數： |
|
| attachTo |
指定鷹眼圖附加到地圖的那個角落。參數值是"top-right","bottom-right","bottom-left" 和"top-left". |
| baseLayer |
指定鷹眼圖空間地圖的底圖 |
| expandFactor |
設置鷹眼地圖控件和矩形之間的比例，默認值是2 |
| opacity |
指定鷹眼圖控件上矩形的透明度 |
| hide |
隱藏鷹眼圖控件 |
| Show |
顯示鷹眼圖控件 |
| startup |
當構造函數創建成功后，使用該方法后就可以進行用戶交互了（幾乎所有的控件（Map除外）都有該方法 |
| destroy |
當應用程序不再需要比例尺控件的時候，摧毀該對象。（幾乎所有的控件都有該方法） |
n 關於startup方法
在Dijit一系列生命周期中，一個重要方法是啟動方法startup. 這個方法會在DOM節點被創建並添加到網頁之后執行，同時在這個方法也會等待當前小部件中所包含的子控件被創建並正確啟動之后才執行。
示例：
var overviewMapDijit = new esri.dijit.OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
需要提前引用
dojo.require("esri.dijit.OverviewMap");
2. 比例尺
Scalebar用於在地圖上或者一個指定的HTML節點中顯示地圖的比例尺信息。
構造方法：esri.dijit. Scalebar(p (params, srcNodeRef)
構造方法在創建一個比例尺控件的時候需要傳入關聯的地圖對象和一個用於呈現比例尺控件的HTML元素，該元素可選，如果沒有設置該HTML元素，將呈現在地圖對象上。另外還包括很多可選參數，以下幾個為常用的可選參數：
| attachTo |
比例尺控件在其關聯地圖上位置。參數值是"top-right","bottom-right","bottom-left" 和"top-left". |
| scalebarUnit |
比例尺控件的單位
|
| 屬性 |
說明 |
| hide |
隱藏比例尺控件 |
| Show |
顯示比例尺控件 |
示例
var scalebar = new esri.dijit.Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
需要提前引用
dojo.require("esri.dijit.Scalebar");
3. 書簽
書簽控件用於管理用戶創建的地圖書簽（Bookmark.MapBookmark），提供新建書簽、定位到書簽和刪除書簽的功能。
| 構造方法：esri.dijit. Bookmarks (params, srcNodeRef) 構造方法在創建一個書簽控件的時候需要傳入關聯的地圖對象和一個用於呈現書簽控件的HTML元素。另外還包括很多可選參數，以下幾個為常用的可選參數： |
|
| bookmarks |
在創建的時候用已有的書簽對象初始化書簽控件 |
| editable |
書簽控件是否可以編輯 |
| 方法 |
說明 |
| addBookmark |
給書簽控件添加一個書簽 |
| hide |
隱藏書簽控件 |
| removeBookmark |
從書簽控件中移除一個書簽 |
| show |
顯示書簽控件 |
| toJson |
將書簽對象返回一組json |
| 屬性 |
說明 |
| bookmarks |
返回書簽控件的所有書簽 |
| 事件 |
說明 |
| onClick |
擋在一個書簽上編輯的時候發生 |
| onEdit |
當編輯書簽的時候發生 |
| onRemove |
當移除一個書簽的時候發生 |
示例
// specify "editable" as true to enable editing
var bookmark = new esri.dijit.Bookmarks({
map: map,
bookmarks: [],
editable: true
}, dojo.byId('bookmark'));
需要提前引用
dojo.require("esri.dijit.Bookmarks");
當然，還需要一個div，例子參考最后的，放在界面的左邊，未來可以放更多東西。
4. 圖例
Legend 控件用於動態顯示全部或者部分圖層的標簽和符號信息，圖例控件支持下面四種圖層:
ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer 和KMLLayer
| 構造方法：esri.dijit. Legend (params, srcNodeRef) 構造方法在創建一個圖例的時候需要傳入關聯的地圖對象和一個用於呈現圖例控件的HTML元素。另外還包括很多可選參數，以下幾個為常用的可選參數： |
|
| autoUpdate |
當地圖的比例尺發生變化或者圖層發生變化的時候，圖例控件是否自動更新 |
| respectCurrentMapScale |
圖例控件是否自動更新 |
| layerInfos |
指定一個圖層子集用於在圖例中顯示 |
| arrangement |
指定圖例在HTML元素中的對其方式 |
| 方法 |
說明 |
| refresh |
當在構造函數中用了layerInfos，用這個方法刷新圖例以替換構造函數中的圖層 |
示例
var legendLayers = [];
legendLayers.push({ layer: layer, title: 'test' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
需要提前引用
dojo.require("esri.dijit.Legend");
當然，還需要一個div，例子參考最后的，放在界面的右邊。
完整代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>地圖-Test </title>
<link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/dojo/dijit/themes/tundra/tundra.css"
rel="stylesheet" type="text/css" />
<link href="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/js/esri/css/esri.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript"> var dojoConfig = { parseOnLoad: true };</script>
<script src="arcgis_js_v39_api/arcgis_js_api/library/3.9/3.9compact/init.js" type="text/javascript"></script>
<style type="text/css"> .MapClass { width:900px; height:600px; border:1px solid #000;} </style>
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color: #fff; overflow:hidden;
font-family: sans-serif;
}
#header {
padding-top: 4px;
padding-right: 15px;
background-color:#444;
color:#fff;
font-size:16pt; text-align:right;font-weight:bold;
height:55px;
}
#subheader {
font-size:small;
color: #cfcfcf;
text-align:right;
}
#leftPane{
margin: 0;
padding: 5px;
width: 250px;
color: #3C1700;
background-color: #fff;
}
.ds { background: #000; overflow: hidden; position: absolute; z-index: 2; }
#ds-h div { width: 100%; }
#ds-l div { height: 100%; }
#ds .o1 { filter: alpha(opacity=10); opacity: .1; }
#ds .o2 { filter: alpha(opacity=8); opacity: .08; }
#ds .o3 { filter: alpha(opacity=6); opacity: .06; }
#ds .o4 { filter: alpha(opacity=4); opacity: .04; }
#ds .o5 { filter: alpha(opacity=2); opacity: .02; }
#ds .h1 { height: 1px; }
#ds .h2 { height: 2px; }
#ds .h3 { height: 3px; }
#ds .h4 { height: 4px; }
#ds .h5 { height: 5px; }
#ds .v1 { width: 1px; }
#ds .v2 { width: 2px; }
#ds .v3 { width: 3px; }
#ds .v4 { width: 4px; }
#ds .v5 { width: 5px; }
</style>
<style>
html, body {
height: 97%;
width: 98%;
margin: 1%;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Bookmarks");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.Legend");
var map;
var editorWidget;
dojo.addOnLoad(function () {
map = new esri.Map("map");
var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://localhost:6080/arcgis/rest/services/test/MapServer");
map.addLayer(layer);
// Create the bookmark widget
// specify "editable" as true to enable editing
var bookmark = new esri.dijit.Bookmarks({
map: map,
bookmarks: [],
editable: true
}, dojo.byId('bookmark'));
var scalebar = new esri.dijit.Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
var overviewMapDijit = new esri.dijit.OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
var legendLayers = [];
legendLayers.push({ layer: layer, title: 'test' });
map.on('layers-add-result', function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});
</script>
</head>
<body class="claro">
<div id="mainWindow"
data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 1200px; height: 800px; margin: 0;">
<div id="leftPane"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'left'">
<div id="bookmark"></div>
</div>
<div id="rightPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
data-dojo-props="title:'圖例', selected:true">
<div id="legendDiv"></div>
</div>
</div>
</div>
<div id="map" class="shadow"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
<div id="ds"> <!-- drop shadow divs -->
<div id="ds-h">
<div class="ds h1 o1"></div>
<div class="ds h2 o2"></div>
<div class="ds h3 o3"></div>
<div class="ds h4 o4"></div>
<div class="ds h5 o5"></div>
</div>
<div id="ds-l">
<div class="ds v1 o1"></div>
<div class="ds v2 o2"></div>
<div class="ds v3 o3"></div>
<div class="ds v4 o4"></div>
<div class="ds v5 o5"></div>
</div>
</div> <!-- end drop shadow divs -->
</div>
</div>
</body>
</html>