简历

中国移动集团项目（2024.05 – 2024.09） ​

项目简介 ​

面向集团级网络资源管理和运行监控的三维可视化平台。基于地球场景展示集团、省分及区域网络资源，通过 3D 拓扑与 2D 逻辑拓扑做多层级查看和分析。

本人主要参与三维拓扑、2D 拓扑及拓扑聚合：地球与拓扑联动、下钻、线路高亮、告警展示和视图切换。

技术栈 ​

Vue 3 / JavaScript / ThingJS / Web 3D / 2D 拓扑 / 3D 拓扑 / 地球场景 / 拓扑布局算法 / 贝塞尔曲线 / 相机飞行 / ECharts

个人职责 ​

参与三维拓扑模块设计与开发；地球与 3D 拓扑联动；3D / 2D 拓扑构建、切换和数据绑定；设备、线路、标签和告警管理；3D 线路单击高亮、双击下钻和详情；2D 设备布局、线路绘制和复杂结构适配；专线、党政军、互联网专线等业务数据适配；相机飞行、视角保存 / 恢复和距离控制；视图切换时的场景销毁、事件解绑和状态清理；机房、区域、网络资源、分级保障等拓扑展示。独立开发「移动集团聚合功能」Demo，并把聚合和下钻迁到真实项目。

技术亮点 ​

  • 地球与拓扑联动：集团 / 省分 / 区域从地球下钻到局部拓扑；地球 ↔ 3D ↔ 2D 切换时分别保存和恢复相机位置、目标点、角度和距离。
  • 3D / 2D 互补：3D 看空间关系，2D 看层级和逻辑连接；双击 3D 线路进对应 2D，返回时恢复 3D，并保持业务线路和告警。
  • 按拓扑特征自动布局：用节点数、连接数、连接数标准差、双向 / 备用线路比例、中心节点等判断树状 / 链式 / 星型 / 复杂布局。
  • 复杂结构与平行线：邻接表算层级和坐标，同层控间距；同一对设备多条线做平行偏移，减少重叠。
  • 线路交互：单击高亮、双击下钻、按业务筛线、无关置灰、选中设备高亮关联线、空白取消；高亮时禁用置灰线 hover。
  • 相机距离自适应：近距出设备和完整标签，远距收标签，限制最小 / 最大距离，避免穿透或缩没。
  • 告警与生命周期：2D / 3D 告警同步；切换时清设备、线路、监听、标签、飞行任务、筛选状态和管理器引用。
  • 模块拆分：Topo3DManager、Topo2DManager、LineManager3D / 2D、DeviceManager2D、TopologyLayoutAlgorithm、CameraFlightManager、LineDetailModal、commonStore。

项目成果 ​

  • 做成地球总览 → 区域 3D 拓扑 → 2D 逻辑拓扑的多层级浏览，以及 3D 线路双击下钻并返回
  • 独立做聚合 Demo，验证后迁到真实项目
  • 自动识别并布局标准 / 链式 / 星型 / 复杂拓扑，覆盖多根、并行、环形、双向等结构
  • 线路高亮、关联筛选、置灰、详情和 2D / 3D 告警联动
  • 相机距离控制标签显隐；切换时销毁和事件清理，提升大场景稳定性
  • 沉淀可复用的 2D / 3D 拓扑管理器、布局算法和相机模块

可能会问的问题 ​

地球、3D 拓扑、2D 拓扑来回切，人会不会找不到刚才的位置？

地球 ↔ 3D ↔ 2D 切换时分别保存和恢复相机位置、目标点、角度和距离。2D 返回 3D 时恢复原 3D 视图，并保持当前业务线路和告警。

为什么要同时做 3D 和 2D？

3D 看空间关系，2D 看设备层级和逻辑连接。双击 3D 线路进对应 2D，按线路数据加载结构。

拓扑数据形状不一样，布局是手配的吗？

用节点数、连接数、连接数标准差、双向 / 备用线路比例、中心节点等判断树状 / 链式 / 星型 / 复杂布局，降低人工配布局。

同一对设备有多条专线，怎么避免画成一根？

按线路顺序和间距做平行偏移，多条线同时可见，减少重叠遮挡。

大拓扑缩到很远，标签会糊成一片吗？

按相机距离调设备和标签：近距出完整标签，远距收标签，并限制最小 / 最大距离，避免穿透或缩没。

切视图后事件还在、对象还在，怎么收？

退出或切换时统一清 2D / 3D 设备、线路、监听、标签、告警、飞行任务、筛选状态和管理器引用。