小车的实时移动"/>
高德地图+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
更多推荐
高德地图+wensocket+vue 多辆小车的实时移动
发布评论