1 changed files with 99 additions and 0 deletions
@ -0,0 +1,99 @@ |
|||
# 监控页全球默认视角 + 地图点位重设计 |
|||
|
|||
日期:2026-08-25 |
|||
范围:`laic-frontend` 实时监控地图体验 |
|||
状态:待用户确认 spec |
|||
|
|||
## 1. 背景与目标 |
|||
|
|||
当前问题: |
|||
|
|||
1. 进入 `/monitor` 后相机会自动 `fit` 到设备范围,缺少「地球全景、中国居中」的总览感。 |
|||
2. 地图点位目前是 Mapbox `circle` 纯色圆点,机巢/无人机难以辨认;现有 `dock-marker.svg` / `drone-marker.svg` 也不够好看。 |
|||
|
|||
目标: |
|||
|
|||
1. 进入实时监控默认展示 **真·全球全景**,地球投影,**中国居中**,机巢与无人机点位同时可见。 |
|||
2. **重新设计** 立体水滴形地图点位图标(机巢 / 无人机),状态可辨、选中有反馈。 |
|||
|
|||
## 2. 默认相机 |
|||
|
|||
| 项 | 约定 | |
|||
|----|------| |
|||
| 投影 | 保持 `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` 刷新点位,不因数据刷新改变相机 | |
|||
|
|||
「查看全部」工具条已移除:清空选中即恢复全球默认视角,足够覆盖原「看全局」诉求。 |
|||
|
|||
## 3. 点位图标(重做) |
|||
|
|||
### 3.1 风格 |
|||
|
|||
采用 **立体水滴标注**: |
|||
|
|||
- 机巢:蓝色水滴针 + 白色舱站/小屋剪影 |
|||
- 无人机:青绿水滴针 + 白色四旋翼剪影 |
|||
- 阴影/轻微立体感(针尖落点清晰) |
|||
- 白描边保证深色影像底图上可读 |
|||
|
|||
状态表达(在同一套造型上区分): |
|||
|
|||
| 状态 | 表现 | |
|||
|------|------| |
|||
| online | 主色正常(机巢蓝 / 无人机青绿) | |
|||
| mission | 偏飞行蓝,或外圈光晕加强 | |
|||
| alarm | 红色针身 / 红描边 | |
|||
| offline | 灰色针身,降低饱和 | |
|||
| selected | 放大(约 1.2–1.35×)+ 半透明光晕层 | |
|||
|
|||
图例左下角文案保持:在线机巢 / 飞行中 / 告警 / 离线;颜色与点位状态色对齐。 |
|||
|
|||
### 3.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`,**本轮不改** |
|||
|
|||
### 3.3 交互 |
|||
|
|||
- 点击图标:选中设备(现有 `select(id)`) |
|||
- 点击空白:清空选中,相机回全球默认 |
|||
- hover:cursor `pointer` |
|||
- 标签:名称 `symbol` text,远距离可 `minzoom` 限制,避免全球级字叠成一团(建议 label `minzoom ≥ 4`) |
|||
|
|||
## 4. 架构落点 |
|||
|
|||
| 文件 | 变更 | |
|||
|------|------| |
|||
| `src/config/map.js` | 增加/调整全球默认 `overviewZoom`、默认中国中心常量 | |
|||
| `src/layout/MapLayer.vue` | 初始 `center/zoom` 对齐全球中国居中(若与业务 overview 共用) | |
|||
| `src/views/MonitorView/MonitorView.vue` | 去掉进页/清选中时的 `fitAllMarkers`;改为 `resetOverviewCamera()`;circle→symbol 点位 | |
|||
| `public/assets/icons/*` | 新水滴机巢/无人机点位资源 | |
|||
|
|||
不改:`MapLayer` 单例、`commonRefs`/`mapHelper` 容器挪移、Tasks/Replay 图层逻辑、侧栏图标。 |
|||
|
|||
## 5. 非目标 |
|||
|
|||
- 不做独立 `/globe` 总览路由(本轮直接在 `/monitor` 默认全球) |
|||
- 不恢复工具条 `+/-` /「查看全部」按钮 |
|||
- 不重做侧栏设备树图标 |
|||
- 不引入 Cesium / 新地图引擎 |
|||
|
|||
## 6. 验收 |
|||
|
|||
1. 登录后进 `/monitor`:地球全景、中国大致居中,可见机巢与无人机水滴点。 |
|||
2. 滚轮可缩放;点选飞向设备;取消选中回到全球中国居中。 |
|||
3. 机巢 / 无人机造型可一眼区分;告警/离线状态可辨;选中有放大或光晕。 |
|||
4. `npm run build` 通过;监控页无控制台地图初始化错误。 |
|||
|
|||
## 7. 风险 |
|||
|
|||
- 全球 zoom 下大量点重叠:可接受先重叠,后续再加聚合(本轮不做 cluster)。 |
|||
- SVG 在 Mapbox 中着色限制:必要时改为多状态静态图。 |
|||
- env 中心若偏贵州:全球视角仍应中国居中;实现时 overview 中心可与业务 detail 中心分离(overview 固定中国,detail 仍可用 env)。 |
|||
Loading…
Reference in new issue