图观™应用编辑器零基础入门课（第五讲）-CSDN博客

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

课程5：利用组件编辑功能创建一个弹出面板

哈喽，小伙伴们大家好~欢迎大家来到图观应用编辑器零基础入门课程第五课，上节课程我们和大家介绍了图观应用编辑器中包含的丰富多样的控件，以及如何在页面中添加编辑这些控件。并且对于管理自定义图片素材和接口数据绑定等常用功能也做了教学示范。

本节课程简介

本节课将接续之前的课程案例，再给大家介绍一个常用的业务功能如何实现。我们将通过5小节的内容讲解来教会大家如何使用编辑器创建组件，并且通过点击交互，弹出组件面板的功能。

本节课完整版视频

图观™️应用编辑器零基础入门课程5《利用组件编辑功能创建一个弹出面板》

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

本节课程详解

1."智慧社区运营中心"案例交互功能回顾

首先我们来回顾一下应用案例的“安全态势”页面，有哪些常用交互功能。

在三维场景中点击消防设施散点图标弹出标牌显示消防设施的详情信息。点击界面中的【疫情防控】卡片，弹出对话框展示该社区疫情数据详情分析内容。

我们可以发现这两个交互功能都需要弹出一个详细的面板，面板中呈现更细节的数据和图表。那么这个弹出面板怎么制作呢？是否可以通过拖拉拽方式配置呢？是否可以根据点击对象的不同呈现不同的数据指标呢？

大家可以带着这些问题，跟随我们一起看后面的教学视频。

2.通过组件编辑功能实现弹出面板

刚才大家看到页面中所有涉及到弹出面板的内容都可以通过组件编辑添加进来。那接下来就要拿“消防设施”为例，和大家讲解一下如何创建组件了。

首先我们回到编辑器中“智慧社区运营中心”项目首页，tab页签切换至数据编辑可以看到提前上传好的“消防设施”数据表。

然后tab页签切换至参数编辑，添加参数名称“ID”,点击确定，选中“ID”，勾选接收未设置的枚举值，点击保存。然后tab页签切换至组件编辑，点击“新建组件”，输入中文“消防设施”并输入英文“xfss”点击“确定”按钮，就可以看到我们创建了一个新的组件。

鼠标移动到组件对象上，点击“编辑”按钮，页面进入组件编辑页面。在右侧属性面板中设置组件宽度、组件高度及背景颜色。

接下来从【资产库】-【本项目】-【媒体】中选择图片控件拖拽到画布相应位置，选中画布中的图片控件，在右侧【属性面板】中，设置控件名称和图片地址，切换至“样式设置”，对图片的尺寸、位置、全局样式各项参数进行自定义配置。

从【资产库】-【系统资产】-【列表】中选择属性表拖拽到画布相应位置，选中画布中的控件，在右侧【属性面板】中，设置控件名称，数据类别选择数据源，基础设置中依次设置数据源、ID、行内容，参数绑定ID。

切换至“样式设置”，对列表的尺寸、位置、全局样式各项参数进行自定义配置。

切换至“交互设置”，“被动接受参数”开启，“点击发送参数”关闭，点击保存。这样“消防设施”组件就创建好了。

同样方式我们把页面中涉及到的所有组件都在组件编辑中创建好。然后我们进入“安全态势”页面编辑界面，界面下方的应用编辑器的控件列表-“本项目”-组件中就可以看到我们刚才添加的组件了。

3.页面交互-弹出组件框-详情查看

点击场景设置-图层列表-消防设施，设置控件名称，数据类别选择数据源，基础设置中依次设置数据源、坐标系、经度、纬度、ID、高度，参数绑定ID，切换至“样式设置”，对图层全局样式、提示框进行自定义配置。切换至“交互设置”，被动接收参数关闭，点击发送参数开启，参数名勾选“ID” 。

点击“添加交互行为”，触发事件选择“页面-弹出面板-确定”，点击“编辑”，选择位置偏移“相对自身”，对话框选“消防设施”，点击“确定”并“保存”。点击“预览”按钮，可以在页面中找到消防设施图层，并找到任意一个消防设施图标，并“点击“该点位图表就可以弹出标牌详情。

这样就证明了该详情查看组件和点击交互功能配置成功了。

4.页面交互-弹出组件框-联动对话框

首先我们要把联动对话框的“疫情防控详情分析”做成一个组件，同样的我们回到编辑器中“智慧社区运营中心”项目首页，tab页签切换至组件编辑，点击“新建组件”，输入中文“疫情防控详情分析”并输入英文“yqfkxqfx”点击“确定”按钮，就可以看到我们创建了一个新的组件。

鼠标移动到组件对象上，点击“编辑”按钮，页面进入组件编辑状态。首先在右侧属性面板中设置组件宽度、组件高度及背景颜色。

然后从【资产库】-【系统资产】-【媒体】中选择图片控件拖拽到画布相应位置，选中画布中的图片控件，在右侧【属性面板】中，设置控件名称和图片地址，切换至“样式设置”，对图片的尺寸、位置、全局样式各项参数进行自定义配置。

同样的将其他3个图表进行配置，点击保存，“疫情防控详情分析”组件就创建完成了。

然后回到页面编辑界面，从【资产库】-【系统资产】-【控件】中选择图片按钮，控件拖拽到画布相应位置，选中画布中的图片按钮，在右侧【属性面板】中，设置控件名称和按钮文本。

切换至“样式设置”，在【基础属性】中对图片按钮的尺寸和位置进行配置，对图表的全局样式等各项参数进行自定义配置。切换至“交互设置”，点击“添加交互行为”，触发事件选择“页面-弹出面板-确定”，点击“编辑”，选择位置偏移“相对界面”，对话框选“疫情防控详情分析”，点击“确定”并“保存”。

点击“预览”按钮，可以在页面中找到疫情防控卡片，点击该卡片，弹出对话框展示疫情防控的详情分析对话框。这样就证明了详情对话框和点击交互功能配置成功了。

5.配置其他弹出对话框