Software_Architecture/distance-judgement/CAMERA_ICON_OVERLAP_FIX.md

摄像头图标重叠问题修复报告 🔧

问题描述

在摄像头图标更新时，没有清除之前的图标，导致地图上出现图标重叠的现象。

问题根源分析

1. 固定摄像头视野扇形重叠

• 问题位置: src/web_server.py 第3730行附近
• 原因: 摄像头位置更新时，只更新了cameraMarker的位置，但没有同步更新fixedCameraFOV视野扇形
• 表现: 旧的视野扇形仍然显示在原位置，新的视野扇形在新位置，造成重叠

2. 移动设备朝向标记重叠

• 问题位置: src/web_server.py 第2491行附近
• 原因: 移动设备朝向更新时，orientationMarker是复合对象（包含deviceMarker和viewSector），但只简单调用了map.remove()
• 表现: 设备标记和视野扇形没有被完全清除，导致重叠

3. 变量作用域问题

• 问题位置: src/web_server.py 第1647行
• 原因: fixedCameraFOV使用const声明，无法在其他函数中重新赋值
• 影响: 摄像头位置更新函数无法更新全局视野扇形引用

修复内容

✅ 修复1：自动配置时的视野扇形同步更新

// 🔧 修复：同步更新视野扇形位置，避免图标重叠
if (fixedCameraFOV) {
    // 移除旧的视野扇形
    map.remove(fixedCameraFOV);
    
    // 重新创建视野扇形在新位置
    const newFOV = createGeographicSector(
        lng, lat, 
        result.data.camera_heading || config.CAMERA_HEADING, 
        config.CAMERA_FOV, 
        100,  // 100米检测范围
        '#2196F3'  // 蓝色，与固定摄像头标记颜色匹配
    );
    map.add(newFOV);
    
    // 更新全局变量引用
    fixedCameraFOV = newFOV;
}

✅ 修复2：手动配置时的视野扇形同步更新

// 🔧 修复：手动配置时也要同步更新视野扇形
// 同步更新视野扇形
if (fixedCameraFOV) {
    map.remove(fixedCameraFOV);
    
    const newFOV = createGeographicSector(
        lng, lat, heading, config.CAMERA_FOV, 
        100, '#2196F3'
    );
    map.add(newFOV);
    fixedCameraFOV = newFOV;
}

✅ 修复3：移动设备朝向标记的正确清除

// 🔧 修复：正确移除旧的视野扇形标记，避免重叠
if (mobileDeviceMarkers[deviceId].orientationMarker) {
    // orientationMarker是一个复合对象，包含deviceMarker和viewSector
    const oldOrientation = mobileDeviceMarkers[deviceId].orientationMarker;
    if (oldOrientation.deviceMarker) {
        map.remove(oldOrientation.deviceMarker);
    }
    if (oldOrientation.viewSector) {
        map.remove(oldOrientation.viewSector);
    }
}

✅ 修复4：变量作用域调整

// 将 const 改为 var，允许重新赋值
var fixedCameraFOV = createGeographicSector(...);

测试验证

修复后，以下操作不再出现图标重叠：

1. 自动配置摄像头位置 - 视野扇形会同步移动到新位置
2. 手动配置摄像头位置 - 视野扇形会同步更新位置和朝向
3. 移动设备朝向更新 - 旧的设备标记和视野扇形会被完全清除
4. 摄像头朝向变更 - 视野扇形会反映新的朝向角度

影响范围

✅ 已修复的功能:

• 固定摄像头位置更新
• 固定摄像头朝向更新
• 移动设备位置更新
• 移动设备朝向更新
• 手动配置摄像头

✅ 无影响的功能:

• 人员检测标记更新（原本就有正确的清除逻辑）
• 远程设备标记更新（原本就有正确的清除逻辑）
• 其他地图功能

技术细节

• 修改文件: src/web_server.py
• 修改行数: 约15行代码修改
• 兼容性: 完全向后兼容，不影响现有功能
• 性能影响: 无负面影响，实际上减少了地图上的冗余元素

📝 补充修复：重复无人机图标问题

问题描述

用户反映地图上出现了2个无人机图标，但应该只有1个无人机图标和1个电脑图标。

根源分析

移动设备同时显示了两个独立的🚁标记：

• locationMarker：GPS位置标记
• orientationMarker：朝向标记（包含视野扇形）

✅ 修复方案

1. 移除重复的位置标记：删除独立的locationMarker
2. 合并功能到朝向标记：朝向标记同时承担位置和朝向显示
3. 更新清除逻辑：移除对locationMarker的引用
4. 添加数据缓存：为点击事件提供设备数据支持

🎯 修复后的效果

• 固定摄像头（电脑端）：💻电脑图标 + 蓝色视野扇形
• 移动设备（移动端）：🚁无人机图标 + 朝向箭头 + 橙色视野扇形

总结

通过这次修复，彻底解决了摄像头图标重叠的问题，确保地图上的标记状态与实际配置始终保持一致，提升了用户体验。同时解决了重复无人机图标的问题，让图标显示更加清晰和直观。