laic-frontend/docs/superpowers/specs/2026-08-25-monitor-globe-markers-design.md

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

日期：2026-08-25
确认：2026-08-27
范围：laic-frontend 实时监控地图体验
状态：已确认

1. 背景与目标

当前问题：

1. 进入 /monitor 后相机会自动 fit 到设备范围，缺少「地球全景、中国居中」的总览感。
2. 地图点位目前是 Mapbox circle 纯色圆点，机巢/无人机难以辨认。
3. MapLayer 尚未开启 projection: 'globe'（minZoom 仍为 3）。

目标：

1. 进入实时监控默认展示 真·全球全景（Mapbox globe 投影），中国居中，机巢与无人机点位同时可见。
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'
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. 点位图标（重做）

4.1 风格

立体水滴标注；保留现有文件名，重画覆盖：

• 机巢：蓝色水滴针 + 白色舱站/小屋剪影
• 无人机：青绿水滴针 + 白色四旋翼剪影
• 阴影 / 轻微立体感；针尖落点清晰
• 白描边保证深色影像底图可读

状态	表现
online	主色正常（机巢蓝 / 无人机青绿）
mission	偏飞行蓝，或外圈光晕加强
alarm	红色针身 / 红描边
offline	灰色针身，降低饱和
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，文件保留以免引用断裂

图例左下：在线机巢 / 飞行中 / 告警 / 离线；颜色与点位状态对齐。

4.2 图层

• 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）

4.3 交互

• 点击图标：select(id)
• 点击空白：清空选中 → overview
• hover：canvas cursor pointer（命中 symbol 时）
• 「查看全部」：回 overview

5. 架构落点

文件	变更
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 业务图层逻辑、侧栏图标。

6. 非目标

• 不做独立 /globe 总览路由 / Three.js / Cesium
• 不做 marker cluster
• 不重做侧栏设备树图标
• 不把 overview 中心绑到 env 贵州坐标
• 不删「查看全部」按钮（只改行为）

7. 验收

1. 登录后进 /monitor：地球全景、中国大致居中，可见机巢与无人机水滴点。
2. 点选飞向设备；取消选中或点「查看全部」回到全球中国居中。
3. 机巢 / 无人机造型可一眼区分；告警 / 离线可辨；选中有放大或光晕。
4. 卫星 ↔ 地图切换后点位与绑定线仍在。
5. npm run build 通过；监控页无地图初始化控制台错误。

8. 风险

• 全球 zoom 下点重叠：本轮可接受，不做 cluster。
• SVG → Mapbox image：优先栅格化/多状态静态 SVG 直接 loadImage；若着色受限，不依赖 icon-color tint。
• 共用 globe 投影：Tasks 航线编辑需确认 resize + pitch0 下仍可点选；不在本轮改 Tasks 图层语义。
• setStyle 会丢自定义 image：重建路径必须重新加载 pin 图。