近期网格化大气监测系统项目大致功能基本实现，温故而知新，这篇文章用来总结之前的工作。把之前的难点总结一下，逻辑思路流程理一理，能得到不少收获。
项目概述
项目目的
本次项目名称为网格化大气监测系统，主要目的是为了配合实验室的工作开展，把数据在后台页面图表化，简单直接明了。
人员分工
本次项目由软件研发组来完成，其中人员分配如下：
| 项目经理 | ui设计师 | 前端开发 | 后端开发 |
|---|---|---|---|
| 1人 | 1人 | 1人 | 1人 |
项目详情
设计图
设计图由ui设计师出稿，设计图上传至蓝湖工作平台，由ui设计师和前端开发通过合作交流共同完成。
蓝湖
设计图初稿
涉及技术
前端：Vue.js、JavaScript、HTML、CSS等。
后端：spring boot等。
前端ui框架：为了统一风格以及提升开发效率，本次开发引入了——Element Ui，本次项目中下拉框、按钮、多选框等基本组件都由Element Ui实现。
Element Ui
前端可交互图表框架：本项目采用的是流行于国内的可交互图表框架——ECharts，基本文档API齐全，实用性强。
ECharts
前端可交地图框架：地图框架采用了国内常用的百度地图框架，简洁大方的界面，灵活的组件都是百度地图的优点。
百度地图
功能需求
1.选择相应组织、查询的时间段、空气指标以及对应设备后，echarts图表显示相应的设备指标趋势图、百度地图模块显示当前组织所有设备所在位置以及设备类型并跳转至当前组织设备的地理位置。
2.在勾选轨迹按钮后，判断当前轨迹开关的状态，若为true显示所选设备轨迹、若为false所有轨迹消失。
3.在点击数据校准后，若数据校准开关为true，则获取的后台数据为校准后的数据，若为false则后台返回的数据为未校准的原始数据。
4.当鼠标指向echarts图标的线上，根据对应时间以及设备数据信息在百度地图显示当时设备所处的地理位置。
逻辑思路
由于本人做的是前端模块，就只具体分析下前端代码的逻辑思路。
1、展示数据点位置
1、当鼠标指向echarts图表的折线图上时，地图上显示当前鼠标所指时间对应的地图坐标。
2、坐标位置显示对应echarts折线对应颜色的涟漪点。
方法注释
initEnvShowTip：鼠标放在echarts图标上触发showtip事件，执行createMark方法。
createMark：创建标记（marker），将坐标点集合放入百度地图的option中。
getMarkerData：获取标记的时间、坐标以及名称。
setChartMapCenter：将地图中心设置为当前标记，只执行一次。
流程图
部分代码
getMarkerData
2、显示设备标记
1、当所选条件都满足时，点击确定发送ajax请求。
2、请求获取到当前所选机构的所有设备信息（包括设备类型、设备经纬度）。
3、判断设备类型，显示对应的设备图标。
4、根据经纬度、通过百度地图的方法创建对应图标。
方法注释
getCityDevsMap：当勾选设备、时间段、空气指标以及机构都被勾选时，点击确定按钮开始发送ajax请求（POST），获取当前勾选的设备信息。
showDevMarker：获取到百度bmap实例，将地图中心定位到当前组织中心，地图层级设为12级。
createDevMaker：利用new BMap.Point创建坐标点，设置坐标点的样式，生成坐标点。
流程图
部分代码
createDevMaker
3、显示设备移动轨迹
1、当轨迹开关状态为true时，在满足条件时点击确定按钮，显示当前勾选设备的轨迹。
2、轨迹颜色各不相同，需要区分开来。
3、关闭轨迹开关时，轨迹消失。
方法注释
getDevTrack：通过ajax请求（POST）获取所勾选信息的轨迹信息。
creatTracks：创建轨迹信息，将信息push进bmap的实例option中。
流程图
部分代码
creatTracks
难点
本次项目的难点在于生成轨迹与设备标记等地图覆盖物时的冲突，当生成轨迹时设备标记消失，清空轨迹时设备标记消失等一系列问题。
刨根问底，这一系列问题都是由于百度地图的实例设置option被覆盖、重复叠加或者清空等情况造成的。
通过myechartmap.setOption来更改设置
this.myechartmap.setOption(this.myechartmapOption);
在不想要设置被清空的时候，通过myechartmap.getOption()来获取原有设置
this.myechartmap.getOption();
在弄清问题所在的原因之后，把思路和逻辑理清了，问题就迎刃而解。沉着冷静、细心思考才是解决问题的关键。
总结
通过本次项目的实践，在对于echarts以及百度地图的理解方面有了更深层次的了解。百度地图与echarts结合常用的创建覆盖物等方法已基本掌握，但还需改进，实现出更加完美的效果出来。
要想提高效率，提升自我技术水平才是关键，多熟悉了解JavaScript，把基础打扎实，开发效率事半功倍。
在工作效率方面还需提升，在前后端合作方面我认为有必要规范一下开发流程，在开发的时候经常会遇到一些情况。
例如：
1、接口文档已经更新，而前端在不知道的情况下继续按照以前的接口文档开发，查找问题需要很多时间，在更新文档后应该给相关人员一个消息提示。
2、后台每次调试、更新或者报错，前端无法获取数据继续开发，耽误不少时间。
3、每当出现问题时，前后端都应该查找自己是否出错，而不是互相推卸责任。
网友评论