“資料”與“視圖”分離，真是個經典的設計啊。
這篇開始正式講API。
資料和視圖分離不是什麼奇怪的事情了，這是一個著名的設計——資料與視圖分開。
轉載注明出處，部落格園/CSDN/B站：秋意正寒。
目錄：https://www.cnblogs.com/onsummer/p/9080204.html
請跟我做，把以下折疊的代碼複制到建立的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的子產品化。