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

寫這篇總結的意義：總結，回顧，反思項目進行過程和這套「Vue + ArcGIS API for JavaScript」GIS前端應用技術路線，從項目與技術兩個方面積累經驗，尋找知識缺陷和項目優化空間，在總結的過程當中學習。

• 技術路線的選擇—vue + arcgis js api
• 技術學習內容彙總

技術路線的選擇—vue + arcgis js api

---

項目的技術路線是使用Vue+ArcGIS API for JavaScript構建一套gis前端應用，更加具體的技術路線其實是 vue + vue-cli + vue-router + vuex + antd for vue + arcgis js api ，應用到了vue技術棧加上了最新版4.11的arcgis js api。最核心的問題就是vue與基於dojo開發的amd模式的api怎麼集成？集成以後怎麼使用？使用的時候會不會出現不少坑？本文做爲全方位的總結，但願思路完整，因此仍是從頭提及。

Vue是目前前端三大流行框架之一（還包括React，Angular，來源於道聽途說），她和React同樣是一個表現層框架，專一於頁面的渲染，而且，她和React同樣都具備聲明式渲染、組件化的特徵。我是先接觸React再接觸Vue的，二者不少類似之處，至於說Vue學起來更容易輕鬆，我沒有什麼深切的體驗，但確實Vue的中文資料更加豐富，畢竟算是國產。我跟單位的大師討論過相關問題，我說Vue蠻好用的用戶量貌似也蠻大，他說Vue只是在中國用戶量大而已，他更偏向於相信大廠。無論怎麼說，以此次項目對Vue的使用體驗挺好。

Arcgis一直以來在gis領域算的上壟斷地位，gis專業學生學校裏學的，不少相關單位用的，都是Arcgis。他的產品體系龐大，從桌面端、客戶端，到服務器，到在線服務，到大數據，到人工智能與gis相關或不那麼相關的都有，她是成熟的gis商業軟件，選她選的是靠譜。畢竟是美國的商業軟件，過分依賴不是什麼好事，一是錢的事，二是產權的事，愈來愈多開發者選擇使用開源gis前端api，包括leaflet、mapbox等等。本次項目沒有使用開源gis的要求，Arcgis天然是最好的選擇。

技術學習內容彙總

---

單位以前沒有使用這套技術路線進行過項目，甚至沒有用vue作過項目，領導在項目前安排了大概3-4個小時的培訓，相關技術的學習路線彙總，以下：

• 環境

  • node.js
  • NVM - Node Version Manager( nodejs版本管理工具 )
  • npm cnpm yarn
  • 開發工具 vscode
  • Emmet

• 預備知識體系

  • ES6 - 重點看： let; const; 結構賦值; 對象擴展; 函數擴展; SET; MAP; Iterator; Promise; asnyc-await;
  • CommonJS amd 參考阮一峯模塊化編程
  • MVVM模式
  • Webpack
  • Babel -包括polyfill
  • Sass

• vue + vue router + vuex + axios + antd技術棧

  • vue

    • vue-loader
    • vue的生命週期
    • 父子組件之間通訊、子父組件間通訊
  • vue-cli 腳手架工程

  • vue-router

    • 設置動態路由，動態獲取js，減小一次性的加載量，提升頁面響應速度
    • 路由傳參
  • vuex
• arcgis api 4.11