zyp/xiaomubiao-master

Fork 0

Files

zyp b3089a254e Initial commit

2026-05-22 16:13:20 +08:00

6.8 KiB

Raw Permalink Blame History

🔧 QB303缺失方法修复指南

🎯 问题诊断

从地图状态检查结果发现的关键问题：

window.m3Data 存在: true
地图实例类型: Xiaorui
qb303DeviceData 存在: true
qb303DeviceData 类型: object
loadrQB303DeviceData 方法存在: undefined  ❌
forceRefreshQB303Devices 方法存在: undefined  ❌
图形图层存在: true
当前QB303设备数量: 1
  设备 dy04: {info: {...}}

🔍 问题根因

关键缺失： QB303相关的核心方法未在aixiaorui.ts中定义

❌ loadrQB303DeviceData - 加载QB303设备数据并渲染到地图
❌ forceRefreshQB303Devices - 强制刷新QB303设备显示
❌ 加载QB303设备 - 创建QB303设备图标的核心方法
❌ getQB303DeviceIcon - 获取QB303设备图标路径

✅ 已完成的修复

1. 添加核心设备加载方法

加载QB303设备(key: string, data: any) {
    // 处理数据结构兼容性
    const deviceInfo = data.info || data;
    
    // 创建BillboardEntity图标
    const deviceImage = new mars3d.graphic.BillboardEntity({
        name: "QB303设备",
        position: [deviceInfo.longitude, deviceInfo.latitude, deviceInfo.altitude || 0],
        style: {
            image: this.getQB303DeviceIcon(),
            scale: 0.1,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            rotation: Cesium.Math.toRadians(deviceInfo.yaw || 0),
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            label: {
                text: `QB303-${deviceInfo.battleUnitCode || deviceInfo.equipmentId || key}`,
                font: "14px sans-serif",
                fillColor: Cesium.Color.LIME,
                // ... 完整的标签样式
            }
        }
    });
    
    // 添加点击事件
    deviceImage.on(mars3d.EventType.click, (event) => {
        this.emit("qb303DeviceClick", {
            equipmentId: deviceInfo.equipmentId || deviceInfo.battleUnitCode || key,
            deviceData: deviceInfo,
            position: [deviceInfo.longitude, deviceInfo.latitude, deviceInfo.altitude || 0]
        });
    });
    
    // 添加到地图
    this.graphicLayer.addGraphic(deviceImage);
    this.qb303DeviceData[key]["deviceImage"] = deviceImage;
}

2. 添加批量加载方法

loadrQB303DeviceData() {
    console.log('开始加载QB303设备数据到地图...');
    if (this.qb303DeviceData && Object.keys(this.qb303DeviceData).length > 0) {
        for (let [key, value] of Object.entries(this.qb303DeviceData)) {
            if (value && value.info) {
                this.加载QB303设备(key, value);
            }
        }
        console.log('QB303设备数据加载完成');
    }
}

3. 添加强制刷新方法

forceRefreshQB303Devices() {
    console.log('强制刷新QB303设备显示...');
    
    // 清理现有的QB303设备图标
    for (let [key, value] of Object.entries(this.qb303DeviceData)) {
        if (value && value["deviceImage"]) {
            this.graphicLayer.removeGraphic(value["deviceImage"]);
            delete value["deviceImage"];
        }
    }
    
    // 重新创建所有QB303设备
    this.loadrQB303DeviceData();
    console.log('QB303设备刷新完成');
}

4. 添加图标路径方法

getQB303DeviceIcon() {
    return '/3dScreen/img/flyDevices.jpg';
}

🚀 修复后的功能特性

设备图标特性

✅ 使用BillboardEntity确保2D图标正确显示
✅ 图标缩放为0.1，适合地图显示
✅ 图标固定到地面(CLAMP_TO_GROUND)
✅ 支持旋转显示设备朝向
✅ 绿色标签显示设备名称
✅ 标签背景半透明黑色，便于阅读

交互功能

✅ 点击设备触发qb303DeviceClick事件
✅ 传递设备详细信息和位置数据
✅ 支持设备信息面板显示

数据兼容性

✅ 兼容data.info和data两种数据结构
✅ 支持设备位置更新
✅ 支持设备朝向更新
✅ 支持标签文本更新

🎯 现在请验证修复效果

步骤1：重新检查地图状态

checkMapStatus()

预期结果：

loadrQB303DeviceData 方法存在: function  ✅
forceRefreshQB303Devices 方法存在: function  ✅

步骤2：测试实时数据处理

testRealTimeQB303()

预期结果：

🗺️ 实时QB303数据处理完成，更新地图显示...
✅ 地图实例和QB303数据结构已就绪
📍 找到 1 个在线QB303设备，准备更新地图...
✅ 设备 dy04 数据已更新: [112.89433833333334, 28.206474523809526]
🎯 地图渲染方法已调用
开始加载QB303设备数据到地图...
加载QB303设备: dy04 {info: {...}}
加载QB303设备到地图: dy04 {info: {...}}
设备信息: {equipmentId: 'dy04', ...}
设备坐标: [112.89433833333334, 28.206474523809526, 200]
创建新的QB303设备图标: dy04 {...}
QB303设备 dy04 已添加到地图
设备位置: [112.89433833333334, 28.206474523809526, 200]
QB303设备数据加载完成

步骤3：验证地图显示

检查设备图标是否出现在湖南省
验证设备标签显示为"QB303-dy04"
测试点击设备图标的交互

步骤4：测试强制刷新

window.m3Data.forceRefreshQB303Devices()

🔧 核心修复点总结

1. 方法完整性

✅ 添加了所有缺失的QB303相关方法
✅ 方法间调用关系正确
✅ 错误处理和日志完善

2. 数据处理

✅ 兼容不同的数据结构格式
✅ 正确访问设备坐标和属性
✅ 支持设备状态更新

3. 地图渲染

✅ 使用正确的Mars3D图标类型
✅ 设置合适的图标样式和大小
✅ 添加设备标签和交互事件

4. 生命周期管理

✅ 支持设备创建、更新、删除
✅ 支持批量刷新和重新加载
✅ 内存管理和资源清理

📋 快速验证命令

// === 推荐验证顺序 ===
checkMapStatus()                // 1. 检查方法是否存在
testRealTimeQB303()             // 2. 测试完整流程
window.m3Data.forceRefreshQB303Devices()  // 3. 测试刷新功能

// === 调试命令 ===
console.log('QB303方法:', typeof window.m3Data.loadrQB303DeviceData);
console.log('设备数据:', window.m3Data.qb303DeviceData);
debugQB303Rendering();          // 检查渲染状态

🎉 修复完成

现在所有QB303相关的方法都已正确添加到aixiaorui.ts中：

✅ 加载QB303设备 - 核心设备图标创建方法
✅ loadrQB303DeviceData - 批量设备加载方法
✅ forceRefreshQB303Devices - 强制刷新方法
✅ getQB303DeviceIcon - 图标路径获取方法

请先执行 checkMapStatus() 确认方法已正确添加，然后执行 testRealTimeQB303() 验证实时WebSocket数据现在能否正确显示在地图上！🚁🗺️✨

6.8 KiB Raw Permalink Blame History Unescape Escape