高德地图+wensocket+vue 多辆小车的实时移动

小车的实时移动"/>

高德地图+wensocket+vue 多辆小车的实时移动

vue中高德地图如何结合websocket实现多辆车辆的实时移动

• websocket作用和准备阶段
• 地图组件部分
• • • 处理数据展示车辆轨迹
    • 大体思路：
    • • 其实这一部分大家不用看，没什么卵用，不过我还是要解释一下：
      • 接下来就很重要了，说了这么多废话了，终于要分享重点了：
  • 总结

websocket作用和准备阶段

在我们去实现车辆的实时轨迹展示时，websocket是非常方便的，一旦建立连接便可以不间断的将车辆的数据信息传给我们。但当面临多辆汽车的数据时处理起来就会有点手忙脚乱。首先下面简单的websocket的实现。

 //获取websocket地址，接口会有后端提供async getCarInfoWs() {try {let res = await managePlatform.getCarInfoWs();if (res.success) {this.webSocketUrl = res.data.carinfoWs;this.initWebSocket();}} catch (e) {console.log(e);}},//初始化websocket，写法一般固定initWebSocket() {if (window.WebSocket && this.webSocketUrl !== "") {this.ws = new WebSocket(this.webSocketUrl);this.ws.onopen = () => {console.log("push_ws：onopen");this.ws.send("all");};this.ws.onclose = () => {this.ws.onmessage = null;this.ws = null;console.log("push_ws：onclose");};this.ws.onerror = () => {this.ws = null;console.log