# 监控页全球默认视角 + 地图点位重设计

日期：2026-08-25  
确认：2026-08-27  
范围：`laic-frontend` 实时监控地图体验  
状态：已确认

## 1. 背景与目标

当前问题：

1. 进入 `/monitor` 后相机会自动 `fit` 到设备范围，缺少「地球全景、中国居中」的总览感。
2. 地图点位目前是 Mapbox `circle` 纯色圆点，机巢/无人机难以辨认。
3. `MapLayer` 尚未开启 `projection: 'globe'`（`minZoom` 仍为 3）。

目标：

1. 进入实时监控默认展示 **真·全球全景**（Mapbox globe 投影），**中国居中**，机巢与无人机点位同时可见。
2. **重新设计** 立体水滴形地图点位图标（机巢 / 无人机），状态可辨、选中有反馈。

## 2. 方案

采用：**MapLayer 统一开 globe + Monitor overview/symbol**。

- `MapLayer`：`projection: 'globe'`，`minZoom: 1.5`；初始相机对齐 overview。
- Monitor：默认 / 清选中 /「查看全部」回 overview；点选飞 detail。
- 点位：重画 `dock-pin-*.svg` / `drone-pin-*.svg`，Monitor `circle` → `symbol`。
- Tasks / Replay 共用 globe 投影；编辑时仍 `pitch = 0`（2D），不单独切回 mercator。

不采用：进出 Monitor 反复 `setProjection`；不采用独立 `/globe` + Three.js。

## 3. 默认相机

| 项 | 约定 |
|----|------|
| 投影 | `MapLayer`：`projection: 'globe'` |
| Overview 中心 | **固定中国中部** ≈ `[104.0, 35.0]`，**不跟** env 贵州中心 |
| Overview zoom | `1.8`（全球级；允许 `1.6–2.0`） |
| `minZoom` | `1.5` |
| Detail 中心/业务中心 | 仍可用 env `APP_MAP_CENTER_*`（点选飞设备坐标，不依赖 overview 中心） |
| Detail zoom | 现有约 `16`（`MAP_VIEW.detailZoom` 或等价常量） |
| 进页 | **不再** `fitAllMarkers()`；无 `deviceId` 时 `resetOverviewCamera()` |
| 点选 | `easeTo` 设备坐标，zoom ≥ detailZoom |
| 取消选中 | `resetOverviewCamera()`（中国居中 + overview zoom），**不是** fit 设备包围盒 |
| 「查看全部」按钮 | **保留**；行为改为 `resetOverviewCamera()`（有选中先清选中） |
| 深链 `?deviceId=` | 选中该设备并飞 detail，不先闪 overview 再飞（实现时可直接 detail） |
| 设备更新 | 仅 GeoJSON `setData`，不因刷新改相机 |

## 4. 点位图标（重做）

### 4.1 风格

立体水滴标注；**保留现有文件名，重画覆盖**：

- 机巢：蓝色水滴针 + 白色舱站/小屋剪影
- 无人机：青绿水滴针 + 白色四旋翼剪影
- 阴影 / 轻微立体感；针尖落点清晰
- 白描边保证深色影像底图可读

| 状态 | 表现 |
|------|------|
| online | 主色正常（机巢蓝 / 无人机青绿） |
| mission | 偏飞行蓝，或外圈光晕加强 |
| alarm | 红色针身 / 红描边 |
| offline | 灰色针身，降低饱和 |
| selected | 放大约 `1.25×` + 可选半透明光晕 `circle` |

资源：

- `public/assets/icons/dock-pin-{online,mission,alarm,offline,pending}.svg`
- `public/assets/icons/drone-pin-{online,mission,alarm,offline,pending}.svg`
- `pending`：无独立业务态时视觉可对齐 `online`，文件保留以免引用断裂

图例左下：在线机巢 / 飞行中 / 告警 / 离线；颜色与点位状态对齐。

### 4.2 图层

- Monitor 主点位：`circle` → `symbol`；`icon-image` 按 `kind + statusClass` 选择已 `loadImage` 的 pin
- 可选极淡 halo `circle` 仅用于 selected
- 名称 `symbol` text：`minzoom ≥ 4`，避免全球级字叠成一团
- 绑定虚线（机巢 ↔ 飞行中无人机）保留
- 侧栏 `dock.svg` / `drone.svg` **本轮不改**
- `setStyle`（卫星/地图）后必须在 `style.load` 重新 `loadImage`（若需）并重建 symbol / 绑定线图层（沿用现有 pending style handler）

### 4.3 交互

- 点击图标：`select(id)`
- 点击空白：清空选中 → overview
- hover：`canvas` cursor `pointer`（命中 symbol 时）
- 「查看全部」：回 overview

## 5. 架构落点

| 文件 | 变更 |
|------|------|
| `src/config/map.js` | 导出 `MAP_OVERVIEW`（center/zoom）、`detailZoom`（或 `MAP_VIEW`） |
| `src/layout/MapLayer.vue` | `projection: 'globe'`、`minZoom: 1.5`、初始 center/zoom = overview |
| `src/views/MonitorView/MonitorView.vue` | `resetOverviewCamera`；去掉进页/清选中 `fitAllMarkers`；circle→symbol；fitAll 按钮改 overview |
| `public/assets/icons/dock-pin-*.svg` / `drone-pin-*.svg` | 重画覆盖 |

不改：`MapLayer` 单例、`commonRefs` / `mapHelper` 容器挪移、Tasks/Replay 业务图层逻辑、侧栏图标。

## 6. 非目标

- 不做独立 `/globe` 总览路由 / Three.js / Cesium
- 不做 marker cluster
- 不重做侧栏设备树图标
- 不把 overview 中心绑到 env 贵州坐标
- 不删「查看全部」按钮（只改行为）

## 7. 验收

1. 登录后进 `/monitor`：地球全景、中国大致居中，可见机巢与无人机水滴点。
2. 点选飞向设备；取消选中或点「查看全部」回到全球中国居中。
3. 机巢 / 无人机造型可一眼区分；告警 / 离线可辨；选中有放大或光晕。
4. 卫星 ↔ 地图切换后点位与绑定线仍在。
5. `npm run build` 通过；监控页无地图初始化控制台错误。

## 8. 风险

- 全球 zoom 下点重叠：本轮可接受，不做 cluster。
- SVG → Mapbox image：优先栅格化/多状态静态 SVG 直接 `loadImage`；若着色受限，不依赖 `icon-color` tint。
- 共用 globe 投影：Tasks 航线编辑需确认 `resize` + pitch0 下仍可点选；不在本轮改 Tasks 图层语义。
- `setStyle` 会丢自定义 image：重建路径必须重新加载 pin 图。