Vue + ArcGIS API for JavaScript 構建前端GIS應用（三）

接着上篇，繼續介紹 如何編寫一個組件、組件間如何通行，如何解決組件通信的一些硬傷，最終如何結合arcgis js api建立一個vue項目

傳送門：
Vue + ArcGIS API for JavaScript 構建前端GIS應用（一）
Vue + ArcGIS API for JavaScript 構建前端GIS應用（二）
Vue + ArcGIS API for JavaScript 構建前端GIS應用（三）

p.s.:
配合示例代碼服用效果更佳示例代碼：https://github.com/GlennLuo19...

如何編寫一個組件？

示例代碼： https://github.com/GlennLuo19...

如何去編寫一個單文件組件呢？下面使用一個簡單的案例進行說明。

該組件包括一個狀態count用於計數，兩個按鈕分別增長與減小count。

數據與事件的聲明與綁定

首先，咱們要作的是組件視圖層的編寫，很簡單的3個標籤，1個div、2個button

1. 數據聲明：這時候就須要在模塊中新建一個data選項，在裏面註冊一條狀態count
2. 數據綁定：使用雙大括號的形式把數據綁定到標籤上。
3. 方法註冊：在methods選項中進行方法的註冊。在方法中，咱們直接操做的是剛剛註冊的count狀態
4. 綁定事件：使用v-on:指令或者簡寫使用@，進行事件綁定

這樣邏輯就完成了。方法直接操做狀態，狀態一旦更新，vue隨即響應，對dom進行更新。
除此以外還有component、props、computed選項，在這就不作介紹了。

生命週期鉤子函數

下面介紹一下重要的概念，生命週期鉤子函數。

仍然用剛剛的例子去看一下生命週期鉤子怎麼用：
如今組件使用了created、mounted、updated三個經常使用的生命週期鉤子函數，他們分別在組件建立好時執行、在組件裝在完畢後執行、在組件狀態更新後執行。效果請看例子。

咱們使用生命週期能夠實現一些邏輯。好比組件與後臺的通訊獲取初始化數據就能夠在mounted函數裏面進行。

組件間如何通訊？

https://github.com/GlennLuo19...
某一個獨立的組件很難實現一個比較完整的業務邏輯，所以組件間的通訊是不能避免的。

下面就用一個例子說明父子組件之間是如何互相傳值的。

首先介紹一下例子代碼的結構：

1. 在App組件包含了一個子組件parentComponent；parentComponent中包含子組件childComponent。這裏就是用到了vue的component選項，就是把子組件註冊進來，並做爲一個標籤放到temlate裏面。
2. parentComponent與childComponent爲父子組件關係，能夠看一下頁面。若是子組件想使用父組件的某個數據怎麼實現呢？ 首先父組件具備一個狀態msg，而後把msg做爲一個參數，傳給子組件。
3. 咱們在子組件中使用props選項接受到父組件傳的值。這值是能夠直接做爲狀態綁定的。
4. 演示：點擊父組件
5. 子組件向父組件如何傳值？首先父組件聲明一個方法：獲取一個數據存到本身聲明的一個狀態childMsg裏面，而且把這個方法註冊到子組件上。
6. 在子組件裏面使用this.$emit方法就能夠把本身的值做爲參數，激發父組件掛載的事件。

兩種方式是不一樣的： 父組件向子組件傳值是主動式的；子向父是被動式的。

可是問題來了：兄弟組件如何通訊？多層級組件之間怎麼通訊？
vue的生態系統能夠幫助解決以這個問題。

Vue生態系統

前面說到過，vue是一個是漸進式框架，僅僅依靠上面介紹的vue核心庫很難知足一個工程項目建設的須要，同時vue原生存在的問題如：組件間通訊困難的問題難以解決。可是在vue生態系統的幫助下，讓vue有能力建立一個工程應用。在這裏只是對vue生態的內容進行簡單的介紹，具體什麼時候使用？怎麼使用？會在後面的案例中進行演示。

Devtools：

瀏覽器插件，便於在開發中使用。

Vue Loader：

Webapck中的一個loader，用於轉譯.vue文件，讓單頁組件可用。若是是想用webpack手工進行vue工程項目配置的話，這個loader是必不可少的。

Vue Cli：

經過Vue Cli能夠幫助快速開發一個vue工程項目。提供vue-cli能夠交互式的、快速的搭建一個項目的腳手架。它是基於 webpack 構建，並帶有合理的默認配置，減小配置時間，繞過webpack這個坑。一個豐富的官方插件集合，集成了前端生態中最好的工具。

Vue Router：

控制vue的路由。

Vuex：

狀態管理機，構建全局狀態和局部狀態，解決組件間通訊問題。

用Vue構建前端工程項目

開發環境：

node.js
npm or yarn

IDE：

VSCode、Webstorm
介紹一下適合vue前端開發的vscode插件

項目構建：

方案：使用webpack進行vue環境配置；這裏就能夠應用前面談主任提到的現代前端工具鏈在webpack基礎上進行項目的配置，可是配置過程繁雜須要豐富的經驗，容易遇到坑，影響項目啓動的進度。

簡化方案：使用vue生態中的vue-cli構建項目（重點介紹，並進行演示，包括使用控制檯指令進行建立和使用可視化界面vue ui進行建立）；

集成GIS

示例代碼： https://github.com/GlennLuo19...

如何與arcgis js api進行集成？

咱們不能在用npm安裝arcgis api後直接用import的形式引用api到項目裏來，由於咱們的項目是es模式的模塊化規範，而arcgis api是基於Dojo框架下AMD模式創建的。因此，想要在咱們的項目中使用arcgis就必須藉助其餘的工具，這個工具就是esri-loader。

構建一個簡單的WebGIS

綜合案例：vue + vue-cli + vuex + vue router + esri-loader技術棧

這個例子實現了哪些內容：

1. 使用前端路由vue router實現了模塊的切換：首頁和地圖模塊
2. 地圖模塊中集成了arcgis api，使用arcgis api實現了添加圖層、刪除圖層的功能。在這裏劃分了兩個不一樣的組件map和mapControl。使用vue的dev tools能夠查看模塊的劃分。
3. map和mapControl是獨立的兩個組件，可是邏輯功能是有耦合的，須要進行組件件的通行。這裏使用了vuex做爲通訊方案，實現了mapControl組件對map組件的控制。

項目的代碼

先來看一下項目的文件結構：

• dist文件爲最終的產品文件夾
• node_modules爲項目的第三方js庫
• public文件夾主要存放的是html模版，最終的vue實例是被掛在在這個html上的
• src存放的是源碼
• 下面以.開頭的這些文件爲各類插件的配置文件好比eslintrc爲eslint的配置文件、babel.config.js是babel的配置文件、vue.config.js是vue-cli的配置文件
• package.json是該項目的包管理配置文件

重點看一下源碼部分

• assets文件夾存放的是前端的靜態資源如圖片、字體等
• components用於存放劃分很細的組件。
• views是存放vue中模塊級別的組件，在咱們這個項目中就包括了home模塊和myMap模塊，也就是剛剛你們看到經過路由切換的模塊。
• App.vue是最大的一個組件，最終他會在入口文件main.js中被掛到html模版上。
• router.js是寫vue router的相關內容
• store.js寫的是vuex的內容

從mainjs看起，這聲明瞭一個vue實例，啓用了初始化vuex和vue router，並把應用級組件app掛在html模版id是app的div上。

在app組件是一個應用的總體框架。這裏有兩個router-link標籤，進行前端路由的跳轉。router-view等因而一個佔位符，表示的是某個路由對應的組件。

在router.js裏面咱們能夠看到/對應的是Home組件；/map對應的是MyMap組件。懶加載。

當咱們進行路由跳轉時，就能夠進行組件的切換。

Home組件咱們就不介紹了；重點介紹一下myMap組件

myMap裏面註冊兩個組件：map和mapControl

在map組件裏面咱們啓用esri-loader，在鉤子函數mounted也就是在組件裝載成功後進行arcgis api map類和view類的初始化。

在最後咱們使用了initMap以及initView這兩個函數，這兩個是vuex中定義的mutation。

如今咱們看看一下vuex的store是如何編寫的：

一個store最重要的就是state、mutation、actions這像個選項：

1. state表示狀態跟vue中的data相似，這裏能夠理解爲應用級別的data
2. mutation（轉變）用來寫一些改變狀態的函數，要求是純函數
3. action（動做）用來寫一些業務邏輯包括一些一步過程

該項目聲明瞭3個狀態：

1. map：用於存放應用中的map實例
2. view：用於存放應用中的view實例
3. layercount：用於記錄圖層數量

mutation裏面寫個兩個函數
initMap：也就是將在map組件裏面實例化的map對state中的map進行初始化
initView：與map相似，就是初始化view

當這兩個對象被vuex管理以後，應用裏的全部組件均可以調用vuex中的mutation或者action方法加上本身的參數對地圖對象進行操做了

這裏在action中寫了兩個方法增長圖層和刪除全部圖層。

回到mapControl組件，咱們使用的mapActions方法把vuex中的兩個actions引用到組件裏面，分別掛在了兩個按鈕的單擊事件上。還能夠看到咱們還將vuex中的layerCount狀態綁定到了組件的標籤上，它跟data同樣能夠響應式渲染。

總結一下：

webGIS通常是以地圖爲核心，咱們能夠將地圖對象等交給vuex進行管理，對於地圖的操做邏輯也能夠分離出來寫在vuex中。對於其餘的一些應用級別的對象也是如此。

這樣咱們就能夠避免了大部分的通訊問題。

最後進行一點補充：
咱們結合一些熱門UI框架如element UI或者ant design能夠幫我建立更好看的、交互性更好的webGIS應用。