森拓扑+低代码：三步实现2D组态与3D场景联动交互

回复

本帖最后由 thisisYXY 于 2022-7-8 12:00 编辑

森拓扑是面向物联网的2D拓扑图绘制工具。简单易用、轻量便捷的采用拖拉拽的交互方式快速完成拓扑图、流程图、工业组态、IT运维等多种场景下视图的绘制。并可在低代码ThingJS/零代码ThingJS-X中进行引用和编辑，实现2D组态与3D场景的联动。

（污水处理系统组态图）低代码ThingJS 提供丰富的3D开发API、完善的开发文档和视频教程，熟悉基础的JavaScript前端知识即可上手数字孪生可视化应用开发，大大提升数字孪生可视化项目开发效率。

（低代码ThingJS集成森拓扑实例）

究竟如何实现低代码ThingJS和森拓扑之间的交互，实现2D组态与3D场景联动呢？

01

绘制拓扑图

02

加载场景

点击“在线开发”进入开发环境，进入开发界面后默认打开HelloWorld官方例程，需点击“+”号新建项目。加载3D场景，点击【园区】按钮在园区面板中选择需要的场景，双击即可引用代码加载园区。

03

低代码应用

基于3D场景，进行可视化项目开发。首先在项目中引用森拓扑编辑的二维组态，创建一个按钮用于调出组态：

app.on('load', e => {
new THING.widget.Button('路灯电力系统图', load2d);
});

复制代码

创建完按钮后加载组态，拓扑资源的url可从森拓扑编辑界面获取，代码如下：

// 加载2d拓扑图
function load2d() {
// 创建2d容器
const template =
``;
$('#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' // 拓扑场景资源路径
});
});
}

复制代码

以点击路灯该元素闪烁，3D场景中飞行至该路灯为例实现二维组态与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
});
});
});

复制代码

项目开发完成后点击保存、运行，进行调试。简单三步即可将森拓扑的二维组态嵌入到低代码ThingJS中与3D场景交互，工程师更易用，管理者更易懂！

视频教程点击：https://study.uino.com/course/thingjsksrm/4-1

[分享] 森拓扑+低代码：三步实现2D组态与3D场景联动交互

森拓扑+低代码：三步实现2D组态与3D场景联动交互

相关帖子