分享
查看: 976|回复: 0

[分享] 在低代码中,如何实现3D场景和森图表的交互

[复制链接]

在低代码中,如何实现3D场景和森图表的交互

发表于 2023-5-18 18:37:53 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon976 zzr_icon0 查看全部
本帖最后由 18979425409 于 2023-5-18 18:45 编辑

ThingJS是一个专门用于IoT设备和物联网场景的3D可视化开发平台,它也支持在低代码的编程模式下快速构建可视化应用。如果要在ThingJS低代码开发中实现3D场景和森图表的交互,学习完本文章你可以实现,点击图表某一行,摄像机飞行到点击行物体所在位置。可以通过以下步骤实现:
1.将森图表或者森大屏导入到低代码中 在低代码中,如何实现3D场景和森图表的交互

2.查看图表dom元素
在低代码中,如何实现3D场景和森图表的交互

3.通过jquery或者js给图表绑定点击事件(本文章使用jQuery)
  1. // 创建“设备管理”列表交互事件
  2. function createEvents() {
  3.     $(".list-body .list-li").on("click", function () {
  4.     let name= this.children[0].children[0].title  //获取点击的列表行的设备名称
  5. let device = app.query(/name/)[0]  //查询到点击行的设备
  6.     app.level.change(device)  //层级切换到设备的父物体层级
  7.         app.camera.flyTo({
  8.             'object': device,   // 飞到该孪生体的位置
  9.             'time': 1000,   //飞行时间
  10.             xAngle: 30,  //与x轴角度
  11.             yAngle: 10,
  12.             radius: 30,  //离目标点距离(离目标点 n 倍物体自身包围盒半径距离处)
  13.             complete: function () {
  14.                 device.style.outlineColor = "#d88333"   // 设置孪生体边框的颜色}
  15.             }
  16.         })
  17.     })
  18. }
复制代码

4.涉及的知识点:
低代码中,坐标系的xyz轴是什么方向:https://developer.thingjs.com/t-2099.html
低代码中flyTo() API用法:https://support.thingjs.com/book/thingjs-api10/62a8170c6634aa32be547d1e#flyTo(param)





avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t