前端入門ArcGIS教程（一）

一、前言
本文基于ArcGIS官方文檔：

https://developers.arcgis.com/javascript/latest/api-reference/

    在開(kāi)始講解ArcGIS內(nèi)容前，廣東靚仔從官網(wǎng)找來(lái)了幾張Demo效果圖，給小伙伴們一個(gè)直觀的了解。
3D效果圖:


2D效果圖：



建筑效果圖：



關(guān)于ArcGIS的內(nèi)容，廣東靚仔后續(xù)會(huì)持續(xù)分享這個(gè)主題的內(nèi)容。
這篇文章先給大家來(lái)個(gè)初步認(rèn)識(shí)
二、使用場(chǎng)景
   ArcGIS 包括地圖、場(chǎng)景和應(yīng)用程序，允許整個(gè)組織探究、了解和測(cè)量地理數(shù)據(jù)。
1、在地圖中查看數(shù)據(jù)
ArcGIS 中查找到的交互式地圖可用于探究、可視化和了解 2D 中組織的數(shù)據(jù)。彈出窗口、圖例、過(guò)濾器和透明度等數(shù)據(jù)查看工具可用于重點(diǎn)查看對(duì)您重要的數(shù)據(jù)。
2、在場(chǎng)景中查看數(shù)據(jù)
將內(nèi)置場(chǎng)景查看器與桌面 Web 瀏覽器一同使用，以瀏覽符號(hào)化的地理空間內(nèi)容。場(chǎng)景可包括允許在直觀的交互式 3D 環(huán)境中顯示和分析地理信息的 2D 和 3D 圖層、樣式和配置的集合。
3、執(zhí)行分析
地圖可用于查找模式、評(píng)估趨勢(shì)和制定決策。但是僅通過(guò)查看地圖，許多模式和關(guān)系往往并不清晰。分析工具可用于量化數(shù)據(jù)模式和關(guān)系并將結(jié)果以地圖、表格和圖表的形式顯示出來(lái)。通過(guò)地圖查看器中提供的分析工具，您可以使用包括可視分析在內(nèi)的多種途徑來(lái)解決問(wèn)題并制定重要決策。
4、編輯地圖中的要素
采集數(shù)據(jù)、可視化時(shí)間、測(cè)量和查看坐標(biāo)、獲取方向
三、ArcGIS安裝
    一、安裝ArcGIS License Manager
溫馨提示

ArcGIS 10.X系列軟件的安裝過(guò)程大同小異，大致的安裝步驟均為

安裝License加補(bǔ)丁

安裝Desktop然后加補(bǔ)丁

安裝中文語(yǔ)言

大家可以按照這個(gè)思路去安裝，如果安裝失敗：關(guān)閉防火墻、徹底關(guān)閉Windows Defender，重啟。

另外，軟件正常安裝成功之后，運(yùn)行的時(shí)候可能會(huì)遇到殺毒軟件提示刪除補(bǔ)丁文件的情況，此時(shí)一定要添加信任，將補(bǔ)丁文件列入殺毒軟件信任列表，否則可能會(huì)遇到打不開(kāi)的情況。

1、解壓安裝包ArcGIS_Desktop_102_134924.iso
2、打開(kāi)ESRI.exe，點(diǎn)擊ArcGIS License Manager中的Setup，如下圖所示：



3、點(diǎn)擊NEXT、NEXT、AGREE
4、選擇安裝路徑，這里默認(rèn)即可（當(dāng)然也可以自己定義安裝路徑，不要出現(xiàn)中文路徑，否則會(huì)出現(xiàn)wanming），點(diǎn)擊Next。



5、點(diǎn)擊Install、點(diǎn)擊Finish
6、點(diǎn)擊Stop，再點(diǎn)擊OK。
Tips: 如果不點(diǎn)擊Stop，那么服務(wù)會(huì)一直運(yùn)行，這樣會(huì)導(dǎo)致后面拷貝補(bǔ)丁文件的時(shí)候，無(wú)法正常拷貝。


7、在軟件安裝包下找到Crack文件夾，將里的兩個(gè)文件（ARGIS.exe和service.txt）拷貝到ArcGIS License Manager的安裝目錄的C:\Program Files (x86)\ArcGIS\License10.2\bin下（也可以將整個(gè)bin文件夾拷貝過(guò)去，跟安裝路徑下已有的bin文件夾合并），注意如果前面改了安裝路徑，要對(duì)應(yīng)自己的路徑，提示已經(jīng)存在，選擇復(fù)制和替換。


8、開(kāi)始→所有程序→ArcGIS→License Manager→License Server Administrator。
9、依次點(diǎn)擊：?jiǎn)?dòng)→重新讀取→確定。



二、安裝ArcGIS for Desktop
1、點(diǎn)擊ESRI.exe中ArcGIS for Desktop中的Setup。


2、點(diǎn)擊NEXT、AGREE
3、選擇完整安裝Complete


4、這里可以選擇默認(rèn)安裝路徑，點(diǎn)擊Next
5、python安裝路徑，默認(rèn)，Next
6、點(diǎn)擊Finish
7、在產(chǎn)品中選擇Advanced（ArcInfo）Concurrent Use，將License Manager改為localhost，點(diǎn)擊OK。


8、點(diǎn)擊OK，完成安裝。
9、如果有需要可以自行安裝中文包
操作：開(kāi)始菜單→所有程序→ArcGIS→ArcGIS Administrator，如下所示，點(diǎn)擊“高級(jí)”。
四、2D demo分享
1.參考 ArcGIS API for JavaScript

1、設(shè)置一個(gè)類似于以下示例的基本 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</title>
  </head>
</html>
在<head>標(biāo)簽內(nèi)，使用<script>和<link>標(biāo)簽引用 ArcGIS API for JavaScript ：

<link rel="stylesheet" />
<script src="https://js.arcgis.com/4.21/"></script>
該<script>標(biāo)簽從 CDN 加載 ArcGIS API for JavaScript。當(dāng) API 新版本發(fā)布時(shí)，更新版本號(hào)以匹配新發(fā)布的版本。

該<link>標(biāo)簽引用main.css包含特定于 Esri 小部件和組件的樣式的樣式表。

2. 加載模塊
使用第二個(gè)<script>標(biāo)簽從 API 加載特定模塊。使用以下代碼段中的語(yǔ)法加載以下模塊：

esri/Map - 加載特定于創(chuàng)建地圖的代碼

esri/views/MapView - 加載允許以 2D 方式查看地圖的代碼

<script>
  require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => {
    // Code to create the map and view will go here
  });
</script>
在構(gòu)建簡(jiǎn)單頁(yè)面或進(jìn)行試驗(yàn)時(shí)，將 JavaScript 放入腳本標(biāo)記中很有用，但不適用于較大的應(yīng)用程序。在構(gòu)建更大的應(yīng)用程序時(shí)，所有 JavaScript 都應(yīng)該在單獨(dú)的.js文件中。

全局require()函數(shù)用于加載 API 的AMD模塊。要了解有關(guān) API 不同模塊的更多信息，請(qǐng)?jiān)L問(wèn)工具指南簡(jiǎn)介頁(yè)面。

3. 創(chuàng)建地圖
使用 來(lái)創(chuàng)建新地圖Map，它是對(duì)從esri/Map模塊加載的 Map 類的引用。我們可以basemap通過(guò)將對(duì)象傳遞給 Map 構(gòu)造函數(shù)來(lái)指定地圖屬性，例如。

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  const map = new Map({
    basemap: "topo-vector"
  });
});
其他底圖選項(xiàng)包括：satellite、hybrid、

gray-vector、dark-gray-vector、

oceans、streets-vector、osm、

national-geographic、

streets-night-vector。

通過(guò)修改沙箱中的basemap選項(xiàng)來(lái)使用備用底圖。查看Map 類以獲取有關(guān)其他地圖選項(xiàng)的更多詳細(xì)信息。

4. 創(chuàng)建二維視圖
查看在 HTML 文件中充當(dāng)容器的參考節(jié)點(diǎn)，允許用戶查看 HTML 頁(yè)面內(nèi)的地圖。MapView通過(guò)將對(duì)象傳遞給其構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)新對(duì)象并設(shè)置其屬性：

require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    container: "viewDiv", // Reference to the DOM node that will contain the view
    map: map // References the map object created in step 3
  });
});
在這個(gè)片段中，我們將container屬性設(shè)置為將保存地圖的 DOM 節(jié)點(diǎn)的名稱，在這種情況下，我們使用元素的id屬性<div>。該map屬性引用了我們?cè)谏弦徊街袆?chuàng)建的地圖對(duì)象。請(qǐng)參閱MapView 文檔，可以在視圖上設(shè)置的其他屬性，包括center和zoom，可用于定義視圖的初始范圍。

5.定義頁(yè)面內(nèi)容
現(xiàn)在創(chuàng)建地圖和視圖所需的 JavaScript 已完成！下一步是添加相關(guān)的 HTML 以查看地圖。對(duì)于這個(gè)例子，HTML 非常簡(jiǎn)單：添加一個(gè)<body>標(biāo)簽，它定義了在瀏覽器中可見(jiàn)的內(nèi)容，以及<div>將在其中創(chuàng)建視圖的主體內(nèi)的單個(gè)元素。

<body>
  <div id="viewDiv"></div>
</body>
該<div>有一個(gè)id“viewDiv”的匹配id傳遞到MapView類的container構(gòu)造函數(shù)屬性。

6. 設(shè)計(jì)頁(yè)面
使用<style>.css 文件中的標(biāo)簽設(shè)置頁(yè)面內(nèi)容的樣式<head>。要使地圖填滿瀏覽器窗口，請(qǐng)?jiān)陧?yè)面的 中添加以下 CSS <style>：

<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
如果現(xiàn)在已經(jīng)使用 ArcGIS API for JavaScript 4.0 在 2D 中構(gòu)建了我們的第一個(gè) Web 應(yīng)用程序！最終 HTML 代碼應(yīng)如下所示：

<!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</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" />
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
      require(["esri/Map", "esri/views/MapView"], (Map, MapView) => {
        const map = new Map({
          basemap: "topo-vector"
        });
        const view = new MapView({
          container: "viewDiv", // Reference to the view div created in step 5
          map: map, // Reference to the map object created before the view
          zoom: 4, // Sets zoom level based on level of detail (LOD)
          center: [15, 65] // Sets center point of view using longitude,latitude
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
五、3D demo分享
1.參考 ArcGIS API for JavaScript

1.1、首先，設(shè)置一個(gè)類似于以下示例的基本 HTML 文檔

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>廣東靚仔實(shí)現(xiàn)2D demo</title>
  </head>
</html>
1.2、在<head>標(biāo)簽內(nèi)，使用<script>和<link>標(biāo)簽引用 ArcGIS API for JavaScript ：

<link rel="stylesheet" />
<script src="https://js.arcgis.com/4.21/"></script>
該<script>標(biāo)簽從 CDN 加載 ArcGIS API for JavaScript。當(dāng) API 新版本發(fā)布時(shí)，更新版本號(hào)以匹配新發(fā)布的版本。


該<link>標(biāo)簽引用main.css包含特定于 Esri 小部件和組件的樣式的樣式表。

2. 加載模塊

使用第二個(gè)<script>標(biāo)簽從 API 加載特定模塊。使用以下代碼段中的語(yǔ)法加載以下模塊：


esri/Map - 加載特定于創(chuàng)建地圖的代碼

esri/views/SceneView - 加載允許以 3D 方式查看地圖的代碼

<script>
  require([ "esri/Map", "esri/views/SceneView" ], (Map, SceneView) => {
    // Code to create the map and view will go here
  });
</script>
在構(gòu)建簡(jiǎn)單頁(yè)面或進(jìn)行試驗(yàn)時(shí)，將 JavaScript 放入腳本標(biāo)記中很有用，但不適用于較大的應(yīng)用程序。在構(gòu)建更大的應(yīng)用程序時(shí)，所有 JavaScript 都應(yīng)該在單獨(dú)的.js文件中。

全局require()函數(shù)用于加載 API 的AMD模塊。要了解有關(guān) API 不同模塊的更多信息，請(qǐng)?jiān)L問(wèn)工具指南簡(jiǎn)介頁(yè)面。

3. 創(chuàng)建地圖
使用 來(lái)創(chuàng)建新地圖Map，它是對(duì)從esri/Map模塊加載的 Map 類的引用。我們可以basemap通過(guò)將對(duì)象傳遞給 Map 構(gòu)造函數(shù)來(lái)指定地圖屬性，例如和 'ground。

require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
  const map = new Map({
    basemap: "topo-vector",
    ground: "world-elevation"
  });
});
其他底圖選項(xiàng)包括：satellite、hybrid、

gray-vector、dark-gray-vector、

oceans、streets-vector、osm、

national-geographic、

streets-night-vector。

通過(guò)修改沙箱中的basemap選項(xiàng)來(lái)使用備用底圖。查看Map 類以獲取有關(guān)其他地圖選項(xiàng)的更多詳細(xì)信息。

'Map' 的 'ground' 屬性指定地圖的表面屬性。僅在將地圖添加到 3D SceneView 時(shí)才相關(guān)。字符串“world-elevation”指定使用 World Elevation Service 的地面實(shí)例。

4. 創(chuàng)建 3D 視圖
查看在 HTML 文件中充當(dāng)容器的參考節(jié)點(diǎn)，允許用戶查看 HTML 頁(yè)面內(nèi)的地圖。SceneView通過(guò)將對(duì)象傳遞給其構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)新對(duì)象并設(shè)置其屬性：

require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
  const map = new Map({
    basemap: "topo-vector",
    ground: "world-elevation"
  });
  const view = new SceneView({
    container: "viewDiv", // Reference to the DOM node that will contain the view
    map: map // References the map object created in step 3
  });
});
在這個(gè)片段中，我們將container屬性設(shè)置為將保存地圖的 DOM 節(jié)點(diǎn)的名稱，在這種情況下，我們使用元素的id屬性<div>。該map屬性引用了我們?cè)谏弦徊街袆?chuàng)建的地圖對(duì)象。請(qǐng)參閱SceneView 文檔可以在視圖上設(shè)置的其他屬性，包括center和scale，可用于定義視圖的初始范圍。

5.定義頁(yè)面內(nèi)容
現(xiàn)在創(chuàng)建地圖和視圖所需的 JavaScript 已完成！下一步是添加相關(guān)的 HTML 以查看地圖。對(duì)于這個(gè)例子，HTML 非常簡(jiǎn)單：添加一個(gè)<body>標(biāo)簽，它定義了在瀏覽器中可見(jiàn)的內(nèi)容，以及<div>將在其中創(chuàng)建視圖的主體內(nèi)的單個(gè)元素。

<body>
  <div id="viewDiv"></div>
</body>
該<div>有一個(gè)id“viewDiv”的匹配id傳遞給SceneView的container在constructor屬性。

6. 設(shè)計(jì)頁(yè)面
使用<style>.css 文件中的標(biāo)簽設(shè)置頁(yè)面內(nèi)容的樣式<head>。要使地圖填滿瀏覽器窗口，請(qǐng)?jiān)陧?yè)面的 中添加以下 CSS <style>：

<style>
  html,
  body,
  #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
我們現(xiàn)在已經(jīng)使用 ArcGIS API for JavaScript 構(gòu)建了我們的第一個(gè) 3D 網(wǎng)絡(luò)應(yīng)用程序。最終 HTML 代碼應(yīng)如下所示：

<!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</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" />
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
      require(["esri/Map", "esri/views/SceneView"], (Map, SceneView) => {
        const map = new Map({
          basemap: "topo-vector",
          ground: "world-elevation"
        });
        const view = new SceneView({
          container: "viewDiv", // Reference to the scene div created in step 5
          map: map, // Reference to the map object created before the scene
          scale: 50000000, // Sets the initial scale to 1:50,000,000
          center: [-101.17, 21.78] // Sets the center point of view with lon/lat
        });
      });
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
六、總結(jié)
在我們閱讀完官方文檔后，我們一定會(huì)進(jìn)行更深層次的學(xué)習(xí)，比如看下框架底層是如何運(yùn)行的，以及源碼的閱讀。
    這里廣東靚仔給下一些小建議：
在看源碼前，我們先去官方文檔復(fù)習(xí)下框架設(shè)計(jì)理念、源碼分層設(shè)計(jì)
閱讀下框架官方開(kāi)發(fā)人員寫的相關(guān)文章
借助框架的調(diào)用棧來(lái)進(jìn)行源碼的閱讀，通過(guò)這個(gè)執(zhí)行流程，我們就完整的對(duì)源碼進(jìn)行了一個(gè)初步的了解
接下來(lái)再對(duì)源碼執(zhí)行過(guò)程中涉及的所有函數(shù)邏輯梳理一遍

作者：廣東靚仔


歡迎關(guān)注：前端早茶