技術(shù)棧
- mvvm框架：vue
- 數(shù)據(jù)流管理： vuex
- 路由管理： souche-router
- 地圖選型： 百度地圖JSSDK（后期會(huì)接入高德）
整體架構(gòu)圖
整體框架圖.png
baidu-map-moudle
封裝的百度地圖jssdk鲜戒，已經(jīng)封裝好的類(lèi)：
- baidu-lushu: 軌跡輪放專(zhuān)用類(lèi)专控，依賴lushu.js，在本地項(xiàng)目的public下打包好遏餐。
- baidu-map-base: 百度地圖基類(lèi)踩官，用于初始化地圖，傳入不同的經(jīng)緯度境输，可以定位到不同的點(diǎn)蔗牡，必須穿入承載地圖的dom節(jié)點(diǎn)的ID。
- baidu-marker: 地圖覆蓋物marker類(lèi)嗅剖，可在地圖上初始化標(biāo)志物辩越，可以傳入自定義圖片。
- baidu-poly-line: 地圖畫(huà)線類(lèi)信粮，傳入點(diǎn)數(shù)據(jù)黔攒，可以在地圖上初始化一條線
注意： 該類(lèi)下的經(jīng)緯點(diǎn)參數(shù)，一律不需要經(jīng)過(guò)坐標(biāo)系轉(zhuǎn)化强缘，轉(zhuǎn)化的過(guò)程需要在業(yè)務(wù)組件內(nèi)完成
公共組件
公共組件抽離出地圖共用部分督惰，可以被不同的業(yè)務(wù)組件調(diào)用，比如軌跡輪放旅掂，傳入小車(chē)的信息和經(jīng)過(guò)轉(zhuǎn)化的經(jīng)緯點(diǎn)數(shù)組赏胚，可以實(shí)現(xiàn)軌跡輪放功能，用于實(shí)現(xiàn)某一地圖功能而開(kāi)發(fā)商虐。
業(yè)務(wù)組件
業(yè)務(wù)組件主要是調(diào)用api獲取數(shù)據(jù)觉阅，將數(shù)據(jù)轉(zhuǎn)化為相應(yīng)的坐標(biāo)系，并傳入公共組件秘车，業(yè)務(wù)組件主要承載相關(guān)業(yè)務(wù)的邏輯代碼典勇，以及外部裝飾（例如，margin叮趴、padding和一些結(jié)構(gòu)樣式）
路由轉(zhuǎn)換以及頁(yè)面結(jié)構(gòu)
頁(yè)面結(jié)構(gòu).png
共用部分
導(dǎo)航欄和標(biāo)題欄屬于共用部分割笙，在index.vue文件下被調(diào)用，業(yè)務(wù)組件在其router-view下被切換眯亦。
獨(dú)立部分
404異常頁(yè)和login伤溉、m-shareposition是獨(dú)立的幾個(gè)頁(yè)面豪嚎，不需要被header和menu所修飾
路由信息
export default {
'/app': {
path: 'views/index',
name: 'index',
children: {
'track': {
name: 'track',
path: 'views/car-track'
}
}
},
'/login': {
path: 'views/login',
name: 'login'
},
'/m-sharepostion': {
path: 'views/share-position',
name: 'share-position'
}
};
- /app 系統(tǒng)主要功能路由，每個(gè)詳細(xì)的功能分別是它的子路由谈火，比如/app/track等，進(jìn)入這一級(jí)路由之前會(huì)被beforeEach鉤子函數(shù)給捕獲舌涨，檢查登錄信息和token糯耍，如果沒(méi)有token將會(huì)被退回到login頁(yè)面
- /login 登錄頁(yè)路由
- /m-sharepostion 移動(dòng)端位置分享頁(yè)面
