低代码快速入门-森拓扑

森拓扑为北京优锘科技有限公司旗下的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小时临时链接，如下图：

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