基于图扑 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 三轴计算，可实现卫星组网、分子结构等三维网状可视化效果。

项目开发优化规范

布局选型规范

1. 树形、单向流转业务场景优先使用 AutoLayout 定向 / 层次布局，计算开销更低，结构规整度更高；网状无层级结构选用力导向布局。
2. 标准开发流程统一为：算法自动排布生成基础结构 + 特殊节点、管线手动微调，不存在完全无需人工干预的通用布局方案。

大数据量性能优化

1. 按业务模块分组执行局部布局，节点数量超过 2000 时避免一次性全量计算，防止主线程阻塞；
2. 静态标注、图例设置 layoutable 为 false，过滤出计算范围；
3. 海量数据场景关闭布局过渡动画，采用同步计算模式提升渲染速度。

2D 与 3D 视图复用优势

整套布局逻辑基于 HT 统一 DataModel 数据模型，2D、3D 视图共用同一套节点、连线数据，无需额外做数据格式转换。布局模块与渲染引擎原生适配，数据渲染链路简洁，减少中间转换带来的性能损耗。