Vue+Node+高德地圖+Echart作一款出行可視化全棧webapp

咔咔出行（出行可視化）

項目簡介

解決出行問題，用於出行行程記錄，路線規劃，數據可視化分析的移動端webapp
點擊這裏查看該項目

項目截圖

私人出行

公共交通

歷史列表

個人信息

技術棧

• 前端：移動端，vue全家桶，Mand組件庫，Echarts.js，Scss

• 後端：Node，Express框架，高德地圖API

• 數據庫：Mysql

功能模塊

我的出行

用戶我的出行，不肯定路程、目的地等信息，選擇出行工具，點擊開始，系統實時監聽用戶手機位置獲得WGS84經緯度座標（w3c HTML5 Geolocation地理定位標準），行程結束，記錄本次出行信息，經緯度座標轉換GCJ-02座標體系，經過高德地圖提供三方API繪製出行軌跡。

公共交通

用戶肯定出發地、目的地、交通工具，選擇公共交通出行，用戶輸入位置關鍵字，選擇合適出發/目的位置，選擇乘坐交通工具，規劃出行路線，選擇某一條路線，肯定後點擊保存上傳本次出行記錄

歷史列表

按時間順序查看全部出行的歷史記錄，可查看出行的詳情信息、行程軌跡、路線規劃

個人信息（未完成）

查看個人詳情信息，經過出行數據分析獲得的出行趨勢折線圖，與出行數據相關的數據分析圖表，其餘功能未寫

項目構建

前端

前端在vue-cli3基礎上開發，在此之上根據項目需求對項目工程做出幾點修改，前端代碼在view/文件夾中

• 移動端適配：以前作移動端開發一直使用手淘的分辨率適配方案，本項目根據大漠的《如何在Vue項目中使用vw實現移動端適配》，對移動端分辨率用webpack在工程中配置。

• 請求攔截器：在view/src/request/中，基於axios提供的interceptors對全部ajax的請求和響應添加相應操做，如請求頭添加，token添加，響應後臺錯誤狀態碼的識別與報錯；簡單封裝了下axios請求，主要爲get，post兩種。

• 導航守衛：在view/src/router/中，作了全局導航守衛，未登陸用戶只能訪問項目登陸頁面。

• 工具類：在view/src/utils/中，對經常使用枚舉值、全局組件註冊、經常使用類封裝等功能作模塊化封裝。

• css樣式：在view/src/style/中，全局公共樣式，初始化樣式。

• svg組件：在view/src/icons/中，封裝用於svg展現組件，用作小icon的展現，svg保存該文件夾中。

• 模塊化：對路由與vuex作模塊化封裝。

• 地圖：全部地圖、地理信息、軌跡、路線規劃功能有高德地圖第三方API提供

後端

• 使用Node的express框架，鏈接Mysql數據庫，作數據接口開發，數據的增刪改查與簡單封裝。

小結

項目簡結

• 難度：簡單
• 開發時長：前期調研，編碼一週
• 關鍵字：移動端，出行，可視化，高德地圖，Echart圖表

過程總結

• 想法產出：由於在滴滴出行的實習經歷，準備作款有關出行平臺的，有關前端可視化的產品。

• 需求調研：結合出行 可視化 關鍵字作需求分析，調研悅動圈、悅跑圈、滴滴出行、百度地圖、高德地圖肯定幾個主要功能

  1. 實時定位，繪製出行軌跡(悅跑圈，已完成)

  2. 路線規劃，規劃路線繪製路徑圖(百度地圖，已完成)

  3. 網約車，快車，專車，順風車在線叫車(滴滴出行，未完成)

  4. 可視化分析，出行數據的可視化分析(已完成)

• 技術調研：

  1. 選取HTML5 Geolocation提供的物理位置實時監聽功能，獲取到WGS84經緯座標

  2. 選取高德地圖第三方API提供地圖，地理位置，軌跡繪製，路線規劃等功能

  3. 選擇開發移動端項目，用滴滴的Mand做爲移動端UI組件庫

  4. 選取Node爲服務端，Express爲後端框架，Mysql爲數據庫

難點總結

產品從無到有是最困難的，項目雖然不難，可前期產品調研，技術調研，項目構建確花費了大量時間，相比照着成品寫多了不少不同的體驗

Github源碼 https://github.com/wwenj/tripRecord

補充

數據庫表已上傳，可在server/router中修改鏈接數據庫信息，鏈接數據庫後便可運行 我的服務器正在更改，更改後會放到線上

注：由於立刻畢業，這只是爲了應對畢業設計臨時寫的小項目，沒想到會有這麼多star，時間有限主要實現核心功能，產品仍是很粗糙，我會找時間完善下，謝謝