文前說明：關於style就是頁面的css暫時不做評論，因為官方給的例子的樣式實在太簡單了，照抄閱讀即可。
這篇文章有着大量AJS 4.x版本添加的內容，如監聽watch、Promise對象、回調函數、異步處理等內容，原理性的東西我會在文末解釋，各位看官不用擔心看不懂，我盡量用通俗的語言解釋這些。
慣例，如果不習慣從頭看到尾，可以直接跳到后面看總結。
大家應該看過商業地圖的縮略圖功能吧？以度娘地圖為例，在使用街景地圖的時候，左下角會出現一個地點一樣的2D小地圖：
這個就是鷹眼功能的應用，在很多桌面軟件中如Erdas、Envi，鷹眼是很常見的。
//如果以下超鏈接日后更新了4.3或更高版本，請自行尋找4.2的sample配合本文學習~
這次就解讀2D overview map in SceneView這個例子。
源代碼：點我
其實就是一個2D的MapView在3D的SceneView的顯示而已，關鍵就在數據的同步，官方指出了watch()方法是關鍵。
話不多說，先上最終效果圖：
結構大概就是，大的DIV里放SceneView，小的DIV里放MapView。
小的DIV里又有一個黑色的區域來標識當前SceneView的區域。小的DIV的widgets被移除。
html代碼為：
<body> <div id="viewDiv"></div> <div id="overviewDiv"> <div id="extentDiv"></div> </div> </body>
老樣子，require給出引用（以前都叫第一個字符串數組參數，為了省事，以后直接叫引用了）
require( [ "esri/Map", "esri/views/SceneView", "esri/views/MapView", "esri/core/watchUtils", "dojo/dom", "dojo/promise/all", "dojo/domReady!" ], function(Map, SceneView, MapView, watchUtils, dom, all){ //你的代碼 } );
重點應該是：
view的watch()方法、watchUtils的when方法、view的toScreen方法、view的extent屬性、view的then方法。
既然有兩個view（DIV），那么肯定要有兩份map（數據）。
所以第二參數（以前的文章叫函數參數，之后都叫第二參數）先將map和view定義如下：
var mainMap = new Map({ basemap: "hybrid", ground: "world-elevation" }); var overviewMap = new Map({ basemap: "osm" }); var mainView = new SceneView({ container: "viewDiv", map: mainMap }); var mapView = new MapView({ container: "overviewDiv", map: overviewMap });
mainMap、mainView是3D的，overviewMap、mapView是2D的。
當然，我們看到的2D的小地圖是沒有放大縮小那些控件的，只需1行代碼，就可以置空那些控件。
mapView.ui.components = [];
查閱API，可以知道ui屬性是DefaultUI類，DefaultUI繼承自UI類。components是字符串數組，若賦值為空數組則清空。相應的，DefaultUI類有remove和empty方法可以清除控件，就不細說了。
為了便於操作，把當前區域的DIV“extendDiv”的DOM元素獲取為變量：
var extentDiv = dom.byId("extentDiv");
以上就完成了准備部分。
接下來，數據加載完成后，就要對2D的地圖和3D的地圖進行“同步”了，需要用到兩個view的then方法。
then()方法是Promise對象的特有方法，而Promise是什么暫時無需了解，只要知道在AJS 4.x中Promise是一個很重要的東西。
而且，MapView和SceneView類都繼承了Promise類。不僅如此，AJS 4.x中很多方法返回的都是Promise對象。
先看看mainView（3D視圖）的then方法看看它做了什么：
mainView.then(function() { mainView.goTo({ center: [7, 46], scale: 200000, heading: 35, tilt: 60 },
{ animate: true, duration: 100000 }) });
很好，它接受了一個參數，類型是方法。這個匿名方法干了什么呢？這不就是上一篇文章里說的縮放動畫嘛！（goTo）跳過，看mapView（2D視圖）的then方法看它做了什么：
mapView.then(function() { mainView.watch("extent", updateOverviewExtent); mapView.watch("extent", updateOverviewExtent); watchUtils.when(mainView, "stationary", updateOverview); function updateOverview() { mapView.goTo({ center: mainView.center, scale: mainView.scale * 2 * Math.max(mainView.width / mapView.width, mainView.height / mapView.height) }); } function updateOverviewExtent() { var extent = mainView.extent; var bottomLeft = mapView.toScreen(extent.xmin, extent.ymin); var topRight = mapView.toScreen(extent.xmax, extent.ymax); extentDiv.style.top = topRight.y + "px"; extentDiv.style.left = bottomLeft.x + "px"; extentDiv.style.height = (bottomLeft.y - topRight.y) + "px"; extentDiv.style.width = (topRight.x - bottomLeft.x) + "px"; } });
很長的樣子。
我慢慢解釋。
仍然是接受一個方法作為參數（為什么then接受的參數那么奇怪？文末會解釋的）
//題外話：在javascript里頭傳函數/方法是很常見的，函數/方法是js的一種變量類型，在C/C++里頭可以傳遞函數指針，在C#里頭可以傳遞委托變量。
這個方法里有兩個方法，命名為 updateOverview 和 updateOverviewExtent，我們根據這兩個方法把這個then方法的代碼拆開看，發現watch和watchUtils.when是跟這兩個方法配對的。
即：
//兩個視圖都與updateOverviewExtent方法綁定 mainView.watch("extent", updateOverviewExtent); mapView.watch("extent", updateOverviewExtent); function updateOverviewExtent() { var extent = mainView.extent; var bottomLeft = mapView.toScreen(extent.xmin, extent.ymin); var topRight = mapView.toScreen(extent.xmax, extent.ymax); extentDiv.style.top = topRight.y + "px"; extentDiv.style.left = bottomLeft.x + "px"; extentDiv.style.height = (bottomLeft.y - topRight.y) + "px"; extentDiv.style.width = (topRight.x - bottomLeft.x) + "px"; }
查閱API，得知視圖的父類Accessor就支持watch方法了。值得一提的是，為了實現監聽變化，AJS4.x版本專門提供了watch方法代替了以前的舊方法。
watch的用法是：
對象.watch("該需要監聽的屬性名", 屬性變化后需要執行的回調函數);
即某對象監聽了它的某個屬性后，這個屬性一旦發生改變，就會去執行某些代碼。
在本例中，需要監聽的是兩個view對象的extent（范圍）屬性，一旦extent發生變化，那么updateOverviewExtent()方法就會被執行。
updateOverviewExtent()方法的大概意思就是：獲取3D視圖的范圍->獲取2D視圖的對角線兩個角點->更改2D視圖上方的區域框的DOM元素的尺寸屬性（top、left、height、width）
光改變區域框是不行的，還要改變2D地圖的范圍。
watchUtils.when(mainView, "stationary", updateOverview); function updateOverview() { mapView.goTo({ center: mainView.center, scale: mainView.scale * 2 * Math.max(mainView.width / mapView.width, mainView.height / mapView.height) }); }
watchUtils這個對象，是位於esri/core/watchUtils模塊下的一個類。
它代表的含義是：監聽某個對象，當這個對象的某個屬性是true時，執行給定的方法。
查閱API得知，這個類提供了when這個靜態方法，when方法的意義是：
所以，在本例中，意思就是：
當mainView這個3D視圖對象的"stationary"屬性是true時，刷新mapView這個2D視圖對象。
刷新2D視圖對象主要用的是上一篇中說到的goTo()方法，本例只指定了center和scale這兩個屬性組成的Object匿名對象。
SceneView類的stationary屬性是布爾類型的，意義是當前視圖是否已經靜止（一般視圖會由鼠標拖拽或者goTo()方法產生動態效果，一旦停止下來，stationary就會變成true）
總結一下。
這個例子大概思路就是：
·先實例化兩個map和兩個view，對3D的mainView在創建完成后使用then()方法縮放到指定位置。
·其中，對2D的mapView創建完成后使用then()方法，分別監聽兩個view的extent屬性，還監聽3D視圖的stationary屬性。
·當extent屬性發生變化時，2D視圖上方范圍框先進行變化，然后2D地圖緊隨變化。
·當3D視圖靜止下來后，刷新2D視圖。
監聽還算比較好理解，需要注意的不多，注意到watch和watchUtils.when這兩個方法返回的都是WatchHandle對象。待以后研究多了監聽后，再仔細看看別的監聽方法。
難點就在於then方法。
難點。
then()方法怎么來的？這要從ES6（全名ECMAScript 2015）的新規范Promise對象說起。ECMAScript是JavaScript的標准，JS是ES的實現。
Promise是什么？這個東西說復雜也很復雜，它是：
為了處理異步操作多層回調函數的寫法枯燥、難以閱讀維護而產生的，由CommonJS社區發起的一個新規范的類。
最顯著的特征是它實例化的對象都有then()和catch()方法（PromiseA+規范？好像是)
在AJS中，繼承了Promise的類有：
全部的Layers
MapView、SceneView、LayerView
ViewAnimation
能返回Promise對象的類數不勝數。
所以說，為什么要用Promise？
這又要從異步操作說起了。
————
在AJS 4.x中，數據（Map類）和視圖（View類）是分開的，3.x版本繪圖渲染是Map自己完成的。
由於View視圖類被分離開，繪圖邏輯就成了它的主要功能。當然，繪圖不會很快，往往有一個過程，尤其是超大數據量的繪圖的時候會有一個比較長的等待過程。
所以，在JS里，較長的處理會丟給異步處理（就是同時進行好幾個操作）
但是但是，我們知道JS是單線程的，它是怎么處理異步處理的呢？簡單說說，JS的異步處理其實是個“偽異步”，是先完成同步代碼才執行異步代碼的。
通常，異步代碼會做一些計算量比較大的事情，而同步代碼則做一些不怎么耗時間的初始化工作。就是說
同步代碼花少量的時間去初始化一些事情，其間有n個異步任務丟給異步隊列。當同步代碼完成初始化后（時間短），異步代碼開始按順序執行。
比如：界面的構建交給同步代碼，而其間有n個后台數據交換、處理、計算的任務，就丟給異步隊列去准備。當界面構造好（時間往往很短，幾乎是秒速），異步代碼就在后面開始執行。
這先看到的界面會讓體驗好很多，如果異步代碼（就是耗時比較大的任務）放在同步代碼里執行，那么由於同步的性質，必須等待這些耗時大的任務執行完成才能繼續往下走（js的特點，單線程）
【在本例中】
初始化view，我不知道在雲端是怎么運行的（因為我用的是CDN來運行AJS程序），但是我知道view的實例化肯定是用了異步操作。
即先完成網頁的加載（出現3D地球和2D地圖，同步），再進行視圖的渲染（山體拔高等，異步）。
sometimes，異步操作當然會有一個結果，比如異步在后面花好長時間算出個矩陣，但是同步代碼已經結束了，異步任務丟過去的時候結果還沒出來，怎么獲取它？
我們可以用一個方法去獲取它。這個方法，古時候叫回調函數。
在沒有Promise類的時候，通常用回調函數這種辦法實現（也能用事件、監聽）異步是很正常的一種。
但是當回調函數本身也是個異步操作的時候，就會顯得暈頭轉向。
異步第一層，有結果要用回調函數返回給同步代碼->回調函數是第二層，這個回調函數里頭需要用二級回調函數返回結果給第一層->……
舉個例子：
我是領導，我現在有兩件事：有個事兒要做，和喝茶。
這兩件事不沖突，雖然這個事兒很無聊，耗時大（如文字錄入）。
所以我把這個事兒丟給經理（異步第一層），我繼續喝茶（同步）
異步第一層就是經理要做這個事，但是這個事情絕大部分是無聊的，最后的整理比較簡單。
所以經理就把這個無聊的部分丟給職員（異步第二層），等待職員把這部分做完的同時，也去喝茶（同步）。
於是，職員的結果就是二級回調函數，職員把結果完成后，“回調”給經理。
經理拿着職員的結果整理好，“回調”給領導。（第二層異步完成）
此時領導茶已經喝完了（同步完成），而任務也完成了（第一層異步完成）。
這里如果用老的寫法將會非常的煩，如果用Promise的then寫法就是
領導要做事兒.then(function(){讓經理去做})
.then(function(){讓職工做});
鏈式寫法，簡單，容易看，也容易維護。
then里面的function就是回調函數，告訴異步任務完成后，要怎么處理異步結果的一段代碼。
最后看看then方法的語法：
then(function resolve, function rejected);
我們一般只用前一個參數，即異步成功要怎么處理。而后一個參數是異步任務處理失敗后要做什么。
甚至AJS官方還給出了處理中要做什么的第三個參數...這個就不說那么多了。
——
大概清楚是這么個過程后，我們知道View對象是Promise對象（繼承），而且有異步操作的過程。
所以，mainView.then(function(){...});的意義就是
當3D視圖在服務器端異步操作成功后，使用goTo()縮放到指定的位置。
文末，我還想說說監聽，監聽在AJS 3.x版本里是通過事件完成的，而AJS 4.x全新使用了watch一派寫法。有關這些可以參考AJS 4.2的Guide文檔。
最后的最后，關於異步和回調函數部分我也是學了一天后才給出的模糊定義，希望大家能看懂吧...我也不是很能理解，官方給的多層then()是這樣的：
出處：點我
then里頭當然是方法，無參的。只有子一層的結果完成的時候，父一層的then才能憑借子一層的結果的回調完成異步。
給一些我閱讀中覺得不錯的對異步、回調函數講解的文章：