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

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

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

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

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

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

(低代码ThingJS集成森拓扑实例)

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


01

绘制拓扑图

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

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

02

加载场景

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

森拓扑+低代码:三步实现2D组态与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', // 容器元素 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});});});
项目开发完成后点击保存、运行,进行调试。
简单三步即可将森拓扑的二维组态嵌入到低代码ThingJS中与3D场景交互,工程师更易用,管理者更易懂!

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