图观™应用编辑器 零基础入门课(第三讲)
优采云 发布时间: 2022-07-20 12:40图观™应用编辑器 零基础入门课(第三讲)
创建数据源并添加数据图层课程3
哈喽,小伙伴们大家好,欢迎大家来到图观™应用编辑器零基础入门课程第3课,上节课程介绍了应用编辑器的界面组成及功能,教大家如何通过应用编辑器创建“智慧社区“项目,如何创建“社区概览”“人车感知”“安全态势”3个页面,以及如何在页面中调用三维孪生场景,并且演示了我们可以对已创建的项目和页面可进行哪些操作(第二课内容可点击链接查看:)。本节课程,我们将为大家讲解如何使用图观™应用编辑器 创建数据源并添加数据图层。
本节内容简介本节课程,我们主要讲解的内容分为10个小节,首先会和大家回顾一下“智慧社区运营中心”应用中有哪些业务图层,然后教大家如何制作这些图层,如何上传数据并绑定到业务图层上,如何制作图例等等。最后给大家预览呈现下“智慧社区运营中心”孪生应用制作的阶段成果。本节课完整版视频(点击视频,观看本节完整版教程)
本节内容详解1.“智慧社区运营中心”数据图层回顾
首先我们来回顾一下“智慧社区运营中心”应用案例中,涉及哪些数据图层:
“社区概览”页面涵盖监控设施、警务室、避难所等地标点图层、安防告警事件图层等;
“人车感知”页面涵盖监控设施、人脸闸机、车辆闸机等地标图层,社区人流热力图层等;
“安全态势”页面中包含监控设施的地标点等图层;
接下来我们以“安全态势”页面的图层为例,*敏*感*词*的教大家把这些图层配置出来~
2.创建数据源(数据编辑)
创建图层前,首先要创建数据源,编辑器可以对接的数据源有三种:
(1)手动静态输入数据
(2)本地Excel数据或数据库
(3)动态接口数据
本节课我们将通过静态Excel数据给大家演示,各位小伙伴可以扫描屏幕上的二维码,直接下载测试数据,也可以添加数字冰雹客服微信获取哦~也可在浏览器中输入网址:直接获取。
我们回到“智慧社区运营中心”项目首页,中间Tab页签切换至数据编辑页签,点击“添加数据”按钮选择“上传数据”,将获取到的成套测试静态数据excel文件逐一添加进来。在左侧数据管理列表中,我们可以创建文件夹,方便数据管理和查找。
3.场景图层面板介绍
我们进入到“安全态势”页面的编辑界面中,点击中间场景空白处,在右侧属性面板中,选择“场景设置”页签,在下方就是“图层设置“面板。点击【添加图层】按钮,在弹出的添加图层面板中可以选择我们需要添加的图层类型,包括地标图层、柱图图层、热力图层、栅格图图层等。
4. 添加图层-地标图:如监控设施、告警事件
我们先添加监控设施地标图层,点击“添加图层”选择“地标图层”,点击“添加”。在右下方可看到已添加的“地标图层”,鼠标选中“地标图层”,点击【编辑】按钮可进入图层编辑页,我们先修改“地标图层”名字为“监控设施”。然后对数据类型进行编辑,数据类别选择数据源。然后【数据源】选择之前上传好的“监控设施”数据。【坐标系选择】经纬度坐标系,添加【经度】、【纬度】、【ID】、【高度】字段。
接下来切换到样式设置中,我们对添加完成的散点图图标进行样式编辑,可以让它们更美观一些,编辑器中内置了多种图标可供选择,我们也可以在场景编辑器的【资产库】-【图标】中自定义上传我们所需要的图标,这样我们就完成了监控设施地标图层的添加。同样的方式我们把安防告警事件地标图层也添加进来。
5.添加图层-气泡图,如告警事件
同之前操作一样,我们在【添加图层】界面选择气泡图图层,“气泡图层”文本框处修改图层名字为“告警气泡图层”,添加完成后继续进行【数据源】绑定“告警事件”、【坐标系选择】经纬度坐标系,【经度】、【纬度】、【数量】填 写对应字段。
切换到“样式设置”页签,可以对气泡的全局样式进行设置,如:数据最大值上限、数据最小值下限、气泡最大半径,气泡最小半径、气泡*敏*感*词*速度、气泡颜色等,这样我们的告警气泡图层也就添加完成啦。
6. 添加图层-区域图,如疫情管控区
区域图层和其他图层不一样的地方在于它不是一个点图层,而是面图层,我们在【添加图层】界面选择区域图层,文本框处修改图层名字为“疫情管控区域-3号楼”。添加完成后继续进行【数据源】绑定“电子围栏_3号楼”、【坐标系选择】经纬度坐标系、【经度】、【纬度】填写对应字段。
切换到“样式设置“页签,可以对区域边界样式类别、颜色、围栏高度、区域填充样式类别、区域填充位置进行设置,设置完成后我们的电子围栏也就添加完成啦。
7.添加图层-路径图,如:安防人员巡逻路径
我们在【添加图层】界面选择路径图层,文本框处修改图层名字为“安防人员巡逻路径”。添加完成后继续进行【数据源】绑定“安防人员巡逻路径”、【坐标系选择】经纬度坐标系、【经度】、【纬度】填写对应字段。切换到“样式设置“页签,可以对路线样式类别、路线颜色、路径宽度进行设置,设置完成后就可以看到路径图层啦。
8.其他图层添加同样的操作方法,我们把“安全态势”页面剩余的数据图层及“社会概览”和“人车感知”页面的数据图层逐一进行添加设置,这样3个页面的数据图层就都添加设置完成了。
9.添加图例
孪生场景中的所有图层都添加完成后,我们还需要添加图例,图例是所有图层的控制台,可以控制图层的显隐操作。进入页面编辑状态,首先在【资产库】的【控件】中找到【三维图例】并拖拽到页面合适的地方,然后在基础设置里可以勾选需要显示的图层名称。接下来根据图例中的数据进行样式设置:尺寸、位置、图例单元高度、图层间距、文本样式、背景颜色、边框颜色、边框粗细等属性参数。设置完成后那我们的图例就添加好啦。
10.预览“智慧社区运营中心”项目阶段成果
在图层和图例都编辑完成并保存后我们就完成了场景图层的编辑操作,这个时候我们就可以点击预览按钮查看在三维场景中我们刚才所添加的数据图层了。
本节总结我相信,通过本节课程的学习,大家掌握了各式各样场景图层的添加设置方法,数据上传-图层添加-数据绑定-样式设置-保存,就是这么简单。相信大家已经熟知了今天课程的内容,大家可以在课后使用图观应用编辑器来实战操作一下,在三维场景中添加自己心仪的图层吧。那本节课程到这里就结束啦~
下节预告下节课程呢,我们要来和大家详细介绍一下应用编辑器丰富的控件,并和大家讲解如何使用这些控件在页面中添加设置成想要的图表。同时也会和大家讲一下图片素材上传及数据接口配置的方法。小伙伴们一定要持续关注哦~
图观在线试用地址图观™引擎现可申请免费试用!现在试用还可获得1对1技术支持和专属大礼包~还等什么,快快联系我们体验图观™引擎的强大功能吧~
1.访问图观™官方网站,在浏览器中输入网址:
在图观™官方网站中,您可获取图观™最新产品技术动态以及全面的开发指引,帮助您快速了解图观™数字孪生可视化引擎。
2.添加数字冰雹客服微信,审核通过后可获取体验邀请码。
扫码添加好友内测申请/*敏*感*词*咨询