From 1616cd9e667a575328ddbc5532ee4f495d0f590a Mon Sep 17 00:00:00 2001
From: xiaosi <2652281683@qq.com>
Date: Mon, 24 Aug 2026 16:45:41 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E7=90=83=E5=BD=A2=E6=80=BB=E8=A7=88/?=
 =?UTF-8?q?=E7=93=A6=E7=89=87=E4=B8=8A=E9=99=90/=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

覆盖高缩放天地图兜底、登录后地球仪机巢总览、机巢与无人机图标替换。
---
 .../2026-08-24-globe-tiles-icons-design.md    | 173 ++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-24-globe-tiles-icons-design.md

diff --git a/docs/superpowers/specs/2026-08-24-globe-tiles-icons-design.md b/docs/superpowers/specs/2026-08-24-globe-tiles-icons-design.md
new file mode 100644
index 0000000..aa7b003
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-24-globe-tiles-icons-design.md
@@ -0,0 +1,173 @@
+# 球形总览 / 高缩放瓦片 / 设备图标 设计
+
+日期：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
+
+---
+
+确认本设计后，再输出分步实现计划并开工。