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

[分享] 森大屏的引用和切换

[复制链接]

森大屏的引用和切换

发表于 2023-3-14 14:57:10 来自 分享 只看大图 阅读模式 倒序浏览
zzv_icon1793 zzr_icon3 查看全部
本帖最后由 夏天骑冷月 于 2023-3-14 14:58 编辑

目前森大屏已经是支持在低代码环境中加载了,可直接在我的图表中找到对应的森大屏图表进行引入

森大屏的引用和切换
找到对应的森大屏资源双击即可引用.
(1)森大屏如何切换加载另一套森大屏
可定于变量 chart 将ui赋值给chart,之后就可以通过destroy()方法清除大屏,再加载其他的大屏图表,以下是代码示例。可更换为自己的图表id查看效果
  1. var chart
  2. // 在线开发引入森大屏图表脚本
  3. THING.Utils.dynamicLoad(['https://www.thingjs.com/static/plugins/thing.charts.min/1.0.0/thingjs-charts.umd.js'], function () {
  4.     // 创建图表
  5.     new THING.CHARTS({
  6.         id: 'ca245fce3cc34568bb8be790f7677416', // 场景id
  7.         el: document.getElementById('div2d'), // 挂载节点
  8.         baseUrl: 'https://charts.thingjs.com', // 地址
  9.         hide3D: true, // 隐藏场景内的3D,默认为false
  10.         hideCanvasBackground: true, // 画布背景色是否设置为透明的,默认false
  11.         complete(ui) {
  12.             // 回调函数,ui是场景实例
  13.             // ui.destroy()
  14.             chart = ui

  15.         },
  16.     })
  17. })
  18. // 加载完成事件
  19. app.on('load', function (ev) {
  20.     /* 参数:
  21.      * ev.campus            园区,类型:Campus
  22.      * ev.buildings        园区建筑物,类型:Selector
  23.      */
  24.     var campus = ev.campus;
  25.     console.log('after load ' + campus.id);
  26.     // 切换层级到园区
  27.     app.level.change(campus);
  28.    

  29.             app.on(THING.EventType.EnterLevel, '*', function (ev) {
  30.                 chart.destroy()
  31.                 new THING.CHARTS({
  32.                     id: 'bbfe09528d9245b7be8a68f5aceaa03c', // 场景id
  33.                     el: document.getElementById('div2d'), // 挂载节点
  34.                     baseUrl: 'https://charts.thingjs.com', // 地址
  35.                     hide3D: true, // 隐藏场景内的3D,默认为false
  36.                     hideCanvasBackground: true, // 画布背景色是否设置为透明的,默认false
  37.                     complete(ui) {
  38.                         // 回调函数,ui是场景实例
  39.                         console.log(ui, ui.el)

  40.                     }


  41.                 })
  42.             })

  43.    
  44. })
复制代码
加载完成时为第一套图表:
森大屏的引用和切换
进入层级后触发事件删除第一套图表加载出第二套图表:
森大屏的引用和切换



avatar

3

主题

5

帖子

29

积分

新手上路

Rank: 1

积分
29
OLAF666 发表于 2023-3-14 15:18:54 显示全部楼层
6666 已解决 哈哈哈
avatar

3

主题

5

帖子

29

积分

新手上路

Rank: 1

积分
29
OLAF666 发表于 2023-3-15 08:38:36 显示全部楼层
切换大屏的时候会有长时间黑屏的情况这个问题开源解决吗?
avatar

29

主题

37

帖子

230

积分

中级会员

Rank: 3Rank: 3

积分
230
夏天骑冷月
 楼主|
发表于 2023-3-16 10:11:02 显示全部楼层
OLAF666 发表于 2023-3-15 08:38
切换大屏的时候会有长时间黑屏的情况这个问题开源解决吗?

后续更新版本会解决这个问题
avatar
游客~
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

130700ppkpl8x3t7tt1b1t