這篇開始正式講API。
數據和視圖分離不是什么奇怪的事情了，這是一個著名的設計——數據與視圖分開。
轉載注明出處，博客園/CSDN/B站：秋意正寒。
請跟我做，把以下折疊的代碼復制到新建的html文件中，並雙擊打開。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Intro to MapView - Create a 2D map - 4.7</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7/"></script> <script> require([ "esri/Map","esri/views/MapView","dojo/domReady!" ], function(Map, MapView) { var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", map: map, zoom: 4, center: [15, 65] // longitude, latitude }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
大概是這樣：
打開后是這樣的：
（環境說明：Chrome 65瀏覽器）
那我們再復制另一個代碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Intro to SceneView - Create a 3D map - 4.7</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css"> <script src="https://js.arcgis.com/4.7/"></script> <script> require([ "esri/Map", "esri/views/SceneView", "dojo/domReady!" ], function(Map, SceneView) { var map = new Map({ basemap: "streets", ground: "world-elevation" }); var view = new SceneView({ container: "viewDiv", map: map, scale: 50000000, center: [-101.17, 21.78] }); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
得到的結果是：
1. 解釋
本着能不解釋代碼就不解釋代碼的精神，我先給大家講一下我講這個JsAPI的思路。
它分五個主要學習的部分：
- 數據
- 視圖
- 空間分析
- 符號渲染
- 小部件
其他不說不代表不會用到，但是相對於入門而言，這五個部分足夠了。其重點講解前三部分。
如果看文字不舒服，那么上個結構圖：
而上面兩個案例，拿同一份數據結合二三維視圖作了展示。
拋開代碼細節（如入口、引用、頁面組織、樣式等）不談，我首先把代碼中用於表示“數據”和“視圖”的Js代碼抽取出來：
左邊是二維的，右邊是三維的。
分別用兩個對象來描述“數據”和“視圖”，
用Map類實例出來的【map對象】以描述數據；用MapView類、SceneView類實例出來的【view對象】以描述視圖。
那么你可能會問了，倘若已經在代碼里做出來了數據與視圖，有什么橋梁可以連接它們呢？我們把view的代碼展開。
我們知道，在Js中通過new關鍵字實例化一個類，SceneView類的構造函數指定了一個Js中的Object對象作為參數，這個Object對象是這樣的：
{ container: "viewDiv", map: map, scale: 50000000, center: [-101.17, 21.78] }
其中，就有一個Map類型的屬性叫map，將上面實例化的map對象賦予給它就實現了視圖（SceneView、MapView）與數據（Map）的連接。
其他的屬性我們暫且不管，至少，在Js代碼中，我們知道了哪些代碼用於構造地理數據——用Map類、我們知道了哪些代碼用於構造視圖——View類。
哦對了，SceneView和MapView都繼承自View類。雖然我們知道Js是弱類型的語言，但是Dojo幫我們做了一些面向對象的工作。
在這里，我沿用更廣泛的說法，那就是用“類”這個稱呼去替代官方的“模塊”這個稱呼，其實MapView、Map、SceneView都是模塊，它們存在於js包里面。
2. 補充
如果上面看得懂，這里可以作為補充材料來閱讀。
2.1 數據如何組織
相信肯定有筒子開始疑問Map對象的構造參數中應該如何組織屬性了吧，這個時候就需要去查示例代碼和官方API參考了。
我可以簡單說一說。先看一下這個類的繼承關系圖：
清晰看到Map類的位置。
有趣的是，Map有WebMap和WebScene兩個子類，由於繼承和多態的特征，說明視圖中map屬性也可以設為WebMap和WebScene。
這有什么區別呢？暫且不說后期展開。
再展開Map類的屬性：
常用的有三個屬性，底圖、可操作圖層集合、地形圖層。
- basemap屬性可使用預置的底圖，也可以使用自定義的Basemap對象；
- [★]layers屬性是可操作的Layer對象的集合，Layer類有很多子類，如幾何圖層、地圖圖層、要素圖層等，這些到以后會講，這些都是赤果果的數據組成啊！
- ground屬性表示地圖高程，可以用預置的世界高程數據，也可以自定義高程圖層，后期會講。
哦對了，對數據的在線簡單編輯、繪制，也是由數據部分組織的，后面展開。
2.2 視圖有什么用
視圖是管理“看得到”的東西的。
其一，我們看得到的二三維地圖、場景都是由它渲染的；
其二，我們需要對數據進行展示時，是由它進行彈窗（Popup）展示的；
這些業務和數據無關，任何一份數據都可以由視圖進行前端渲染、數據展示，所以被抽取出來了，做到了高內聚低耦合、數據視圖分離。
好啦，到這里，“數據”與“視圖”已經有了個大概的了解了，下一篇將開始講解如何代碼入門，可以學一下Dojo用於預習，尤其是Dojo的模塊化。