图观™应用编辑器零基础入门课（第六讲）

图观引擎

已于 2022-07-15 15:00:19 修改

阅读量72

点赞数

分类专栏：图观™引擎应用编辑器教程文章标签：大数据

于 2022-07-15 14:57:05 首次发布

本文链接：https://blog.csdn.net/tuguan_digitail/article/details/125804709

版权

图观™引擎应用编辑器教程专栏收录该内容

2 篇文章 0 订阅

订阅专栏

课程6：创建基本页面交互

哈喽，小伙伴们大家好~欢迎大家来到图观应用编辑器零基础入门课程第6课，上节课程给大家讲解了创建组件的操作方法，并且跟大家演示讲解了如何利用组件创建详情查看和联动对话框。

本节课程简介

本节课主要通过6小节的内容来教大家，如何使用应用编辑器配置出：

（1）3个页面的切换交互

（2）多个场景状态的切换交互

（3）图表与图表联动以及图表

（4）图层联动4种页面交互类型

这些交互也是数字孪生应用最基础最常用的交互手段。那么我们开始学习这些操作吧~

本节课完整版视频

图观™️应用编辑器零基础入门课程6《创建基本页面交互，含页面切换、状态切换、联动控制》

（点击视频，观看本节完整版教程）

本节课程详解

1.通过导航栏配置多页面切换

我们用“社区概览”页面为例给大家讲解页面切换如何配置。首先是修改页面模板中的一级导航文字。

之前的课程我们讲到了页面模板中文字修改的方法，在左侧控件列表或画布中依次选中“一级导航”控件，在右侧的属性面板中，修改控件名称和基础设置中的文本为“社区概览”“人车感知”“安全态势”，然后把多余的一级导航、二级导航删掉。

然后点击画布中的导航栏的“人车感知”控件，点击右侧属性面板下的交互设置，点击“添加交互行为”，触发事件选择：“页面-跳转页面-确定”，点击“编辑”，选择跳转页面至“人车感知”。

然后点击画布中的“安全态势”控件，点击右侧属性面板下的交互设置，点击“添加交互行为”，触发事件选择：“页面-跳转页面-确定”，点击“编辑”，选择跳转页面至“安全态势”，点击“确定”并“保存”。

同样的将：“人车感知”“安全态势”页面中的3个主题按钮也配置完成，点击“确定”并“保存”，点击“预览”，就可以看到3个页面切换配置成功了。我们可以预览整个系统，点击导航栏就可以进行页面切换了。

2.配置场景多状态切换

我们以“安全态势”页面-状态导航栏-“社区全景”“自动旋转”“自动漫游”为例来和大家讲下场景状态的切换是怎么配置的。

（1）状态配置

首先来讲一下“社区全景”按钮的配置方法，我们从【资产库】-【系统资产】-【控件】中选择图片按钮控件拖拽到画布相应位置，选中画布中的图片按钮，在右侧【属性面板】中，设置控件名称和按钮文本为“社区全景”，切换至“样式设置”，在【基础属性】中对图片按钮的尺寸和位置进行配置，对图片按钮控件全局样式中的填充方式、按钮圆角、按钮颜色、按钮背景图片等各项参数进行自定义设置，文本点击“开启”，对文本的偏移量、阴影、样式等内容进行自定义设置。

切换至“交互设置”，点击“添加交互行为”，触发事件选择：“场景-切换状态-确定”，点击“编辑”，选择切换状态至“全景展示”，点击“确定”并“保存”。

点击“添加交互行为”，触发事件选择：“场景-图层-显隐图层-确定”，点击“编辑”，显隐方式选择“显示图层”，勾选全部图层，点击“确定”并“保存”。

同样的操作方法，我们把“顶视图”“闸机”“1号楼”“户型剖分”“默认状态”这几个状态也配置出来。值得注意的是，点击不同状态按钮会涉及到不同的视角，为了在不同视角下图层展示的美观，可以点击“添加交互行为”选择显隐部分图层。

（2）自动旋转

接下来讲一下“自动旋转”按钮的配置方法，我们从【资产库】-【系统资产】-【控件】中选择图片按钮控件拖拽到画布相应位置，选中画布中的图片按钮，在右侧【属性面板】中，设置控件名称和按钮文本为“自动旋转按钮”，切换至“样式设置”，在【基础属性】中对图片按钮的尺寸和位置进行配置，对图片按钮控件全局样式中的填充方式、按钮圆角、按钮颜色、按钮背景图片等各项参数进行自定义设置，文本点击“开启”，对文本的偏移量、阴影、样式等内容进行自定义设置。

切换至“交互设置”，点击“添加交互行为”，触发事件选择“摄像机-旋转视野-确定”，点击“编辑”，设置旋转一周时间“60”，旋转方向“顺时针”，点击“确定”并“保存”。

（3）自动漫游

最后在讲一下“自动漫游”按钮的配置方法，我们从【资产库】-【系统资产】-【控件】中选择图片按钮控件拖拽到画布相应位置，选中画布中的图片按钮，在右侧【属性面板】中，设置控件名称和按钮文本为“自动漫游按钮”，切换至“样式设置”，在【基础属性】中对图片按钮的尺寸和位置进行配置，对图片按钮控件全局样式中的填充方式、按钮圆角、按钮颜色、按钮背景图片等各项参数进行自定义设置，文本点击“开启”，对文本的偏移量、阴影、样式等内容进行自定义设置。

切换至“交互设置”，点击“添加交互行为”，触发事件选择“其他-API指令集-确定”，点击“编辑”，将API代码粘贴到文本框。