最近有个需求是想根据车速划分不同的车速区间,并且在画运行轨迹的时候需要切换不同颜色的线。百度地图它有画运行轨迹的API,不过是根据一系列的经纬度来画一条线,但是只是展示一种颜色。网上百度了也没有发现有相似的,无奈就自己琢磨改写了部分。可能有不完善的地方,欢迎大家一起交流。
1.模拟后台数据,需要后台传经纬度速度,根据速度选择使用哪种颜色的线,根据经纬度画线。
现大体模拟了机组数据,如下:
2.读取模拟的接口数据,拿到数组对象,传给组件。(ps:项目是使用的vue,所以将此模块写成了个组件)Mock.mock(loUrl('historyTripView'),{ "CarTripInfo":[{ 'speed':20, 'dtLongitude':'116.387112', 'dtLatitude':'39.920977' },{ 'speed':50, 'dtLongitude':'116.385243', 'dtLatitude':'39.913063' }, { 'speed':100, 'dtLongitude':'116.394226', 'dtLatitude':'39.917988' },{ 'speed':80, 'dtLongitude':'116.401772', 'dtLatitude':'39.921364' }] });
前台获取:
that.