# 地图动态加载功能说明

## 功能概述
为了提升用户体验和性能，地图组件现在支持动态加载功能。当用户拖动或缩放地图时，系统会自动更新显示在当前可视区域内的设备标记。

## 主要特性

### 🎯 智能过滤
- 只显示当前地图可视区域内的设备标记
- 自动过滤掉视野外的设备，减少渲染负担
- 提升大量设备数据的显示性能

### 🔄 实时更新
- 监听地图拖动事件（`dragstart` / `dragend`）
- 监听地图缩放事件（`zoomend`）
- 实时计算并更新可见设备列表

### ⚡ 性能优化
- 使用防抖机制（300ms），避免频繁计算
- 减少DOM元素数量，提升渲染性能
- 智能的边界检测算法

### 🎨 视觉反馈
- 拖动时显示加载提示
- 控制台输出可见设备数量统计
- 流畅的用户体验

## 技术实现

### 核心数据结构
```javascript
const devicePoints = ref([])        // 所有设备数据
const visibleDevicePoints = ref([]) // 当前可见区域的设备数据
const mapInstance = ref(null)       // 地图实例
const isDragging = ref(false)       // 拖动状态
```

### 边界检测算法
```javascript
const isDeviceInViewport = (device, bounds) => {
  const { sw, ne } = bounds
  return device.lng >= sw.lng && 
         device.lng <= ne.lng && 
         device.lat >= sw.lat && 
         device.lat <= ne.lat
}
```

### 防抖优化
```javascript
const debouncedUpdateVisibleDevices = debounce(() => {
  updateVisibleDevices()
  isDragging.value = false
}, 300)
```

### 事件监听
```javascript
// 拖动事件
map.addEventListener('dragstart', () => {
  isDragging.value = true
})

map.addEventListener('dragend', () => {
  debouncedUpdateVisibleDevices()
})

// 缩放事件
map.addEventListener('zoomend', () => {
  debouncedUpdateVisibleDevices()
})
```

## 用户体验

### 拖动地图时
1. 显示 "正在加载当前区域设备..." 提示
2. 300ms 后自动更新可见设备标记
3. 控制台显示过滤统计信息

### 缩放地图时
1. 自动重新计算可视区域
2. 更新设备标记显示
3. 保持流畅的交互体验

## 性能优势

### 渲染优化
- **减少DOM元素**: 只渲染可见区域的设备标记
- **提升响应速度**: 避免渲染数百个不可见的标记
- **内存使用**: 降低浏览器内存占用

### 交互优化
- **防抖机制**: 避免拖动过程中的频繁计算
- **异步处理**: 不阻塞用户交互
- **智能更新**: 只在必要时重新计算

## 调试信息

开发模式下，控制台会输出以下信息：
```
地图开始拖动
地图拖动结束，更新可见设备
可视区域内设备数量: 5/50
```

## 配置参数

### 防抖延迟
```javascript
const debouncedUpdateVisibleDevices = debounce(updateFunction, 300) // 300ms
```

### 边界检测精度
系统使用百度地图的 `getBounds()` API 获取精确的地图边界：
- `bounds.getSouthWest()` - 西南角坐标
- `bounds.getNorthEast()` - 东北角坐标

## 兼容性说明

- ✅ 兼容所有现代浏览器
- ✅ 支持移动端触摸拖动
- ✅ 自动适配不同屏幕尺寸
- ✅ 向后兼容原有功能

## 未来扩展

### 可能的优化方向
1. **服务端过滤**: 支持基于地理边界的API查询
2. **聚合显示**: 设备密度高时自动聚合显示
3. **分层加载**: 根据缩放级别加载不同详细程度的数据
4. **缓存机制**: 缓存已加载区域的数据
