概述

今天興趣使然，在翻閱ArcGIS API for JavaScript官網的時候，發現了跟esri-loader方法不同的另外一種可以在Vue、React和Angular這種主流框架中使用JS API的開發方式，並將其操作過程記錄下來，供有需要的夥伴參考。如果想了解如何通過esri-loader來在Vue、React和Angular這種主流框架中使用JS API的開發，請移步至另外兩篇文章：

• 《React中使用ArcGIS JS API 4.14開發》
• 《 Vue中使用ArcGIS JS API 4.14開發》

操作步驟

1、安裝@arcgis/cli腳手架

打開命令行工具，通過以下命令進行@arcgis/cli腳手架的全局安裝：

<code> npm install -g @arcgis/cli/<code>

通過以上命令可以看到，我們的腳手架工具安裝成功，接下來我們通過相關命令創建基於不同框架的ArcGIS JS API應用模板。

2、通過@arcgis/cli腳手架工具創建基於Vue框架的應用模板

2.1、在合適的目錄位置通過以下命令創建基於Vue框架的JS API應用模板：

<code> arcgis create arcgis-vue-app -t vue/<code>

輸入以上命令創建應用模板時發現，當進度走到如上位置時異常緩慢，通過科學上網方法也不頂用，然後將npm源切換到淘寶源也不行，所以我們只能用以下方法來解決了，打一把王者吧，嘻嘻：

打了一把40多分鐘的王者之後，發現進度條快結束了，所以我們等待項目創建成功，如下：

2.2、項目創建成功後，我們進入到項目根目錄，然後通過如下命令來啟動：

<code> npm run serve/<code>

2.3、項目啟動後會自動打開瀏覽器，默認端口是8080，然後會出現證書信任問題，我們只需要點擊信任，然後繼續執行即可，如下所示：

上圖中可看到，項目是成功啟動了，但是地圖並沒有實例化出來，打開控制檯一看，有7條報錯：

這時候我們再返回到創建的項目根目錄，閱讀README文檔：

由文檔可看到，我們的“npm run serve”命令是在本地運行程序，並且所需要的資源本地提供的情況下才通過這條命令來啟動的，那麼剛才報錯很有可能是加載的資源本地並沒有找到所以才報錯，所以我們用正確的啟動命令來啟動。

2.4、在項目根目錄，通過如下命令正確運行項目：

<code> npm start/<code>

此時可以看到，我們的項目正確運行，並實例化了一張地圖，並且添加了圖例組件和一張業務圖層，並且該圖層開啟了Identify鼠標點選查詢功能。

項目成功運行後，我們來看下代碼結構。

2.5、用編輯器打開項目代碼，此處用VS Code打開，然後可以看到如下的代碼結構：

從以上代碼組織結構可以看到，我們創建的項目是基於Vue框架的，更加準確點說是底層基於webpack來搭建的工程項目。其中｛node_modules｝文件目錄下存放的是項目中所安裝的各類插件包；｛public｝文件目錄下存放的是我們主頁面初始化的一些模板文件；｛src｝目錄跟我們通常的vue項目工程中一樣，是我們系統中的各類組件代碼，在此處默認創建了<header>和<webmap>兩個組件，分別是項目頁面中的頭部組件和實例化的地圖組件；｛tests｝目錄下存放的是一個用來測試的<header>組件，此處用處不大；除了上述幾個目錄文件夾之外，項目根目錄下還有Eslint配置文件、babel配置文件、webpack配置文件等，所以此項目是一個配備了Eslint、babel這些主流插件工具的WebGIS主流項目框架，框架所有代碼用目前主流的TypeScript來編寫完成的。/<header>/<webmap>/<header>

2.6、此項目中所用的ArcGIS JS API是最新的4.14版本，地址引用的是官網地址。如果我們用離線版本的API，我們可以通過修改如下文件進行配置：

<code> src/worker-config.ts/<code>

以上就是我們通過腳手架搭建的基於Vue框架的應用模板，我們如果進行開發的話，可以在此項目代碼上進行修改定製、開發。接下來我們看看如何用腳手架搭建基於React框架的應用模板。

3、通過@arcgis/cli腳手架工具創建基於React框架的應用模板

3.1、上文中我們已經安裝了@arcgis/cli腳手架工具，所以接下來我們只需要在合適的路徑下通過以下命令創建基於React框架的應用模板即可：

<code> arcgis create reactjsapi -t react/<code>

在此處創建項目時，進度是很快的，不像我們第一次創建基於Vue的模板應用那樣再打一把王者了，這是因為我們第一次創建後在本機已經有緩存了，所以後續創建將會比較快。

3.2、進入到創建好的項目根目錄，然後通過如下命令啟動項目，在此處我們啟動項目之前是先閱讀了一下README文檔的，避免再次用錯啟動命令：

<code> npm start/<code>

由以上結果可看到，它同樣創建了一個基於React框架的應用模板，同樣實例化了一張底圖和一個業務圖層，並且添加了圖例組件和開啟了鼠標點選查詢功能。

3.3、用編輯器打開項目代碼可看到，它的代碼組織結構跟基於Vue框架創建的應用模板的代碼結構類似，是基於React框架構建的一個應用模板，可通過src目錄下的index.tsx文件判斷，使用了JSX語法的變體TSX來編寫的，如下：

3.4、同樣的，如果我們想更改JS API的引用地址，可通過以下目錄去更改：

<code> src/worker-config.ts/<code>

以上就是我們通過腳手架創建基於React框架的應用模板過程。後續如果有需求，可直接在此模板代碼基礎之上進行修改定製。

總結

本篇文章通過介紹如何安裝@arcgis/cli腳手架、如何通過腳手架來創建基於Vue和React框架的應用模板來介紹了另外一種在主流框架中應用ArcGIS API for JavaScript的開發方式。此開發方式跟之前的esri-loader方法相比，有自身的優勢也有不足之處，詳情請看另一篇文章——《使用@arcgis/cli腳手架和esri-loader方式進行ArcGIS JS API開發的測評》。

閱讀更多 X北辰北 的文章

關鍵字: 腳手架 瀏覽器 JavaScript