请选择 进入手机版 | 继续访问电脑版
分享
查看: 1187|回复: 0

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

[复制链接]

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

发表于 2022-7-19 16:35:34 来自 分享 阅读模式 正序浏览
zzv_icon1187 zzr_icon0 查看全部
本帖最后由 thisisYXY 于 2022-7-19 16:39 编辑

森拓扑是面向物联网的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场景,进行可视化项目开发。首先在项目中引用森拓扑编辑的二维组态,创建一个按钮用于调出组态:
  1. app.on('load', e => {
  2. new THING.widget.Button('路灯电力系统图', load2d);
  3. });
复制代码

创建完按钮后加载组态,拓扑资源的url可从森拓扑编辑界面获取,代码如下:
  1. // 加载2d拓扑图
  2. function load2d() {
  3. // 创建2d容器
  4. const template =
  5. ``;
  6. $('#div2d').append($(template));
  7. // 引用拓扑组件脚本
  8. THING.Utils.dynamicLoad(['https://topo.thingjs.com/static/js/thing.diagram.min.js'], function () {
  9. // 初始化2d拓扑图
  10. const graph = new THING.DIAGRAM.Graph({
  11. container: 'div1', // 容器元素 id
  12. url: '/diagrams/716152d7f626eb3a?page=r5ihkjg7' // 拓扑场景资源路径
  13. });

  14. });
  15. }
复制代码

以点击路灯该元素闪烁,3D场景中飞行至该路灯为例实现二维组态与3D场景联动,代码如下:
  1. // 拓扑图加载完成时
  2. graph.on('load', () => {
  3. // 监听2d路灯点击
  4. graph.query('lamp').on('click', e => {
  5. // 2d路灯闪烁
  6. graph.query('lamp').forEach(item => {
  7. item.stopFlicker();
  8. });
  9. e.object.flicker({
  10. color: 'yellow'
  11. });
  12. // 3d场景飞行到该路灯
  13. const lamp3d = app.query(`#${e.object.id}`)[0];
  14. app.camera.flyTo({
  15. object: lamp3d,
  16. time: 1000
  17. });
  18. });
  19. });
复制代码

项目开发完成后点击保存、运行,进行调试。简单三步即可将森拓扑的二维组态嵌入到低代码ThingJS中与3D场景交互,工程师更易用,管理者更易懂!视频教程点击:https://study.uino.com/course/thingjsksrm/4-1
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t