基于图扑 HT 实践的拓扑自动布局与力导向布局

技术方案概述在 Web 工控组态、网络拓扑、数字孪生可视化项目中设备节点与连线的自动排布是高频开发需求。基于 HT 前端组件库可一站式完成 2D 组态图纸、3D 空间拓扑、GIS 地图组网的布局能力开发依托内置布局模块实现节点自动排布适配电力系统图、化工工艺流程图、机房设备组网、全域物联网基站等多类业务场景。整套可视化体系以 HT DataModel 作为统一数据容器2D 画布 GraphView、三维画布 Graph3dView 共享同一套数据结构业务数据一次构建即可分别输出平面图纸、立体孪生场景、地图拓扑视图大幅降低多端视图的数据适配开发成本。AutoLayout 规则自动布局开发实现基础 API 与初始化逻辑自动布局核心实现类为ht.layout.AutoLayout配套布局脚本随 HT 核心库配套提供在 ht.js 加载完成后引入对应布局脚本即可初始化。构造函数支持传入 DataModel 数据容器、2D/3D 画布实例两类入参同时可传入配置项统一控制节点间距配置项参数包含全局间距 gap、横向间距 hgap、纵向间距 vgap用于统一控制布局完成后节点间留白距离。原生内置多种成熟布局算法可按需切换适配不同业务结构circular 圆形布局hierarchical 层次树形布局towardnorth/towardsouth/towardeast/towardwest 定向流向布局symmetric 对称布局定向布局适合存在单向流转逻辑的工艺流程、层级设备架构层次布局多用于上下级从属关系清晰的树形拓扑。2D工艺拓扑完整开发流程以工业 PFD 工艺流程图开发为例采用 towardeast 从左至右定向布局实现物料流向排布完整开发流程如下初始化数据模型与画布容器DataModel 承载所有节点、连线、文本图元GraphView 绑定 DOM 容器完成画布挂载初始化布局实例执行批量自动排布批量生成节点与连线时仅维护业务关联关系无需手动定义坐标由布局算法自动完成初始位置分配。业务节点坐标精细化调整标准化算法布局仅保证结构规整复杂工艺场景存在多分支管线交叉、关键设备特殊定位需求可通过节点坐标 API 手动修正位置管线样式定制通过图元样式接口修改连线形态、粗细、圆角、配色替换默认直线样式还原工业管道视觉效果补充文本标注图元完成完整组态图纸创建 ht.Text 文本图元绑定设备名称、参数标注最终输出符合工业标准的工艺拓扑图。3D场景布局适配方案AutoLayout 对 Graph3dView 三维画布仅作用于 XZ 水平面垂直分层需要单独控制高度属性实现立体层级效果仅执行平面布局会让所有设备平铺在同一高度搭配高度属性可实现多层机房机柜、园区分层设备立体拓扑展示。ForceLayout 力导向弹力布局开发实现适用场景与底层逻辑力导向布局对应类ht.layout.ForceLayout三维空间专用Force3dLayout适合无固定层级、网状关联结构的数据展示例如设备互联组网、供应链关联网络、复杂网状业务拓扑。布局底层基于引力斥力物理模型计算存在连线关联的节点互相吸引无关联节点产生斥力自动分散持续迭代计算至整体结构稳定收敛。基础调用代码提供layoutable样式属性控制图元是否参与布局计算图例、固定标题等静态元素可关闭布局参与属性固定位置不参与迭代画布会自动过滤隐藏、锁定状态的图元减少布局计算量提升运行流畅度。布局运行效果变化布局启动初期所有节点随机堆叠经过多轮引力斥力迭代后关联设备自动聚类、无关节点相互分散最终形成层次清晰、无大量重叠的网状拓扑。三维力导向布局 Force3dLayout 使用同一套参数体系直接基于 XYZ 三轴计算可实现卫星组网、分子结构等三维网状可视化效果。项目开发优化规范布局选型规范树形、单向流转业务场景优先使用 AutoLayout 定向 / 层次布局计算开销更低结构规整度更高网状无层级结构选用力导向布局。标准开发流程统一为算法自动排布生成基础结构 特殊节点、管线手动微调不存在完全无需人工干预的通用布局方案。大数据量性能优化按业务模块分组执行局部布局节点数量超过 2000 时避免一次性全量计算防止主线程阻塞静态标注、图例设置 layoutable 为 false过滤出计算范围海量数据场景关闭布局过渡动画采用同步计算模式提升渲染速度。2D与 3D 视图复用优势整套布局逻辑基于 HT 统一 DataModel 数据模型2D、3D 视图共用同一套节点、连线数据无需额外做数据格式转换。布局模块与渲染引擎原生适配数据渲染链路简洁减少中间转换带来的性能损耗。