鷹眼簡單點說就是地圖的聯動，鷹眼的全稱是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>
運行截圖：
