三亩地 三亩地SAN MU DI · CODE DIARY
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天,欢迎挑你感兴趣的翻一翻。

【数字孪生实战案例】三维场景中怎样点击飞线,唤起弹窗并加载匹配的关联数据?~山海鲸可视化

【数字孪生实战案例】三维场景中怎样点击飞线,唤起弹窗并加载匹配的关联数据?~山海鲸可视化

在三维数据可视化场景中,飞线常用于呈现跨区域业务关联与流转关系。为增强交互体验与数据可读性,需实现点击飞线触发弹窗,并精准加载匹配的关联数据,让用户可实时查看单条飞线对应的业务信息,提升三维场景的数据交互与可视化表达能力。

1.在左侧组件库添加“3D空场景”“弹窗”“文本”至项目中,且文本放置在弹窗内部。

接着双击进入编辑界面,在左侧添加“飞线”至项目中。

2.选中飞线组在右侧“数据”配置栏勾选数据,并隐藏“自由飞线”,本文以跨表数据联动为例进行演示,需注意跨表之间必须存在同名字段,方可实现数据关联匹配,同时开启“联动其他组件”

数据展示:

3.选中“样式”配置栏,开启“允许点击”和“标记面板”,选择需要绑定的弹窗,并选择“显示方式”“显示模式”即可。

4.退出编辑模式,选中弹窗内的文本组件,在右侧“样式”面板中展开文本“扩展选项”,点击选择生成“数据字段”即可。

接着在“数据”配置栏,勾选相关数据,并开启“受其他组件联动”

展示效果如下:

← 返回列表