智慧电力可视化应用实现就那么简单

综合应用

这章节我们将讲解一些快速应用的案例，把往期的重要知识点和项目中常见的需求场景联系起来。

拾取和选择

关于 Pick 和 选择 的讲解，我们在前文已经讲述过，本章不在做过多赘述。

物体对象监控

物体面板显示监控

在 3D 的某些应用需求中，当选中某个物体时，需要展示该物体的详细信息，我们可以创建一个物体面板，来展示这些数据。

有如下几步即可实现让物体面板显示监控：

query 获取物体对象集合；

对物体集合注册单击事件；

点击选中的物体 加入Selection中；

通过Select DeSelect事件 对物体做相应的操作；

如果是接口数据 可通过Ajax或WebSocket进行请求、对接；

创建物体面板 双向绑定数据；

示例效果如下图所示：

批量显示监控面板

在某些 3D 可视化应用场景中，需要显示一批物体的某些重要指标，如何实现多个对象批量显示这些数据呢？

我们通过 UIAnchor ，将相应的数据展示面板作为孩子连接到每个对象上即可。

查看示例

示例效果如下图所示：

动态加载场景

关于动态创建组合场景的讲解，我们在前文已经讲述过，本章不在做过多赘述。

查看示例

实现思路如下图所示：

视频中代码实现过程的具体迭代版本如下：

版本1如下：

var app = new THING.App({"url": "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%8A%A8%E6%80%81%E5%B1%82%E7%BA%A7%E5%A4%96%E7%AB%8B%E9%9D%A2", "skyBox": "BlueSky",});// 主场景加载完后 删掉楼层app.on('load', function (ev) { // 进入层级切换 app.level.change(ev.campus); console.log('卸载园区建筑下的默认楼层'); // 园区加载完成后，将园区中建筑下的楼层删除（Floor） for (var i = 0; i

版本2如下：

var app = new THING.App({ "url": "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%8A%A8%E6%80%81%E5%B1%82%E7%BA%A7%E5%A4%96%E7%AB%8B%E9%9D%A2", "skyBox": "BlueSky",});// 主场景加载完后 删掉楼层 app.on('load', function (ev) { // 进入层级切换 app.level.change(ev.campus); console.log('卸载园区建筑下的默认楼层'); // 园区加载完成后，将园区中建筑下的楼层删除（Floor） for (var i = 0; i

版本3如下：

var app = new THING.App({ "url": "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%8A%A8%E6%80%81%E5%B1%82%E7%BA%A7%E5%A4%96%E7%AB%8B%E9%9D%A2", "skyBox": "BlueSky",});// 主场景加载完后 删掉楼层app.on('load', function (ev) { // 进入层级切换 app.level.change(ev.campus); console.log('卸载园区建筑下的默认楼层'); // 园区加载完成后，将园区中建筑下的楼层删除（Floor） for (var i = 0; i

版本4如下：

var app = new THING.App({"url": "https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/%E5%8A%A8%E6%80%81%E5%B1%82%E7%BA%A7%E5%A4%96%E7%AB%8B%E9%9D%A2","skyBox": "BlueSky",});// 主场景加载完后 删掉楼层app.on('load', function (ev) {// 进入层级切换app.level.change(ev.campus);console.log('卸载园区建筑下的默认楼层');// 园区加载完成后，将园区中建筑下的楼层删除（Floor）for (var i = 0; i

相对关系与坐标转换

相对关系

之前的教程中已经讲解过了，当创建对象，管理对象时，我们可以设置该物体的父物体。

指定了对象的父物体后，那么该对象的位移、旋转、缩放以及显示隐藏，默认都跟随父物体的变化而变化。

如果要让子对象不继承父物体的位移、旋转、缩放，可分别设置相应的 inheritPosition 、inheritAngles 、inheritScale 值为 false 实现。

坐标转换

之前的教程中已经讲解过了坐标转换，本章不在做多余赘述。

为了让大家更容易理解与使用相对关系与坐标转化，我们新增了一个 示例。

动态加载管理对象

对于一些有摆放规律或者有位置信息的管理对象（比如书柜里的书、楼层里的烟雾感应器、消防喷淋器），我们可以动态的请求数据来进行批量创建。在这种应用场景下创建管理对象时，建议设置对象的父物体、使用相对坐标，以更方便的进行对象的管理和控制。