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

[发布] ThingJS可视化技巧:使用ThingJs在有限空间内体现上千个可视化对象

[复制链接]

ThingJS可视化技巧:使用ThingJs在有限空间内体现上千个可视化对象

发表于 2018-9-14 10:59:56 来自 发布 阅读模式 倒序浏览
zzv_icon3361 zzr_icon0 查看全部

在某公安系统的可视化应用场景中,摄像头、门禁、对讲、报警这些类型的对象少到2000个,多到上万个,在3D可视化中即要展示每个对象所处的空间位置,也要对每个对象进行操作。以往的经验,在设备上方创建贴在屏幕上的UI,就有了下面这种效果。

ThingJS可视化技巧:使用ThingJs在有限空间内体现上千个可视化对象

这是一个错误的示例

这样的一种展示方式不能看到对象所处的位置,很难辨别对象类型,也不能体现3D的可视美观性,同时在场景转动时更难定位对象的准确位置。

基于以上问题,我们尝试不使用图标标识位置的方案,采用一种新的位置定位可视化模式。将场景中的建筑虚化展示,每个管理对象增加对应的效果,这样在建筑外还是在单一楼层处都能够看到每一类型对象。


ThingJS可视化技巧:使用ThingJs在有限空间内体现上千个可视化对象


代码实现其实很简单,以下代码片段接口可参考官方API文档:http://www.thingjs.com/guide/?m=api

首先需要替换建筑材质

  1. app.buildings.forEach(build => {
  2. var floors = build.floors;// 得到建筑所有楼层
  3. ;floors.forEach(floor => {
  4. floor.plan.style.setMaterial({
  5. image: '/blue1.jpg',// 设置一张贴图样式
  6. wrap: THING.WrapType.Repeat,// 设置重复度
  7. DoubleSide: true,// 设置对象双面贴图
  8. });
  9. // 更换墙体的材质
  10. floor.wall.style.setMaterial({
  11. image: '/gray.png',
  12. wrap: THING.WrapType.Repeat,
  13. transparent: true,
  14. });
  15. })
  16. });
复制代码


ThingJS可视化技巧:使用ThingJs在有限空间内体现上千个可视化对象


然后是设置每个对象outline颜色

  1. app.query('.Thing').forEach(thing => {
  2. thing.style.outlineColor='#00FF00';// 设置对象轮廓线颜色
  3. })
复制代码


ThingJS可视化技巧:使用ThingJs在有限空间内体现上千个可视化对象

根据上面处理模式,我们可以设置更多的对象效果,包括闪烁、播放对象动画、颜色、放大缩小等等,可参考官网示例:http://www.thingjs.com/guide/?m=sample

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

本版积分规则

130700ppkpl8x3t7tt1b1t