Vue中使用ArcGIS JS API 4.14開發

本文主要介紹如何在Vue項目中使用ArcGIS JS API進行開發，文中使用的JS API是目前最新版本的ArcGIS JS API 4.14，主要是在Vue項目demo中用JS API實例化了一張二維地圖。

概述

在以前很長的一段時間中，使用ArcGIS JS API(如下簡稱「JS API」)開發WebGIS系統的時候，仍是基於傳統的前端框架和各類前端技術來開發，這些框架和技術各位使用過的大概有這些：Dojo、jQuery、Bootstrap、CommonJS等。用這些傳統的技術框架結合JS API去開發的時候，咱們引入JS API是在系統是在主頁(index.html)中引入，代碼以下所示：
<link rel="stylesheet" href="http://localhost/4.14/esri/themes/light/main.css" />
<script src="http://localhost/4.14/init.js"></script>

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

開始前的技術基礎

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

環境準備

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

NodeJS環境安裝

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

1.1.二、下載完安裝包以後，雙擊安裝包，彈出安裝界面，選擇相應的安裝目錄後，咱們一路點擊【Next】按鈕便可，中間過程並無特別須要注意的地方。
1.1.三、安裝完成後，咱們打開命令行窗口，經過如下命令查看是否安裝成功，若是出現如下版本號信息，則表示NodeJS環境安裝部署成功：

node -v
npm -v

在這裏可能有人會問NodeJS和npm的關係，其實NodeJS就是javaScripe的一個運行環境，它對谷歌V8引擎作了封裝，是一個服務器端的JS解釋器。npm是NodeJS的一個包管理器。咱們在開發時若是要用到什麼插件，須要先搜索、下載、安裝到NodeJS環境中，而後纔可使用這個插件來開發完成某個需求，這個過程是至關繁瑣的。有了npm包管理器，咱們只須要在項目根目錄下運行命令行，而後經過npm的安裝命令將須要的插件一鍵安裝到此項目或者NodeJS環境中，這是很是便捷的一件事情，並且不少大神將本身開發好的輪子上傳到了npm網站上面，因此咱們須要哪一個插件，直接npm安裝便可，不須要再去進行搜索、下載、安裝這麼麻煩的過程。
1.1.四、在此處咱們安裝NodeJS環境，說白了也是爲了安裝npm這個包管理器才進行的操做。

Vue環境搭建

Vue環境搭建其實就作兩件事情，安裝Vue和Vue腳手架工具。這兩個安裝都是經過npm來安裝的，詳細過程以下：
1.2.一、打開命令行工具，經過如下兩個命令來分別安裝Vue環境和Vue的腳手架工具，以下：

npm install vue
npm install -g @vue/cli

1.2.二、安裝完成後，經過如下命令進行測試，出現版本號信息，則說明安裝成功：

vue --version

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

初始化項目demo

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

vue create vuejsapi414demo

以上命令使用了Vue的腳手架工具來初始化一個項目demo，demo名稱爲「vuejsapi414demo」，此名稱能夠本身隨意取名。輸入以上命令按回車以後，會出現項目初始化窗口，在此處須要咱們選擇項目中使用的插件，此處選擇第一個默認的便可：

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

2.二、項目初始化結束後，咱們使用命令行中提示的命令進入到項目根目錄，而後經過提示命令來啓動項目，而且在瀏覽器中經過地址「localhost:8080」來查看：

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

ArcGIS JS API和Vue結合開發

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

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

3.二、在命令行中經過Ctrl+C來中止項目的運行，而後經過如下命令來安裝esri-loader，以下：

npm install esri-loader --save-dev

3.三、安裝結束後，經過命令npm run serve從新啓動項目，而後用編輯器打開咱們初始化的這個項目代碼，此處使用的是VS Code編輯器，各位可使用Hbuilder、SublimeText三、
webStrom等編輯器，不作強制要求，以下：

3.四、而後打開項目根目錄下的package.json文件，在這個文件中咱們能夠看到剛纔安裝的esri-loader插件，此時使用的是V2.13.0版本，以下所示：

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

3.六、在此處咱們就不新建標籤了，直接在id爲「app」的這個div中來實例化一個地圖。接下來咱們修改下body標籤和id爲「app」這個div的標籤樣式。代碼以下：
body {
margin: 0;   /\*\*主要是去除谷歌瀏覽器默認的8像素的外邊距 \*/
}
#app {
position: absolute;   /\*\*使這個div的大小撐滿整個屏幕 \*/
width: 100%;
height: 100%;
}

3.七、而後加載引入咱們安裝的esri-loader插件，以下：

import {loadModules} from 'esri-loader';

3.八、引入esri-loader以後，接下來就讓咱們的項目系統和JS API作一個銜接。在這裏你們必定要理解一個概念：咱們在Vue中使用JS API時，調的接口這些仍是咱們傳統開發調的那些接口API，esri-loader在這裏僅僅是充當一個橋樑的做用，因此你們不要誤認爲esri-loader也是一個開發包哈。也就是說，你最終使用的JS API開發包仍是咱們本地部署或者JS API官網的開發包，並非esri-loader裏面的開發包。
作銜接以前，咱們先建立一個mounted生命週期函數，而後在這個函數裏調用建立地圖的函數，代碼以下：

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();
}
}

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

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

//經過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);
});

3.十、經過以上步驟，就實例化了一張二維地圖，最終的效果以下所示：

本文沿着Vue基礎項目demo搭建到JS API的引入，並最終生成一張二維地圖的過程進行了詳細的介紹。本篇文章適合有必定Vue基礎和JS API開發基礎的人員查看學習，在本文中咱們使用的JS API是本地部署的JS API，你們也能夠將API地址換成官網的，只須要修改option這個對象的屬性值便可，相似於下面：
const option = {      //定義一個包含有JS API中js開發包和css樣式文件的對象
url: 'https://js.arcgis.com/4.14/init.js',
css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'};

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