Vue3 + MQTT + 高德地图 实现车辆在线状态与实时位置更新

在车联网项目中，我们经常需要实时接收设备（车辆）状态、GPS 位置数据，并且动态更新到前端界面。本篇文章将结合 Vue3 + TypeScript  + MQTT + 高德地图，实现以下功能：

• 🚦 车辆上下线状态实时更新（在线、离线、行驶、停车）

• 📡 接收设备的 GPS 数据并动态更新位置

• 🗺️ 与全局车辆信息绑定，实现响应式更新

一、MQTT 客户端封装

首先，我们基于 mqtt.js 封装一个 useMqtt 方法，用于连接 MQTT Broker 并处理消息。

（MQTT 订阅流程图 + 数据流转图）

import mqtt from "mqtt";
import { deviceStatusMap, latestLocationMap } from './deviceCache';

export type DeviceStatus = 'online' | 'online_driving' | 'offline' | 'online_parking';



const BROKER_URL = "你的MQTT Broker 的 WebSocket 接入地址";

const statusMap: Record<string, DeviceStatus> = {
  'client.connected': 'online',
  'client.disconnected': 'offline',
};

export function useMqtt(
  onMessageCallback: (
    deviceId: string,
    data: { status: DeviceStatus; location: any; }
  ) => void
) {
  const client = mqtt.connect(BROKER_URL);

  client.on("connect", () => {
    console.log("✅ [MQTT] Connected");

    const topics = [
      "device/status",
      "login",
      "dataStream/+/GPS",
    ];

    topics.forEach((topic) => {
      client.subscribe(topic, (err) => {
        if (err) console.error(`❌ 订阅 ${topic} 失败`, err);
        else console.log(`📡 已订阅 topic: ${topic}`);
      });
    });
  });

  client.on("message", (topic, message) => {
    console.log("📨 收到 Topic:", topic);
    console.log("📦 原始消息:", message.toString());
    const str = message.toString();
    if (!str) return;

    try {
      // 设备上下线事件
      if (topic === "device/status") {
        /**
         * 预期消息格式：
         * {
         *   "clientid":"DEV001",
         *   "event":