ArcGIS API for JavaScript 入門教程[3] 你看獲得：數據與視圖分離

時間 2019-11-07

標籤 arcgis api javascript 入門教程獲得數據視圖分離欄目 JavaScript 简体版

原文原文鏈接

這篇開始正式講API。css

數據和視圖分離不是什麼奇怪的事情了，這是一個著名的設計——數據與視圖分開。html

轉載註明出處，博客園/CSDN/B站：秋意正寒。前端

目錄：http://www.javashuo.com/article/p-tloynsnb-ks.htmlgit

請跟我作，把如下摺疊的代碼複製到新建的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>

複製它！

大概是這樣：dom

打開後是這樣的：ide

（環境說明：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屬性表示地圖高程，能夠用預置的世界高程數據，也能夠自定義高程圖層，後期會講。

哦對了，對數據的在線簡單編輯、繪製，也是由數據部分組織的，後面展開。