首页 › 资讯 › 技术分享 ›查看内容

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

发表于 2022-7-8 11:36

3389

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

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

（污水处理系统组态图）

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

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

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

绘制拓扑图

进入森工厂，在森拓扑中绘制拓扑图。在森拓扑中完成绘图，可以将作品保存为其他的文件格式。点击菜单栏中的文件选项，点击导出，选择对应的导出格式。

加载场景

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

低代码应用

基于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', // 容器元素 idurl: '/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});});});