7.6 KiB

Raw Blame History

球形总览 / 高缩放瓦片 / 设备图标设计

日期：2026-08-24
范围：laic-frontend 地图体验三项联动改造
状态：待用户确认

1. 背景与目标

当前问题与诉求：

高缩放瓦片失败：放大到一定层级后底图空白/花屏，影响监控与航线编辑体验。
球形总览：需要地球仪式界面，展示全部机巢分布；点击机巢后进入现有主界面（实时监控）。
设备图标：机巢与无人机图标需替换为更易辨认的专用图标（由实现侧设计，不依赖外部素材）。

成功标准：

放大超过天地图有效层级时，仍能看到清晰（放大的）底图，不再大片空白。
登录后可进入球形总览，一眼看到全部机巢；点击任一机巢进入 /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 伪地球	非真球，不满足「就是球形」

交互：

登录成功默认进入 球形总览（/globe），不再直接 /monitor。
根路径 / 与未知路径兜底改为指向 /globe（已登录）。
总览展示全部机巢点位（名称 + 状态色）；无人机不作为总览主打点（避免与机巢重叠噪音）。
点击机巢 → router.push({ name: 'monitor', query: { deviceId: dock.id } })，沿用现有 Monitor 选中逻辑。
提供次要入口：「进入平面监控」→ /monitor（不带 deviceId）。
侧栏保留「实时监控」；可增加「全局总览」菜单项指向 /globe，或总览页自带返回/进入主界面按钮。推荐：侧栏增加「全局总览」，与「实时监控」并列，避免用户找不到回来的路。
总览页布局：全屏地球为主；左上品牌/标题；右上或底部机巢数量摘要；点击弹简单 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 + 状态色叠加，减少文件数

使用面（本阶段必改）：

监控地图 maptalks marker（markerFile 或 canvas/SVG symbol，替代纯圆点；保留状态色描边/光晕）
监控侧栏设备树机巢/无人机 glyph
若 Devices 列表使用同类 #i-home / #i-plane 作为设备类型主识别，一并替换为新图标（命令按钮里的语义图标可暂留通用 SVG symbol，避免范围膨胀）

视觉方向：

机巢：俯视舱体/停机坪，稳重方圆结构，可识别「巢」
无人机：简洁多旋翼或侧视固定翼剪影，可识别「机」
与平台蓝（#2b79c8 系）协调；选中态加大、白边或光晕
地图上尺寸约 28–36px，避免遮挡过多底图

4. 架构与数据流

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

监控地图连续放大到 max：底图仍在，无大片空白；网络面板不再密集出现无意义的 z19+ 失败瓦片（或明显减少）。
登录 → 球形总览可见机巢点；点击 → 监控页选中对应机巢。
总览「进入平面监控」可用；侧栏/按钮可回到总览（若做了入口）。
机巢/无人机在地图与侧栏图标可区分，选中/离线/告警色仍可读。
npm run build 通过。

9. 实现顺序建议

瓦片 maxAvailableZoom + map maxZoom + 业务 zoom 上限（立刻改善体验）
SVG 图标 + Monitor marker/侧栏替换
GlobeView + three + 路由/登录默认入口
联调与 build

确认本设计后，再输出分步实现计划并开工。

7.6 KiB Raw Blame History

球形总览 / 高缩放瓦片 / 设备图标 设计