分享
查看: 2915|回复: 0

从零开始学习3D可视化之事件卸载、事件暂停

[复制链接]

从零开始学习3D可视化之事件卸载、事件暂停

发表于 2021-7-2 10:56:55 阅读模式 倒序浏览
zzv_icon2915 zzr_icon0 查看全部
事件就是用户或浏览器自身执行的某种动作,而响应某个事件的函数就叫做事件处理程序 (或事件侦听器)。事件处理程序的名字以 "on" 开头,比如 click 事件的事件处理程序就是 onclick。下面我将继续学习数字孪生可视化场景中如何卸载事件、暂停和恢复事件、自定义事件。

从零开始学习3D可视化之事件卸载、事件暂停



卸载事件
如果内存中保留大量无用的事件处理程序,会影响性能。所以一定要在不需要的时候及时移除事件处理程序。需要卸载一个事件的时候使用 off() 方法。这样就把所有的数字孪生可视化building 下的 click 事件都清除了。假设这个数字孪生可视化物体有多个 marker,找到其中一个卸载掉事件,不影响其他 marker和后创建的 marker。

  1. app.on("click", function(event) {
  2. console.log("you click!");
  3. });

  4. // 卸载
  5. app.off("click");

  6. app.on("click", ".Building", function(event) {
  7. console.log("you click!");
  8. });

  9. // 卸载
  10. app.off("click", ".Building");

  11. app.on("click",".Building",function(event) {
  12. console.log("you click 1 !");
  13. },"tag1");

  14. // 卸载
  15. app.off("click", ".Building", "tag1");
复制代码


注意事项:

若绑定数字孪生可视化事件时,添加了条件,则off 第二个参数必须传条件,如果没有条件,又需要传tag ,需要将条件传 null。

暂停和恢复事件
如果off掉一个事件,要想恢复,有时候比较难,就会找不到之前的回调方法了。面对这种情况,提供 pauseEvent方法,用于暂停事件,它的控制方法和标准类似于 off。

  1. app.on("click",".Building",function(event) {
  2. console.log("you click!");
  3. },"tag1");

  4. // 暂停
  5. app.pauseEvent("click", ".Building", "tag1");

  6. // 恢复
  7. app.resumeEvent("click", ".Building", "tag1");
复制代码


自定义事件
ThingJS 内置了很多事件,但如果自己写模块的时候,也需要触发事件,该如何操作?外部注册还是使用 on,在需要触发的地方可以使用 trigger 接口来对外触发事件。

比如在写一个数字孪生可视化报警管理器:

  1. class AlamrManager {
  2. constructor() {
  3. ......
  4. }

  5. enable() {
  6. ......
  7. app.trigger("AlarmEnable")
  8. ......
  9. }

  10. setObjAlarm(obj, alarmLevel) {
  11. ......
  12. obj.trigger("alarm", {"level":alarmLevel} )
  13. ......
  14. }
  15. }
复制代码


外部注册如下:

  1. app.on("AlarmEnable", function(ev){
  2. ......
  3. })

  4. app.query(".Thing").on("alarm",function(ev){
  5. if(ev.level == "critical"){
  6. ......
  7. }
  8. ......
  9. })
复制代码


—————————————————

数字孪生可视化:https://www.thingjs.com/


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

本版积分规则

130700ppkpl8x3t7tt1b1t