一、概述

在之前很長的一段時間中，使用ArcGIS JS API(以下簡稱“JS API”)開發WebGIS系統的時候，還是基於傳統的前端框架和各種前端技術來開發，這些框架和技術各位使用過的大概有這些：Dojo、jQuery、Bootstrap、CommonJS等。用這些傳統的技術框架結合JS API去開發的時候，我們引入JS API是在系統的HTML頁面中通過

目前，隨著前端技術的不斷髮展，React和Vue等前端開發技術已經成為了一名前端開發者的標配，作為GISer的我們也毫無例外，在開發許許多多的WebGIS項目系統時，我們都會去選擇目前主流的這些開發技術，其中使用最多的就是React和Vue這兩種。所以本文就主要介紹下我們如何使用Vue結合JS API去開發我們的項目系統。

二、開始前的技術基礎

• 有一定的Vue基礎知識，熟悉ES6(能看懂一個Vue文件中HTML標籤、CSS代碼、JS代碼之前的聯繫就行)
• 計算機安裝了NodeJS,聽說過npm這個東西

三、操作步驟

1、環境準備

在開始今天的介紹之前，我們要準備下開發環境，本文對開發環境有兩個要求：NodeJS環境和Vue環境。如果各位沒有這兩個環境的話，請看下文進行安裝；如果機子上有這兩個環境，請跳過此節，從第二節開始閱讀。

1.1、NodeJS環境安裝

1.1.1、進入到NodeJS官網(https://nodejs.org/en/)下載最新版的NodeJS，此處推薦下載LTS版本，這是穩定的並且官方長期支持更新的一個版本，如圖：

1.1.2、下載完安裝包之後，雙擊安裝包，彈出安裝界面，選擇相應的安裝目錄後，我們一路點擊【Next】按鈕即可，中間過程並沒有特別需要注意的地方。

1.1.3、安裝完成後，我們打開命令行窗口，通過以下命令查看是否安裝成功，如果出現以下版本號信息，則表示NodeJS環境安裝部署成功：

<code>node -v
npm -v/<code>

在這裡可能有人會問NodeJS和npm的關係，其實NodeJS就是javaScripe的一個運行環境，它對谷歌V8引擎做了封裝，是一個服務器端的JS解釋器。npm是NodeJS的一個包管理器。我們在開發時如果要用到什麼插件，需要先搜索、下載、安裝到NodeJS環境中，然後才可以使用這個插件來開發完成某個需求，這個過程是相當繁瑣的。有了npm包管理器，我們只需要在項目根目錄下運行命令行，然後通過npm的安裝命令將需要的插件一鍵安裝到此項目或者NodeJS環境中，這是非常便捷的一件事情，而且很多大神將自己開發好的輪子上傳到了npm網站上面，所以我們需要哪個插件，直接npm安裝即可，不需要再去進行搜索、下載、安裝這麼麻煩的過程。

1.1.4、在此處我們安裝NodeJS環境，說白了也是為了安裝npm這個包管理器才進行的操作。

1.2、Vue環境搭建

Vue環境搭建其實就做兩件事情，安裝Vue和Vue腳手架工具。這兩個安裝都是通過npm來安裝的，詳細過程如下：

1.2.1、打開命令行工具，通過以下兩個命令來分別安裝Vue環境和Vue的腳手架工具，如下：

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

1.2.2、安裝完成後，通過以下命令進行測試，出現版本號信息，則說明安裝成功：

<code> vue --version/<code>

到此處為止，我們的環境準備工作已經完成，接下來我們進入今天的正題，使用Vue結合JS API來開發。

2、初始化項目demo

2.1、在合適的目錄下新建文件夾，然後在此文件夾中打開命令行工具，通過以下命令來創建一個基礎的Vue項目demo，如下：

<code> vue create vuejsapi414demo/<code>

以上命令使用了Vue的腳手架工具來初始化一個項目demo，demo名稱為“vuejsapi414demo”，此名稱可以自己隨意取名。輸入以上命令按回車之後，會出現項目初始化窗口，在此處需要我們選擇項目中使用的插件，此處選擇第一個默認的即可：

選擇之後按回車，會進行插件安裝和項目初始化工作，如下：

2.2、項目初始化結束後，我們使用命令行中提示的命令進入到項目根目錄，然後通過提示命令來啟動項目，並且在瀏覽器中通過地址“localhost:8080”來查看，如下：

<code> cd .\\vuejsapi414demo\\
 npm run serve/<code>

2.3、此時，初始化項目操作已經完成。我們通過vue腳手架來創建了一個基礎的vue項目demo，接下來我們通過這個demo來介紹JS API如何跟Vue結合來開發使用。

3、ArcGIS JS API和Vue結合開發

以上過程已經完成了環境安裝部署和項目初始化工作，接下來就要進行JS API的開發介紹了。

3.1、在Vue項目中使用JS API時已經不像傳統的開發方式那樣在index.html中引入JS和CSS文件來使用JS API，而是通過一個叫“esri-loader”的中間件，將我們的JS API和Vue項目做一個無縫銜接。

3.2、在命令行中通過Ctrl+C來停止項目的運行，然後通過以下命令來安裝esri-loader，如下：

<code> npm install esri-loader --save-dev/<code>

3.3、安裝結束後，通過命令“npm run serve”重新啟動項目，然後用編輯器打開我們初始化的這個項目代碼，此處使用的是VS Code編輯器，各位可以使用Hbuilder、SublimeText3、webStrom等編輯器，不做強制要求，如下：

3.4、然後打開項目根目錄下的package.json文件，在這個文件中我們可以看到剛才安裝的esri-loader插件，此時使用的是V2.13.0版本，如下所示：

3.5、接下來我們就在項目根目錄下的src文件夾中，通過修改App.vue這個文件夾來介紹如何在Vue中使用JS API開發。如下，我們先刪除App.vue這個文件中多餘的HTML標籤和一些JS代碼，最後這個文件代碼如下所示：

3.6、在此處我們就不新建標籤了，直接在id為“app”的這個div中來實例化一個地圖。接下來我們修改下body標籤和id為“app”這個div的標籤樣式。代碼如下：

<code>body { 

    margin: 0;   /**主要是去除谷歌瀏覽器默認的8像素的外邊距 */
}
#app {
    position: absolute;   /**使這個div的大小撐滿整個屏幕 */
    width: 100%;
    height: 100%;
}/<code>

3.7、然後加載引入我們安裝的esri-loader插件，如下：

<code> import {loadModules} from 'esri-loader';/<code>

3.8、引入esri-loader之後，接下來就讓我們的項目系統和JS API做一個銜接。在這裡大家一定要理解一個概念：我們在Vue中使用JS API時，調的接口這些還是我們傳統開發調的那些接口API，esri-loader在這裡僅僅是充當一個橋樑的作用，所以大家不要誤認為esri-loader也是一個開發包哈。也就是說，你最終使用的JS API開發包還是我們本地部署或者JS API官網的開發包，並不是esri-loader裡面的開發包。

做銜接之前，我們先創建一個mounted生命週期函數，然後在這個函數里調用創建地圖的函數，代碼如下：

<code>import {loadModules} from 'esri-loader';

export default {
  name: 'app',
  methods: {

      //創建地圖
      _createMapView: function() {
            const _self = this;   //定義一個_self防止後續操作中this丟失 

            const option = {      //定義一個包含有JS API中js開發包和css樣式文件的對象
                url: 'http://localhost/4.14/init.js',
                css: 'http://localhost/4.14/esri/themes/light/main.css',
            };

            //通過loadModules來做銜接
            loadModules([], option)
                .then(([]) => {
                    
                    //業務代碼在此處編寫
                    
                }).catch((err) => {
                    _self.$message('地圖創建失敗，' + err);
                });
      },
  },
  mounted: function() {
      this._createMapView();
  }
}/<code>

通過以上的代碼，就將我們的項目系統代碼和JS API做了一個銜接，其實就是在我們Vue項目中引入了JS API。接下來進行JS API的開發。

3.9、本文主要是通過實例化一張地圖來介紹如何使用JS API開發。接下來的操作跟我們傳統的開發方式就變得類似了，先是加載相應的JS API模塊，然後在實例化各個模塊，如下所示：

<code>\t\t\t//通過loadModules來做銜接
            loadModules(['esri/Map',
            'esri/views/MapView'], option)
                .then(([Map, MapView]) => {
                    
                    //業務代碼在此處編寫
                    const map = new Map({    //實例化地圖 

                        basemap: "streets"
                    });

                    const view = new MapView({   //實例化地圖視圖
                        container: "app",
                        map: map,
                        zoom: 11, 
                        center: [104.072044,30.663776] 
                    });

                    view.ui.components = [];   //清除掉地圖左上角默認的縮放圖標
                }).catch((err) => {
                    _self.$message('地圖創建失敗，' + err);
                });/<code>

3.10、通過以上步驟，就實例化了一張二維地圖，最終的效果如下所示：

四、總結

本文沿著Vue基礎項目demo搭建到JS API的引入，並最終生成一張二維地圖的過程進行了詳細的介紹。本篇文章適合有一定Vue基礎和JS API開發基礎的人員查看學習，在本文中我們使用的JS API是本地部署的JS API，大家也可以將API地址換成官網的，只需要修改option這個對象的屬性值即可，類似於下面：

<code>const option = {      //定義一個包含有JS API中js開發包和css樣式文件的對象
\turl: 'https://js.arcgis.com/4.14/init.js',
\tcss: 'https://js.arcgis.com/4.14/esri/themes/light/main.css',
};/<code>

通過修改如上的代碼，就將JS API的引用地址換成了官網地址，只不過在此處運行的時候需要注意下跨域的問題。如果遇到跨域問題，可以通過配置Vue的配置文件來解決，具體操作不在本文範圍內，可自行百度解決。大家在Vue和JS API結合開發時如果遇到什麼問題，請聯繫博主解答。

附：

項目demo全部代碼：

https://gitee.com/XuQianWen/use_of_arcgis_js_api_in_vue

App.vue全部代碼：

<code><template>
  

    
  

/<template>




/<code>

閱讀更多 X北辰北 的文章

關鍵字: Node.js jQuery 電腦