鹰眼简单点说就是地图的联动，鹰眼的全称是OverviewMap，在ERSI提供的API包中，在dijit中进行类的调用。查了很多的资料，总结一下：
具体的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鹰眼和比例尺</title>
<!--
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.7/"></script>-->
<!--<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/dijit/themes/tundra/tundra.css"/>-->
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.11/3.11/esri/css/esri.css" />
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.11/3.11/init.js"></script>
<script src="dojo/jsapi_vsdoc12_v38.js"></script> <style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
#BasemapToggle {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style> <script>
//引入需要的类
dojo.require("esri.map");
dojo.require("esri.dijit.BasemapToggle");
dojo.require("esri.dijit.HomeButton");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.dijit.Scalebar"); //定义全局变量
var map; //准备初始化
dojo.ready(init); //初始化方法
function init() {
//创建地图
map = new esri.Map("map", {
center: [121.48, 31.25],
zoom: 8,
basemap: "streets"
}); //卫星图切换
var toggle = new esri.dijit.BasemapToggle({
map: map, basemap: "satellite"
}, "BasemapToggle");
toggle.startup(); //HOME按钮
var home = new esri.dijit.HomeButton({
map: map
}, "HomeButton");
home.startup();
//比例尺
var scalebar = new esri.dijit.Scalebar({
map: map,
attachTo: "bottom-right",
width:10,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
}); //鹰眼小地图
var overviewMap = new esri.dijit.OverviewMap({
map: map,
visible: true, // 初始化可见，默认为false
attachTo: "bottom-left", // 默认右上角
width: 250, // 默认值是地图高度的 1/4th
height: 150, // 默认值是地图高度的 1/4th
opacity: 0.5, // 透明度 默认0.5
maximizeButton: true, // 最大化,最小化按钮，默认false
expandFactor: 2, //概览地图和总览图上显示的程度矩形的大小之间的比例。默认值是2，这意味着概览地图将至少是两倍的大小的程度矩形。
color: "#000000" // 默认颜色为#000000
});
overviewMap.startup();
} </script>
</head>
<body>
<div id="map">
<div id="BasemapToggle"></div>
<div id="HomeButton"></div>
</div>
</body>
</html>
运行截图：