VueNode高德地图Echart做一款出行可视化全栈webapp

jiezi

5 年前

解决出行问题，用于出行行程记录，路线规划，数据可视化分析的移动端 webapp
点击这里查看该项目

私人出行

公共交通

历史列表

我的信息

用户个人出行，不确定路程、目的地等信息，选择出行工具，点击开始，系统实时监听用户手机位置得到 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 提供

想法产出：因为在滴滴出行的实习经历，准备做款有关出行平台的，有关前端可视化的产品。
需求调研 ：结合 出行 可视化 关键字做需求分析，调研 悦动圈 、 悦跑圈 、 滴滴出行 、 百度地图 、 高德地图 确定几个主要功能
1. 实时定位，绘制出行轨迹(悦跑圈，已完成)
2. 路线规划，规划路线绘制路径图(百度地图，已完成)
3. 网约车，快车，专车，顺风车在线叫车(滴滴出行，未完成)
4. 可视化分析，出行数据的可视化分析(已完成)
技术调研：
1. 选取 HTML5 Geolocation 提供的物理位置实时监听功能，获取到 WGS84 经纬坐标
2. 选取高德地图第三方 API 提供地图，地理位置，轨迹绘制，路线规划等功能
3. 选择开发移动端项目，用滴滴的 Mand 作为移动端 UI 组件库
4. 选取 Node 为服务端，Express为后端框架，Mysql为数据库

产品从无到有是最困难的，项目虽然不难，可前期产品调研，技术调研，项目构建确花费了大量时间，相比照着成品写多了很多不一样的体验

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

咔咔出行（出行可视化）