diff --git a/docs/superpowers/specs/2026-08-25-monitor-globe-markers-design.md b/docs/superpowers/specs/2026-08-25-monitor-globe-markers-design.md index b0956be..89a0b73 100644 --- a/docs/superpowers/specs/2026-08-25-monitor-globe-markers-design.md +++ b/docs/superpowers/specs/2026-08-25-monitor-globe-markers-design.md @@ -1,47 +1,61 @@ # 监控页全球默认视角 + 地图点位重设计 日期:2026-08-25 +确认:2026-08-27 范围:`laic-frontend` 实时监控地图体验 -状态:待用户确认 spec +状态:已确认 ## 1. 背景与目标 当前问题: 1. 进入 `/monitor` 后相机会自动 `fit` 到设备范围,缺少「地球全景、中国居中」的总览感。 -2. 地图点位目前是 Mapbox `circle` 纯色圆点,机巢/无人机难以辨认;现有 `dock-marker.svg` / `drone-marker.svg` 也不够好看。 +2. 地图点位目前是 Mapbox `circle` 纯色圆点,机巢/无人机难以辨认。 +3. `MapLayer` 尚未开启 `projection: 'globe'`(`minZoom` 仍为 3)。 目标: -1. 进入实时监控默认展示 **真·全球全景**,地球投影,**中国居中**,机巢与无人机点位同时可见。 +1. 进入实时监控默认展示 **真·全球全景**(Mapbox globe 投影),**中国居中**,机巢与无人机点位同时可见。 2. **重新设计** 立体水滴形地图点位图标(机巢 / 无人机),状态可辨、选中有反馈。 -## 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'` | -| 中心 | 中国中部;优先 `APP_MAP_CENTER_LNG/LAT`,缺省约 `104.0, 35.0`(可与现有贵州中心折中:若 env 已配置则尊重 env,但默认 zoom 必须是全球级) | -| Zoom | 全球级约 `1.6–2.0`(建议默认 `1.8`);`minZoom` 维持现有 `1.5` 左右 | -| 进页行为 | **不再**在 `onMounted` / 首次无选中时自动 `fitAllMarkers()` | -| 点选后 | 飞到设备坐标,zoom ≥ 现有 `MAP_VIEW.detailZoom` | -| 取消选中 | 回到全球默认相机(中国居中 + 全球 zoom),而不是 fit 设备包围盒 | -| 设备更新 | 仅 `setData` 刷新点位,不因数据刷新改变相机 | +| 投影 | `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. 点位图标(重做) -## 3. 点位图标(重做) +### 4.1 风格 -### 3.1 风格 - -采用 **立体水滴标注**: +立体水滴标注;**保留现有文件名,重画覆盖**: - 机巢:蓝色水滴针 + 白色舱站/小屋剪影 - 无人机:青绿水滴针 + 白色四旋翼剪影 -- 阴影/轻微立体感(针尖落点清晰) -- 白描边保证深色影像底图上可读 - -状态表达(在同一套造型上区分): +- 阴影 / 轻微立体感;针尖落点清晰 +- 白描边保证深色影像底图可读 | 状态 | 表现 | |------|------| @@ -49,51 +63,62 @@ | mission | 偏飞行蓝,或外圈光晕加强 | | alarm | 红色针身 / 红描边 | | offline | 灰色针身,降低饱和 | -| selected | 放大(约 1.2–1.35×)+ 半透明光晕层 | +| 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`,文件保留以免引用断裂 -图例左下角文案保持:在线机巢 / 飞行中 / 告警 / 离线;颜色与点位状态色对齐。 +图例左下:在线机巢 / 飞行中 / 告警 / 离线;颜色与点位状态对齐。 -### 3.2 资源与加载 +### 4.2 图层 -- 新 SVG 放入 `public/assets/icons/`(覆盖或新增,例如 `dock-pin.svg` / `drone-pin.svg`,及按状态变体或单文件 + Mapbox 着色策略) -- 实现优先:**按类型两套基础图标** + 状态用 Mapbox `icon-color` / 多图切换;若 SVG 不适合 tint,则导出 `dock-{status}.png` 等预乘图(实现阶段二选一,以清晰为准) -- Monitor 图层从 `circle` 改为 `symbol`(可保留极淡 halo `circle` 仅用于选中光晕) -- 侧栏列表仍用现有 `dock.svg` / `drone.svg`,**本轮不改** +- 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) -### 3.3 交互 +### 4.3 交互 -- 点击图标:选中设备(现有 `select(id)`) -- 点击空白:清空选中,相机回全球默认 -- hover:cursor `pointer` -- 标签:名称 `symbol` text,远距离可 `minzoom` 限制,避免全球级字叠成一团(建议 label `minzoom ≥ 4`) +- 点击图标:`select(id)` +- 点击空白:清空选中 → overview +- hover:`canvas` cursor `pointer`(命中 symbol 时) +- 「查看全部」:回 overview -## 4. 架构落点 +## 5. 架构落点 | 文件 | 变更 | |------|------| -| `src/config/map.js` | 增加/调整全球默认 `overviewZoom`、默认中国中心常量 | -| `src/layout/MapLayer.vue` | 初始 `center/zoom` 对齐全球中国居中(若与业务 overview 共用) | -| `src/views/MonitorView/MonitorView.vue` | 去掉进页/清选中时的 `fitAllMarkers`;改为 `resetOverviewCamera()`;circle→symbol 点位 | -| `public/assets/icons/*` | 新水滴机巢/无人机点位资源 | +| `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 图层逻辑、侧栏图标。 +不改:`MapLayer` 单例、`commonRefs` / `mapHelper` 容器挪移、Tasks/Replay 业务图层逻辑、侧栏图标。 -## 5. 非目标 +## 6. 非目标 -- 不做独立 `/globe` 总览路由(本轮直接在 `/monitor` 默认全球) -- 不恢复工具条 `+/-` /「查看全部」按钮 +- 不做独立 `/globe` 总览路由 / Three.js / Cesium +- 不做 marker cluster - 不重做侧栏设备树图标 -- 不引入 Cesium / 新地图引擎 +- 不把 overview 中心绑到 env 贵州坐标 +- 不删「查看全部」按钮(只改行为) -## 6. 验收 +## 7. 验收 1. 登录后进 `/monitor`:地球全景、中国大致居中,可见机巢与无人机水滴点。 -2. 滚轮可缩放;点选飞向设备;取消选中回到全球中国居中。 -3. 机巢 / 无人机造型可一眼区分;告警/离线状态可辨;选中有放大或光晕。 -4. `npm run build` 通过;监控页无控制台地图初始化错误。 +2. 点选飞向设备;取消选中或点「查看全部」回到全球中国居中。 +3. 机巢 / 无人机造型可一眼区分;告警 / 离线可辨;选中有放大或光晕。 +4. 卫星 ↔ 地图切换后点位与绑定线仍在。 +5. `npm run build` 通过;监控页无地图初始化控制台错误。 -## 7. 风险 +## 8. 风险 -- 全球 zoom 下大量点重叠:可接受先重叠,后续再加聚合(本轮不做 cluster)。 -- SVG 在 Mapbox 中着色限制:必要时改为多状态静态图。 -- env 中心若偏贵州:全球视角仍应中国居中;实现时 overview 中心可与业务 detail 中心分离(overview 固定中国,detail 仍可用 env)。 +- 全球 zoom 下点重叠:本轮可接受,不做 cluster。 +- SVG → Mapbox image:优先栅格化/多状态静态 SVG 直接 `loadImage`;若着色受限,不依赖 `icon-color` tint。 +- 共用 globe 投影:Tasks 航线编辑需确认 `resize` + pitch0 下仍可点选;不在本轮改 Tasks 图层语义。 +- `setStyle` 会丢自定义 image:重建路径必须重新加载 pin 图。