【原】从零开始学习3D可视化之获取对象

森友鹿锘 2021-06-01

展开全文

一、query()查询物体

二、其他查询方法

在数字孪生可视化场景中，添加完对象之后，我们如何尽快查找到对象呢？ThingJS中获取对象有如下几个方法：通过父子属性获取对象；通过分类属性获取对象；使用 query 方法获取对象。

一般来说，我们通过 query() 方法来查询物体（即获取对象）。下面我将详细讲解通过 query 方法获取对象的方法。找到物体后，就可以通过 ThingJS API 提供的功能来控制该物体了。

一、query()查询物体

1、获取园区中的物体

获取 CampusBuilder 数字孪生可视化园区中的物体时，需要将 query() 方法添加到 load 事件的回调函数中。绑定 load 事件来通知园区物体加载完成，然后就可以通过 query() 方法来获取数字孪生可视化园区中的物体了。代码如下所示。

app.on('load', function () {
 var obj = app.query(value)，
})

这个方法我们查询到的是一个 Selector集合，即数字孪生可视化园区中带有该属性的所有物体。

应用示例：按属性查询物体

加载场景后，添加按正则name查询按钮，数字孪生可视化园区内对应属性的模型可以被查询到。

// 加载ThingJS示例园区
var app = new THING.App({
 url: 'https://www./static/models/storehouse'
});
// 通过load事件回调函数，添加界面按钮并绑定按钮事件
app.on('load', function () {
 new THING.widget.Button('按name正则查询', queryByRegExp);
});
// 根据正则表达式匹配 name 中包含'car'的物体，点击按钮后更改物体颜色
function queryByRegExp() {
 var cars = app.query(/car/);
 // 上行代码等同于
 // var reg = new RegExp('car');
 // var cars=app.query(reg);
 
 cars.forEach(function (obj) {
 obj.style.color = 'red';
 })
}

运行项目后，点击按name正则查询按钮，数字孪生可视化园区内对应的车辆就会变成红色。

2、获取园区中单个物体

需要获取数字孪生可视化园区中的单个物体（如建筑）时，需要添加[index]，指明查询的对象为单个物体。

app.on('load', function () {
 var obj = app.query(value)[index]，
})

应用示例:查询建筑

将下面的代码输入到项目文件中，即可加载 ThingJS 示例园区，并在日志窗口显示查询建筑的结果。

//加载ThingJS示例园区
var app = new THING.App({
 url: 'https://www./static/models/storehouse'
});
 
//通过load事件加载园区信息，通过query()方法查询建筑，并将查询结果显示在日志窗口
app.on('load', function () {
 console.log(app.query('.Building')[0]);
});

运行项目后，在日志窗口，可以显示出查询的结果，即 ThingJS 示例园区中此建筑的信息。

3、获取地图中的物体

获取 CityBuilder 地图中的物体时，需要将 query() 方法添加到 complete 的回调函数中。

// 加载地图
var app = new THING.App();
 
// 引用地图组件脚本
THING.Utils.dynamicLoad(['https://www./uearth/history/uearth.min.v1.7.8.12.js'], function () {
 app.create({
 type: 'Map',
 // 地图场景名：map_6
 url: 'myMapDirectory’,
 complete: function (event) {
 console.log(app.query(value));
 }
 });
});

二、其他查询方法：

父子属性

下面的代码中，通过数字孪生可视化场景的“父子树”来查询对象，并将查询结果显示在日志窗口中。

// 加载ThingJS示例园区
var app = new THING.App({
 url: 'https://www./static/models/storehouse'
});
 
// 通过load事件加载园区
app.on('load', function (ev) {
 
 var campus = ev.campus; //获取园区对象
 
 // 通过场景的父子树访问对象
 var children = campus.children;
 for (var i = 0; i < children.length; i++) {
 var child = children[i];
 var id = child.id;
 var name = child.name;
 var type = child.type;
 console.log('id: ' + id + ' name: ' + name + ' type: ' + type); //日志窗口中返回查询信息
 };
})

运行结果如下：

分类属性

下面的代码中，通过分类属性来查询对象，并将查询结果显示在日志窗口中。

// 加载ThingJS示例园区
var app = new THING.App({
 url: 'https://www./static/models/storehouse'
});
 
// 加载场景后执行
app.on('load', function (ev) {
 // 获取园区对象
 var campus = ev.campus;
 
 // 日志窗口中显示园区内的 Thing 物体
 campus.things.forEach(function (thing) {
 console.log('Thing: ' + thing.id);
 });
 
 // 获取园区下的建筑对象
 var buildings = campus.buildings;
 buildings.forEach(function (building) {
 console.log('Building: ' + building.id);
 });
 
 // 日志窗口中显示第一个建筑中所有的楼层
 buildings[0].floors.forEach(function (floor) {
 console.log('Floor: ' + floor.id);
 });
});

运行结果如下：