這篇開始正式講API。
數(shù)據(jù)和視圖分離不是什么奇怪的事情了，這是一個著名的設(shè)計——數(shù)據(jù)與視圖分開。
轉(zhuǎn)載注明出處，博客園/CSDN/B站：秋意正寒。
請跟我做，把以下折疊的代碼復(fù)制到新建的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>
大概是這樣：
打開后是這樣的：
（環(huán)境說明：Chrome 65瀏覽器）
那我們再復(fù)制另一個代碼：
<!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>
得到的結(jié)果是：
本著能不解釋代碼就不解釋代碼的精神，我先給大家講一下我講這個JsAPI的思路。
它分五個主要學(xué)習(xí)的部分：
其他不說不代表不會用到，但是相對于入門而言，這五個部分足夠了。其重點講解前三部分。
如果看文字不舒服，那么上個結(jié)構(gòu)圖：
而上面兩個案例，拿同一份數(shù)據(jù)結(jié)合二三維視圖作了展示。
拋開代碼細節(jié)（如入口、引用、頁面組織、樣式等）不談，我首先把代碼中用于表示“數(shù)據(jù)”和“視圖”的Js代碼抽取出來：
左邊是二維的，右邊是三維的。
分別用兩個對象來描述“數(shù)據(jù)”和“視圖”，
用Map類實例出來的【map對象】以描述數(shù)據(jù)；用MapView類、SceneView類實例出來的【view對象】以描述視圖。
那么你可能會問了，倘若已經(jīng)在代碼里做出來了數(shù)據(jù)與視圖，有什么橋梁可以連接它們呢？我們把view的代碼展開。
我們知道，在Js中通過new關(guān)鍵字實例化一個類，SceneView類的構(gòu)造函數(shù)指定了一個Js中的Object對象作為參數(shù)，這個Object對象是這樣的：
{ container: "viewDiv", map: map, scale: 50000000, center: [-101.17, 21.78]}
其中，就有一個Map類型的屬性叫map，將上面實例化的map對象賦予給它就實現(xiàn)了視圖（SceneView、MapView）與數(shù)據(jù)（Map）的連接。
其他的屬性我們暫且不管，至少，在Js代碼中，我們知道了哪些代碼用于構(gòu)造地理數(shù)據(jù)——用Map類、我們知道了哪些代碼用于構(gòu)造視圖——View類。
哦對了，SceneView和MapView都繼承自View類。雖然我們知道Js是弱類型的語言，但是Dojo幫我們做了一些面向?qū)ο蟮墓ぷ鳌?/span>
在這里，我沿用更廣泛的說法，那就是用“類”這個稱呼去替代官方的“模塊”這個稱呼，其實MapView、Map、SceneView都是模塊，它們存在于js包里面。
如果上面看得懂，這里可以作為補充材料來閱讀。
相信肯定有筒子開始疑問Map對象的構(gòu)造參數(shù)中應(yīng)該如何組織屬性了吧，這個時候就需要去查示例代碼和官方API參考了。
我可以簡單說一說。先看一下這個類的繼承關(guān)系圖：
清晰看到Map類的位置。
有趣的是，Map有WebMap和WebScene兩個子類，由于繼承和多態(tài)的特征，說明視圖中map屬性也可以設(shè)為WebMap和WebScene。
這有什么區(qū)別呢？暫且不說后期展開。
再展開Map類的屬性：
常用的有三個屬性，底圖、可操作圖層集合、地形圖層。
哦對了，對數(shù)據(jù)的在線簡單編輯、繪制，也是由數(shù)據(jù)部分組織的，后面展開。
視圖是管理“看得到”的東西的。
其一，我們看得到的二三維地圖、場景都是由它渲染的；
其二，我們需要對數(shù)據(jù)進行展示時，是由它進行彈窗（Popup）展示的；
這些業(yè)務(wù)和數(shù)據(jù)無關(guān)，任何一份數(shù)據(jù)都可以由視圖進行前端渲染、數(shù)據(jù)展示，所以被抽取出來了，做到了高內(nèi)聚低耦合、數(shù)據(jù)視圖分離。
好啦，到這里，“數(shù)據(jù)”與“視圖”已經(jīng)有了個大概的了解了，下一篇將開始講解如何代碼入門，可以學(xué)一下Dojo用于預(yù)習(xí)，尤其是Dojo的模塊化。
