xiaomubiao-master/外部WebSocket设备标注集成说明.md

外部WebSocket设备标注集成说明

概述

本文档说明如何使用新创建的外部WebSocket设备标注功能，该功能专门用于处理来自外部WebSocket的无人装备数据并在地图上绘制相应的标注。

新增方法

1. 主要方法

加载外部WebSocket设备标注(deviceData: any)

• 功能: 处理外部WebSocket数据并在地图上创建/更新设备标注
• 参数: deviceData - 外部WebSocket消息数据
• 返回: 无

removeExternalDeviceAnnotation(deviceSn: string)

• 功能: 移除指定设备的地图标注
• 参数: deviceSn - 设备序列号
• 返回: 无

clearAllExternalDeviceAnnotations()

• 功能: 清除所有外部设备的地图标注
• 参数: 无
• 返回: 无

getExternalDeviceAnnotations()

• 功能: 获取所有外部设备标注列表
• 参数: 无
• 返回: 设备标注数组

2. 辅助方法

extractExternalDeviceInfo(data: any)

• 功能: 从外部WebSocket数据中提取设备信息
• 参数: data - 原始WebSocket数据
• 返回: 标准化的设备信息对象

getDeviceIcon(deviceType: string)

• 功能: 根据设备类型获取对应的图标URL
• 参数: deviceType - 设备类型（'unmanned_vehicle' 或 'drone'）
• 返回: 图标URL字符串

addStrikeRangeForExternalDevice(deviceSn: string, deviceInfo: any)

• 功能: 为外部设备添加侦察范围显示
• 参数:
  • deviceSn - 设备序列号
  • deviceInfo - 设备信息对象
• 返回: 无

支持的数据格式

1. 外部WebSocket数据格式（您提供的数据）

{
  type: "unmanned_vehicle_data",
  topic: "/CKC/WRJ/PTZT",
  deviceType: "unmanned_vehicle",
  data: {
    XXLX: "PTZT",
    XXXX: [{
      BBH: "V000.00.100",
      CKZD: {
        GC: 55.6,
        JD: 119.068079,
        WD: 32.04998,
        ZBID: 'b'
      },
      WRZB: {
        GC: '55.6',
        JD: '119.068',
        WD: '32.05',
        ZBID: '10002000'
      },
      JKZT: {
        ZHZT: '1'  // 1表示在线，0表示离线
      },
      YDFX: 0,  // 运动方向
      YDSD: 0,  // 运动速度
      SBSJ: "2025-8-15 17:32:57"
    }]
  },
  timestamp: "2025-09-04T12:37:25.1932Z"
}

2. 简化位置数据格式

{
  type: "position",
  device_sn: "FF2023081601",
  device_name: "哈瓦战斧",
  longitude: 118.10067,
  latitude: 32.511448,
  altitude: 200,
  online_status: true,
  strikeRange: 10
}

集成步骤

1. 在WebSocket消息处理中调用

// 在您的WebSocket消息处理函数中
import { Xiaorui } from '@/utils/aixiaorui';

// 假设您有一个Xiaorui实例
let xiaoruiInstance: Xiaorui;

// 处理外部WebSocket消息
function handleExternalWebSocketMessage(data) {
  console.log('处理外部WebSocket消息:', data);
  
  try {
    // 检查是否是无人车数据格式
    if (data.type === 'unmanned_vehicle_data' && data.data && data.data.XXXX) {
      console.log('检测到无人车数据，开始在地图上绘制...');
      
      // 调用新的外部设备标注方法
      if (xiaoruiInstance) {
        xiaoruiInstance.加载外部WebSocket设备标注(data);
      }
    }
    
    // 处理其他类型的外部数据
    else if (data.type === 'position' && data.longitude && data.latitude) {
      console.log('检测到位置数据，开始在地图上绘制...');
      
      if (xiaoruiInstance) {
        xiaoruiInstance.加载外部WebSocket设备标注(data);
      }
    }
    
  } catch (error) {
    console.error('处理外部WebSocket消息失败:', error);
  }
}

2. 在Vue组件中使用

<template>
  <div>
    <!-- 您的地图组件 -->
    <div ref="mapContainer"></div>
  </div>
</template>

<script>
import { Xiaorui } from '@/utils/aixiaorui';
import EventBus from '@/event-bus';

export default {
  data() {
    return {
      xiaoruiInstance: null
    };
  },
  
  mounted() {
    // 初始化Xiaorui实例
    this.xiaoruiInstance = new Xiaorui();
    // 假设您有地图初始化代码
    // this.xiaoruiInstance.map = yourMapInstance;
    // this.xiaoruiInstance.graphicLayer = yourGraphicLayer;
    
    // 监听外部WebSocket消息
    EventBus.on('ExternalWebSocket-Message', (payload) => {
      this.handleExternalWebSocketMessage(payload.data);
    });
  },
  
  methods: {
    // 处理外部WebSocket消息
    handleExternalWebSocketMessage(data) {
      if (this.xiaoruiInstance) {
        this.xiaoruiInstance.加载外部WebSocket设备标注(data);
      }
    },
    
    // 移除设备标注
    removeDevice(deviceSn) {
      if (this.xiaoruiInstance) {
        this.xiaoruiInstance.removeExternalDeviceAnnotation(deviceSn);
      }
    },
    
    // 清除所有设备标注
    clearAllDevices() {
      if (this.xiaoruiInstance) {
        this.xiaoruiInstance.clearAllExternalDeviceAnnotations();
      }
    }
  }
};
</script>

功能特性

1. 自动设备类型识别

• 根据数据格式自动识别设备类型（无人车/无人机）
• 为不同设备类型使用不同的图标和样式

2. 实时位置更新

• 支持设备位置的实时更新
• 自动同步侦察范围位置

3. 在线状态显示

• 根据设备在线状态显示不同颜色
• 在线设备：绿色高亮
• 离线设备：红色高亮

4. 侦察范围显示

• 自动从设备列表获取侦察范围数据
• 支持右键切换侦察范围显示/隐藏
• 流动边框效果

5. 设备信息标签

• 显示设备名称和序列号
• 支持距离显示条件（50km内可见）
• 带背景的标签样式

注意事项

1. 地图实例初始化: 确保在调用标注方法前，Xiaorui实例的地图和图形图层已正确初始化。

2. 数据格式兼容: 新方法支持多种数据格式，但主要针对您提供的外部WebSocket数据格式进行了优化。

3. 设备图标: 确保/src/assets/icons/car.png文件存在，用于无人车图标显示。

4. 内存管理: 使用removeExternalDeviceAnnotation和clearAllExternalDeviceAnnotations方法及时清理不需要的标注，避免内存泄漏。

5. 错误处理: 所有方法都包含错误处理，建议在生产环境中添加适当的日志记录。

调试建议

1. 在浏览器控制台中查看相关日志输出
2. 使用getExternalDeviceAnnotations()方法检查当前标注状态
3. 确保WebSocket数据格式符合预期
4. 检查地图实例和图形图层的初始化状态

扩展功能

如果需要添加更多功能，可以考虑：

1. 添加设备轨迹显示
2. 支持更多设备类型
3. 添加设备信息弹窗
4. 支持设备分组显示
5. 添加设备搜索和过滤功能