|
|
# 摄像头图标重叠问题修复报告 🔧
|
|
|
|
|
|
## 问题描述
|
|
|
|
|
|
在摄像头图标更新时，没有清除之前的图标，导致地图上出现图标重叠的现象。
|
|
|
|
|
|
## 问题根源分析
|
|
|
|
|
|
### 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：自动配置时的视野扇形同步更新
|
|
|
```javascript
|
|
|
// 🔧 修复：同步更新视野扇形位置，避免图标重叠
|
|
|
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：手动配置时的视野扇形同步更新
|
|
|
```javascript
|
|
|
// 🔧 修复：手动配置时也要同步更新视野扇形
|
|
|
// 同步更新视野扇形
|
|
|
if (fixedCameraFOV) {
|
|
|
map.remove(fixedCameraFOV);
|
|
|
|
|
|
const newFOV = createGeographicSector(
|
|
|
lng, lat, heading, config.CAMERA_FOV,
|
|
|
100, '#2196F3'
|
|
|
);
|
|
|
map.add(newFOV);
|
|
|
fixedCameraFOV = newFOV;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
### ✅ 修复3：移动设备朝向标记的正确清除
|
|
|
```javascript
|
|
|
// 🔧 修复：正确移除旧的视野扇形标记，避免重叠
|
|
|
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：变量作用域调整
|
|
|
```javascript
|
|
|
// 将 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. **添加数据缓存**：为点击事件提供设备数据支持
|
|
|
|
|
|
### 🎯 修复后的效果
|
|
|
- **固定摄像头（电脑端）**：💻电脑图标 + 蓝色视野扇形
|
|
|
- **移动设备（移动端）**：🚁无人机图标 + 朝向箭头 + 橙色视野扇形
|
|
|
|
|
|
## 总结
|
|
|
|
|
|
通过这次修复，彻底解决了摄像头图标重叠的问题，确保地图上的标记状态与实际配置始终保持一致，提升了用户体验。同时解决了重复无人机图标的问题，让图标显示更加清晰和直观。 |
