xiaosi
4 weeks ago
1 changed files with 173 additions and 0 deletions
@ -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 |
|||
|
|||
--- |
|||
|
|||
确认本设计后，再输出分步实现计划并开工。 |
|||
Loading…
Reference in new issue