请选择 进入手机版 | 继续访问电脑版
分享
首页 资讯 产品知识 查看内容

低代码快速入门-森拓扑

发表于 2022-6-30 17:03
zzv_icon463 zzr_icon0
摘要: 森拓扑为北京优锘科技有限公司旗下的2D组态绘制工具,支持在线绘制物联网拓扑图、组态图、电力图、流程图等多种类型的图表,并可在ThingJS低代码在线开发平台中进行引用和编辑。本文以路灯电力系统为例,演示森拓扑 ...
森拓扑为北京优锘科技有限公司旗下的2D组态绘制工具,支持在线绘制物联网拓扑图、组态图、电力图、流程图等多种类型的图表,并可在ThingJS低代码在线开发平台中进行引用和编辑。本文以路灯电力系统为例,演示森拓扑的绘制,并展示如何在低代码平台中实现2D组态与3D场景的联动。

1. 快速绘制

在森拓扑中新建拓扑图,大致排列元素,并双击为元素添加文字,设置背景为深灰色、文字为白色,如下图:

低代码快速入门-森拓扑

使用矩形,分别为路灯、控制器、其他放置三个容器,如下图:

低代码快速入门-森拓扑

最后,使用直线绘制出完整线路,至此,电力图的基本形态已完成。

低代码快速入门-森拓扑

2. 设置孪生体ID、名称及动画

2.1 设施孪生体属性

为实现联动效果,需要为元素设置孪生体ID和名称以备抓取。点击路灯元素,在右侧面板中进行输入。若要为该元素添加多个属性,可点击“添加属性”按钮,此处仅设置一个属性即可。重复操作,为4个路灯元素均设置孪生体属性。

低代码快速入门-森拓扑

2.2 设置电路动画

点击要添加动画效果的电路,在右侧效果设置面板中设置【效果类型】为流动效果,【触发方式】为自动播放,并设置流动颜色、大小、速度、运动方式,如下图:

低代码快速入门-森拓扑

设置好效果的元素会出现动画标识,此处为多处电路设置了流动效果,如下图:

低代码快速入门-森拓扑

至此,组态图已绘制完成。点击页面右上侧的【运行】按钮,进行预览和调试。

3. 在ThingJS中引入拓扑场景

3.1 新建项目

访问ThingJS官网,点击“在线开发”进入开发环境。

低代码快速入门-森拓扑

进入开发界面后默认打开HelloWorld官方例程,需点击“+”号新建项目。

低代码快速入门-森拓扑

3.2 加载场景

点击【园区】按钮,在园区面板中选择需要的场景,双击即可引用代码。

低代码快速入门-森拓扑

增加园区的方法如下:
(1)点击“上传园区”,可上传.tjs文件(由Campusbuild客户端导出);
(2)在“森园区”中创建的场景可自动同步到该面板;
(3)在ThingJS网站-资源中心-场景 中购买的场景可自动同步到该面板。
双击需要的场景,自动添加如下代码:
// 加载场景代码
var app = new THING.App({
url: '/api/scene/8bf1fdd9a27ccd5371673707'
});
点击保存、运行后,即可在右侧预览场景。

低代码快速入门-森拓扑

3.3 引用森拓扑编辑的二维组态

创建一个按钮,用于调出组态:
app.on('load', e => {
new THING.widget.Button('路灯电力系统图', load2d);
});
加载组态:
// 加载2d拓扑图
function load2d() {
// 创建2d容器
const template =
`<div id="div1" style="width:500px;height:450px;position:absolute;bottom:20px;left:20px;"></div>`;
$('#div2d').append($(template));
// 引用拓扑组件脚本
THING.Utils.dynamicLoad(['https://topo.thingjs.com/static/js/thing.diagram.min.js'], function () {
// 初始化2d拓扑图
const graph = new THING.DIAGRAM.Graph({
container: 'div1', // 容器元素 id
url: '/diagrams/716152d7f626eb3a?page=r5ihkjg7' // 拓扑场景资源路径
});
 
});
}
其中拓扑资源url可从拓扑编辑界面获取,如下图:

低代码快速入门-森拓扑

4. 二维组态与3D场景联动效果实现

4.1点击组件中的路灯元素,该元素闪烁,3D场景中飞行至该路灯

// 拓扑图加载完成时
graph.on('load', () => {
// 监听2d路灯点击
graph.query('lamp').on('click', e => {
// 2d路灯闪烁
graph.query('lamp').forEach(item => {
item.stopFlicker();
});
e.object.flicker({
color: 'yellow'
});
// 3d场景飞行到该路灯
const lamp3d = app.query(`#${e.object.id}`)[0];
app.camera.flyTo({
object: lamp3d,
time: 1000
});
});
});

4.2为场景添加天空盒:

// 引入天空盒
$.get('/api/skybox/708c1c85cf0f5c4531a6d0ab', function (result) {
app.skyBox = result;
});
点击保存、运行,进行调试。

4.3 生成链接

点击快速分享按钮,可生成24小时临时链接,如下图:

低代码快速入门-森拓扑

也可到项目-分享设置-新建分享中创建有效期更长久的分享链接:

低代码快速入门-森拓扑

相关文章