一、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.thingjs.com/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.thingjs.com/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.thingjs.com/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.thingjs.com/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.thingjs.com/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);
 });
});

运行结果如下：

现在我们已经学会了ThingJS中如何查询具体对象，大家可点击进入ThingJS面向物联网的3D可视化开发平台页面，点击查看ThingJS提供的示例，在自己的项目查询对应对象来实现不同的数字孪生可视化效果。

ITPub博客

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

最新文章