基于vue+百度地图的多车实时运动及轨迹追踪实现（心路历程篇）

项目背景

老代码思路

可以保留的设计

• websocket方式接收数据。因为车辆数据会源源不断产生，前端定时拉取不可取，所以采用了websocket方式接收数据。
• 通过id标记一个车的覆盖物（marker和label），方便后面删除
• 嗯，我努力想想，一定会有3的

需要改进的点

• 车辆是跳动前进的，很不真实
• 背景过于朴素

需要增加的功能

• 车辆需要显示实时的速度
• 需要加一个列表，实时更新当前在跑的车辆信息，限制显示前10辆车
• 增加轨迹线功能，实时追踪该车辆的前进轨迹

车辆跳动的原因

改造步骤

1. 重画=》设置新位置

2. 平滑效果

a ) 百度地图自有的轨迹动画api参考4，更适用于已知整个轨迹，并在指定的时间内回放完成。

b) 前辈写的基于百度地图的多图标平滑移动方案参考2，主要思路是补点，根据两个点之间距离来计算要补多少个点，并用setInterval去定时移动到下一个点。但其中用到的计算距离的函数适用于百度地图jsapi v2版本，我们用的是百度地图js webgl v1版本，要注意一下不能直接使用。

到这里基本确定使用补点的思路。最开始因为方案b)不能直接使用，采用了方案c)里的函数，发现车辆几乎都没动（其实是车已经飞走了，年少无知的我以为车没动），就把距离打印出来看了一下，看到两点之间的距离是0.00099km，想着莫非太近了，所以看起来不动？又或者是这个库的距离算起来不准，不死心地跑去百度那边试了一下，虽然大了那么一丢丢，但绝对值还是很小。

var from = turf.point([113.27720709322817, 23.351992192427748]);
var to = turf.point([113.2772194870973, 23.352001006312186]);
var options = {units: 'miles'};
turf.distance(from, to, options);
0.0009944611081986045

3. 换皮

4. 本地模拟websocket数据

const fs = require('fs')
const path = require('path')
const input = process.argv[2]
const fullname = input.split('/').slice(-1)[0]
const filename = fullname.substring(0, fullname.lastIndexOf('.')) 
let objArr = JSON.parse(fs.readFileSync(input, 'utf8')).log.entries
const websocketReqs = objArr.filter(o => { return o._webSocketMessages && o._webSocketMessages.length > 0})
const receivedMsgs = websocketReqs.length > 0 && websocketReqs[0]._webSocketMessages.filter(item => item.type === 'receive')
if (receivedMsgs && receivedMsgs.length > 0) {
    try {
        fs.writeFileSync(path.resolve(__dirname, `./${filename}.json`), JSON.stringify(receivedMsgs, null,"\t"))
    } catch(e) {
        console.log(e)
    }
}

[
 {
 "type": "receive",
 "time": 1648170807.1585,
 "opcode": 1,
 "data": "realdata1"
 },
 {
 "type": "receive",
 "time": 1648170807.329674,
 "opcode": 1,
 "data": "realdata2"
 }
]

const realtimeTraces = JSON.parse(fs.readFileSync('./已提取的jons文件.json', 'utf8'));
const server = ws.createServer((connect) => {
  console.log(`用户链接上来了`);
  // 用户传递过来的数据，text事件就会被触发
  connect.on("text", (data) => {
    console.log(`用户传来的数据${data}`);
  });
  // 当连接断开时，就会执行这个事件 注册close事件就要注册下面的error事件
  connect.on("close", () => {
    console.log(`链接断开了`);
  });
  // 注册一个error事件，处理用户的错误信息
  connect.on("error", () => {
    console.log(`用户链接异常`);
  });
// send realtime trace
let baseTime
for(let i=0; i<realtimeTraces.length; i++) {
    const item = realtimeTraces[i]
    if (i === 0) {
        baseTime = item.time
    }
    setTimeout(() => {
        connect.send(typeof item.data === 'string' ? item.data : JSON.stringify(item.data));
      }, (item.time - baseTime)*1000);
  }
  
});
const PORT = 7777;
server.listen(PORT, () => {
  console.log(`服务启动成功,端口号${PORT}`);
});

5. 修改绘图的触发时机

6. 车辆消失后从地图上移除

7. 向大佬求助

8. DIFF算法

// 新旧list对比，根据不同情况进行不同的操作
// 若新的有，旧的没有，则插入，tag记为'PLACEMENT'
// 若旧的有，新的没有，则删除，tag记为'DELETION'
// 若两者都有，则更新，tag记为'UPDATE'

9. 从一个车的视角，把问题简单化

• 接收消息
• 画车
• 移动车
• 移除车

• 后端发消息时，进行消息的接收。
• 接收消息时判定是否为新车，如果是新车，就画车。
• 画完车后，如果还存在未画的点，就去移动车。每次拿出两个点，作为起始点和终止点，通过补点算法去移动。
• 如果一直没有（预设3秒）未画的点了，就判定车辆消失，移除车。实现的时候是每次画新的点后重新倒计时。

参考文献

1. 利用chrome保存和查看网络请求
2. 百度多图标平滑移动
3. 多线段平滑移动
4. 轨迹动画