4.6 KiB

Raw Blame History

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

日期：2026-08-25
范围：laic-frontend 实时监控地图体验
状态：待用户确认 spec

1. 背景与目标

当前问题：

进入 /monitor 后相机会自动 fit 到设备范围，缺少「地球全景、中国居中」的总览感。
地图点位目前是 Mapbox circle 纯色圆点，机巢/无人机难以辨认；现有 dock-marker.svg / drone-marker.svg 也不够好看。

目标：

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

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. 验收

登录后进 /monitor：地球全景、中国大致居中，可见机巢与无人机水滴点。
滚轮可缩放；点选飞向设备；取消选中回到全球中国居中。
机巢 / 无人机造型可一眼区分；告警/离线状态可辨；选中有放大或光晕。
npm run build 通过；监控页无控制台地图初始化错误。

7. 风险

全球 zoom 下大量点重叠：可接受先重叠，后续再加聚合（本轮不做 cluster）。
SVG 在 Mapbox 中着色限制：必要时改为多状态静态图。
env 中心若偏贵州：全球视角仍应中国居中；实现时 overview 中心可与业务 detail 中心分离（overview 固定中国，detail 仍可用 env）。