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

最新推荐文章于 2024-09-09 23:37:39 发布

图观引擎

最新推荐文章于 2024-09-09 23:37:39 发布

阅读量229

点赞数

分类专栏：图观™引擎场景编辑器教程文章标签：编辑器开发语言大数据

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

版权

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

4 篇文章 0 订阅

订阅专栏

课程2：快速搭建并发布第一个数字孪生应用

哈喽，小伙伴们大家好~欢迎大家来到图观™应用编辑器零基础入门课程第2课。

上节课程呢我们给大家讲解了几个数字孪生应用的重要基本概念，简单介绍了图观™应用编辑器的主要界面构成，并且给大家展示了基于图观制作的“智慧社区运营中心”数字孪生应用案例，此外我们还和大家介绍了使用图观™应用编辑器的软硬件环境要求（第一课内容可点击链接查看：开课啦！图观™应用编辑器零基础入门课第一讲）。本节课我们将带大家实际操作图观应用编辑器。

本节内容简介

本节课程中，我们把主要讲解的内容分为13个小节，并且会给大家手把手讲解操作，使用图观应用编辑器快速搭建并发布自己的第一个数字孪生应用。同时会和大家讲解项目创建、页面创建、调用场景服务的操作方法。

本节课程完整版视频

图观™引擎应用编辑器零基础入门课程2《快速搭建并发布第一个数字孪生应用》

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

本节内容详解

1. 登陆图观™应用编辑器

首先我们打开谷歌浏览器，输入图观网址https://www.tuguan.net并访问，然后我们就进到了图观的官网。

如果第一次访问图观，首先需要注册一个账户，可以添加图观客服微信索取邀请码。填写邀请码和基本信息后，就开通了图观的账号。

点击官网导航栏右侧的【登录】按钮，就看到了登录界面，输入已开通好的账号和密码后点击【登录】，我们就进到了图观业务管理界面，能看到在“我的业务”中有“租户服务”、“端渲染场景服务”、“接口调试器服务”、“应用编辑器服务”4种服务，我们选择“应用编辑器服务”点击【前往】按钮，这样我们就进入到了应用编辑器的首页了。

2. 应用编辑器首页介绍

进入到应用编辑器的首页页面，页面左侧是项目管理列表，在这里我们可以对所有项目进行分类整理，便于后续对项目的查找和管理。中间tab栏切换工作台和资产库，工作台可新建项目并展示所有已创建项目；资产库中的资产内容可以在各个项目中共享使用，页面右上显示公告，帮助及用户设置。

3. 创建项目"智慧社区运营中心"

点击“新建可视化项目”，在弹出的窗口中输入中文名称、英文名称，点击“确定”按钮即可完成项目的创建。鼠标悬停在项目面板上可以唤醒隐藏的功能菜单，我们可以对该项目进行“重命名”“移动”“复制”“删除”，也可以点击“进入项目”按钮，系统将会进入该项目首页。

4. 项目首页介绍

进入到编辑中的项目首页。我们可以看到左侧为页面管理列表，在这里我们可以对所有页面进行分类整理，中间为tab栏切换显示“页面编辑”“组件编辑”“参数编辑”“接口编辑”“数据编辑” ”图片素材”等六大管理页签。默认的是选中了“页面编辑”，可新建页面并展示所有已创建的页面。界面右上角可以对项目进行设置、刷新、预览、发布等操作。

5. 新建页面“社区概览”

在项目首页中，默认选中“页面编辑”的页签。点击“新建页面”按钮，在新建页面面板中，有两种创建页面的方式可以选择——【创建空白页面】和【创建模板页面】。

【创建空白页面】：是在界面的左上侧，选择“空白页”，鼠标点击右侧面板“创建”按钮，在弹出的“新建页面”输入框中输入所创建页面的名称，再点击“确定”按钮即可完成页面的创建。

【创建模板页面】：是指在基于系统自带的模板库创建页面，目前模板库包括红、橙、黄等不同色系的模板，还有简约、现代、科技等不同风格的模板。

可以依据个人喜好及孪生应用需求在丰富的页面模板库中选择自己心仪的模板，一般呢我们会强烈推荐第一次使用图观的小伙伴采取【创建模板页面】的方式，这种方式可以减少UI设计的工作，同时模板中也预置了标题/卡片/图表/图片等多种控件，我们可直接编辑修改即可，大大提高了我们的配置效率。

选择选用的模板页面，鼠标点击右侧面板“创建”按钮，在弹出的“新建页面”输入框中输入所创建页面名称：“社区概览”，再点击“确定”按钮即可完成页面的创建。

同样的操作我们把另外2页面“人车感知”、“安全态势”新建出来，这样整个“智慧社区运营中心”孪生应用涉及的3个页面“社区概览”“人车感知”“安全态势”我们就创建完成啦~

6. 页面操作介绍

那对于已创建的页面我们做哪些操作呢？

大家可以看到页面卡片上有“重命名”，"锁定/解锁"的按钮，当我们把鼠标悬停页面卡片上时就能唤醒隐藏的功能菜单，可以看到有"设为首页""预览"“移动”“复制”“删除”"隐藏" "导入租户资产"“编辑”等按钮。

*点击页面卡片左下角的“重命名”按钮，可修改项目的名称；

*点击页面右下方的“锁定/解锁”按钮，即可对页面进行解锁或是锁定。当页面处于锁定状态时，只可以进行“设为首页”和“预览”操作，无法对其进行“编辑”等操作。

*鼠标悬停某个指定页面卡片，点击功能菜单中的“设为首页”按钮，即可把当前页面设为首页。大家可以看到，设为首页的页面卡片左上角会有一个小图标；

*点击“预览”按钮，即可预览该页面。一般是等我们将页面配置完成后，想要预览该页面内容的时候，可点击这个按钮；

*点击“移动”按钮，在弹出面板中选择指定页面文件夹，点“确定”按钮即可将此页面移至所选文件夹下；当页面较多时可以进行分类管理；

*点击“复制”按钮，会在同级目录下为该页面生成一个新的副本；

*点击“删除”按钮，即可删除当前页面；

*点击“编辑”按钮，即可进入编辑界面；

*点击“隐藏页面”按钮，即可隐藏当前页面；隐藏的页面在左侧下方，鼠标悬浮隐藏页面可唤醒“反隐藏”按钮，点击该按钮可取消页面隐藏；

*点击“导入租户资产”按钮，即可把当前页面导入租户资产下，方便其他项目复用该资产。

7. 页面编辑界面介绍

鼠标悬停指定页面唤醒隐藏的功能菜单，点击“编辑”按钮，进入页面编辑界面。

我们可以看到界面上方是菜单栏、工具栏，菜单栏可以显隐控制我们的“对象列表”“控件列表”和“属性面板”。

在工具栏中可以看到“保存”按钮，如果修改页面的参数“保存”按钮会一直闪烁，直到重新保存，并且保存会自动截取当前画布效果为页面封面。大家在做的时候一定要记得随时点击这个按钮保存我们的页面；

在“保存”按钮右边是“发布”按钮：当我们页面配置完成后可以点击此按钮进行发布；

再旁边是“预览”按钮：当我们想看到自己配置页面当前状态时；点击“预览”按钮，则默认自动保存当前页面，即可跳转到预览页面；

最后是“设置”按钮：点击“设置”按钮，切换到项目设置界面。在后续课程中会详细讲到该功能。

界面左侧是对象列表，我们画布中所有添加的对象都会在该列表中显示。我们可以对列表中的某个对象进行锁定和隐藏操作，点击列表中某个对象，画布中就可联动显示选中的对象。

界面最中心位置就是我们的画布，在右下角画布编辑栏，我们可以对画布的大小进行控制。

界面右侧是属性面板，我们对页面、场景、控件所有的参数设置都在这个位置进行编辑。

界面下方就是控件列表，控件列表包括“资产库”页签和“本项目”页签两个部分：

“资产库“页签中包含系统资产和租户资产，系统资产里放置了我们丰富多样的资产控件：包括柱状图、条图、折线图、比例图、比较图、列表、仪表盘、控件、媒体等类型，租户资产是我们租户账号下导入到租户资产的图片和组件。

8. 操作对象列表显隐

我们可以选中左侧的对象列表中的多个控件，右击鼠标进行控件成组的操作，选中单个/成组的控件可进行置顶、置底、上移一层、下移一层、锁定、隐藏、重命名、复制、删除的操作。

根据模板创建的页面，模板会默认带一个图片背景，为了后续操作需要隐藏“背景组”中的“底背景图”，我们可以找到该对象，并点击“隐藏”按钮。可以看到该对象被我们隐藏起来了。

这里要跟各位小伙伴介绍一下对象列表中锁定和隐藏的区别，锁定是指对象可见但是在编辑器中不可以被选中和修改，一般用于界面元素，如遮罩。隐藏是指在编辑器中不可见，同样也不能被选中和修改。

所以在后续的页面编辑中我们要隐藏背景图，并锁定遮罩对象和标签背景图片。

9. 页面设置面板介绍

点击中心页面空白处，在右侧属性面板下，点击“页面设置”按钮，即可对页面相关参数进行编辑：修改页面名称、修改页面尺寸大小、设置页面缩放类型，点击下拉菜单可以看到有固定分辨率（可滚动）、拉伸缩放铺满（无滚动）、等比缩放铺满（无滚动）、宽度铺满（纵向可滚动）和高度铺满（横向可滚动）5种类型可以选择，一般建议选择等比缩放铺满（无滚动）。

10. 场景设置面板介绍

点击中心页面空白处，在编辑页面的右侧属性面板下，点击“场景设置”按钮，可在页面中调用心仪的场景并且可对场景状态，场景预览、场景大小位置等进行设置操作。

11. 获取并设置"智慧社区"场景

在场景设置面板中，点击场景类别的下拉菜单显示，有三个选项：
1、选择“无”场景：是指无需三维场景的情况
2、选择“端渲染场景”：是指页面需要加载一个端渲染的场景
3、“流渲染场景”：是指页面需要加载一个流渲染的场景。
根据场景的实际类型进行选择，本教程案例“智慧社区”的场景类型是“端渲染场景”，因此我们选中“端渲染场景”。点击“选择场景”按钮，弹出“选择场景”窗口，账号下已有“智慧社区”场景的租户，可在【租户资产】中选择已发布的“智慧社区”场景，点击确定，等待场景加载成功。

新租户首先要获取到"智慧社区"端渲染场景二次开发地址（小伙伴们扫一扫视频中的二维码，添加图观客服微信获取~）。

点击“选择场景”按钮，弹出“选择场景”窗口，在【本项目】中点击“添加文件夹”按钮，随后输入文件夹名称“智慧社区”，点击回车即可完成项目文件夹的创建，选中文件夹，点击“添加场景”，弹出“添加场景”窗口，在文本框中输入获取的“智慧社区”场景二次开发地址，点击"确定"，选中调用的场景后点击“选择场景”窗口中的确定按钮，等待场景加载成功。