# 球形总览 / 高缩放瓦片 / 设备图标 设计

日期：2026-08-24  
范围：laic-frontend 地图体验三项联动改造  
状态：待用户确认

## 1. 背景与目标

当前问题与诉求：

1. **高缩放瓦片失败**：放大到一定层级后底图空白/花屏，影响监控与航线编辑体验。
2. **球形总览**：需要地球仪式界面，展示全部机巢分布；点击机巢后进入现有主界面（实时监控）。
3. **设备图标**：机巢与无人机图标需替换为更易辨认的专用图标（由实现侧设计，不依赖外部素材）。

成功标准：

- 放大超过天地图有效层级时，仍能看到清晰（放大的）底图，不再大片空白。
- 登录后可进入球形总览，一眼看到全部机巢；点击任一机巢进入 `/monitor` 并默认选中该机巢。
- 监控地图 marker、侧栏设备树等关键位置统一使用新的机巢/无人机图标。

## 2. 根因（瓦片）

实测天地图 `img_w`（Web 墨卡托影像）：

| Zoom | 结果 |
|------|------|
| ≤ 18 | 正常 JPEG 影像 |
| ≥ 19 | 返回空占位 PNG（近似灰白，无有效影像） |

现状：`MapLayer` 未设置 `maxAvailableZoom` / `maxZoom`，maptalks 默认可继续放大并请求 z19+，导致空白。

maptalks 已支持：

- `TileLayer.options.maxAvailableZoom`：超过该级别时使用父级瓦片放大显示
- `Map` 的 `minZoom` / `maxZoom`

## 3. 方案选型

### 3.1 高缩放瓦片

**采用：限制有效瓦片级别 + 允许视图略高缩放用父瓦片。**

- 瓦片层：`maxAvailableZoom: 18`（img + cia 均设置）
- 地图：`minZoom: 3`，`maxZoom: 20`（视图可略高于 18，由父瓦片覆盖）
- 业务飞向：设备点选/单点 fit 的目标 zoom 从硬编码 16 调整为不超过 18 的合理值（建议 16–17）
- 航线编辑地图若共用同一 `MapLayer`/同一底图配置，一并生效；若独立创建底图，复用同一配置函数

不采用：额外商业高清底图（成本与 token 另议）。

### 3.2 球形总览

**采用：独立球形总览页 + Three.js 轻量地球（方案 A）。**

| 方案 | 结论 |
|------|------|
| A. Three.js 轻量地球 | **采用**：真球形、包体可控、与现有 maptalks 主界面解耦 |
| B. Cesium | 过重，本阶段不引入 |
| C. maptalks pitch 伪地球 | 非真球，不满足「就是球形」 |

交互：

1. 登录成功默认进入 **球形总览**（`/globe`），不再直接 `/monitor`。
2. 根路径 `/` 与未知路径兜底改为指向 `/globe`（已登录）。
3. 总览展示全部**机巢**点位（名称 + 状态色）；无人机不作为总览主打点（避免与机巢重叠噪音）。
4. 点击机巢 → `router.push({ name: 'monitor', query: { deviceId: dock.id } })`，沿用现有 Monitor 选中逻辑。
5. 提供次要入口：「进入平面监控」→ `/monitor`（不带 deviceId）。
6. 侧栏保留「实时监控」；可增加「全局总览」菜单项指向 `/globe`，或总览页自带返回/进入主界面按钮。推荐：**侧栏增加「全局总览」**，与「实时监控」并列，避免用户找不到回来的路。
7. 总览页布局：全屏地球为主；左上品牌/标题；右上或底部机巢数量摘要；点击弹简单 tooltip（名称、状态、进入）。

技术要点：

- 依赖：`three`（仅总览页动态 import，避免拖慢主包）
- 地球：球体 + 纹理（优先程序化/静态可用纹理；若使用天地图影像拼全球纹理成本高，本阶段用简洁蓝色地球 + 经纬网格/大陆示意即可，**机巢点准确**优先于卫星贴图精度）
- 坐标：经纬度 → 球面笛卡尔；相机可旋转/缩放；限制过度穿模
- 数据：复用 `devicesStore.load()` 的 `docks`
- 无 token/无数据：友好空态，不白屏

### 3.3 机巢 / 无人机图标

**采用：项目内 SVG 资源 + 统一引用。**

资源建议：

- `public/assets/icons/dock.svg`（或 `src/assets/icons/`，与现有 public 静态资源风格一致即可）
- `public/assets/icons/drone.svg`
- 可选：`dock-offline.svg` / `drone-alarm.svg` 若单色 + CSS/滤镜不够用；优先 **单色 SVG + 状态色叠加**，减少文件数

使用面（本阶段必改）：

1. 监控地图 maptalks marker（`markerFile` 或 canvas/SVG symbol，替代纯圆点；保留状态色描边/光晕）
2. 监控侧栏设备树机巢/无人机 glyph
3. 若 Devices 列表使用同类 `#i-home` / `#i-plane` 作为设备类型主识别，一并替换为新图标（命令按钮里的语义图标可暂留通用 SVG symbol，避免范围膨胀）

视觉方向：

- 机巢：俯视舱体/停机坪，稳重方圆结构，可识别「巢」
- 无人机：简洁多旋翼或侧视固定翼剪影，可识别「机」
- 与平台蓝（`#2b79c8` 系）协调；选中态加大、白边或光晕
- 地图上尺寸约 28–36px，避免遮挡过多底图

## 4. 架构与数据流

```text
Login 成功
  → /globe (GlobeView)
       devicesStore.load()
       渲染球面 + docks[]
       click dock → /monitor?deviceId=xxx

/monitor (现有)
  MapLayer (共享底图，已限制 maxAvailableZoom)
  读取 query.deviceId 选中机巢
  新图标 marker + 侧栏

地图配置 src/config/map.js
  createTiandituLayerOptions(tk) 统一带上 maxAvailableZoom 等
  MapLayer / 任何自建 TileLayer 只消费该配置
```

路由变更要点：

- 新增 `globe` 路由；可挂在 `MainContainer` 内（保留侧栏）或全屏独立布局。  
  **推荐：独立全屏布局（无侧栏）**，更接近「地球仪总览」沉浸感；页内按钮进入主界面后再出现侧栏。  
  若产品希望侧栏始终在，可改为 MainContainer 子路由——实现时以「全屏总览」为默认。
- `redirect: '/globe'`
- 登录/注册成功 `router.push('/globe')`
- 权限失败回退：仍可用 `/monitor` 或 `/globe`，统一改为 `/globe` 更一致

## 5. 错误处理

| 场景 | 处理 |
|------|------|
| 无天地图 token | 平面地图保持现有提示；球形总览仍可显示无影像地球 + 点位 |
| 机巢无坐标 | 总览不打点，列表/计数中标注「无位置」可选 |
| 高缩放 | 父瓦片放大，不报错、不请求无效 z19+ 影像 URL（由 maxAvailableZoom 抑制） |
| WebGL 不可用 | 总览页降级文案 +「进入平面监控」按钮 |

## 6. 非目标（本阶段不做）

- Cesium / 完整全球影像镶嵌
- 球面上直接遥控无人机
- 替换所有业务页装饰性 `#i-home` / `#i-plane` 命令图标
- 改后端接口

## 7. 文件级改动预期

| 区域 | 文件 |
|------|------|
| 瓦片配置 | `src/config/map.js`、`src/layout/MapLayer.vue` |
| 飞向缩放 | `MonitorView.vue`、`ReplayView.vue`、必要时 `TasksView.vue` |
| 球形总览 | 新 `src/views/GlobeView/GlobeView.vue`（+ 小组件可选） |
| 路由/登录 | `src/router/index.js`、`LoginView.vue` |
| 图标 | `public/assets/icons/*.svg`、Monitor（及 Devices 类型图标） |
| 依赖 | `package.json` 增加 `three` |

## 8. 验证

1. 监控地图连续放大到 max：底图仍在，无大片空白；网络面板不再密集出现无意义的 z19+ 失败瓦片（或明显减少）。
2. 登录 → 球形总览可见机巢点；点击 → 监控页选中对应机巢。
3. 总览「进入平面监控」可用；侧栏/按钮可回到总览（若做了入口）。
4. 机巢/无人机在地图与侧栏图标可区分，选中/离线/告警色仍可读。
5. `npm run build` 通过。

## 9. 实现顺序建议

1. 瓦片 `maxAvailableZoom` + map maxZoom + 业务 zoom 上限（立刻改善体验）
2. SVG 图标 + Monitor marker/侧栏替换
3. GlobeView + three + 路由/登录默认入口
4. 联调与 build

---

确认本设计后，再输出分步实现计划并开工。