一、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提供的示例,在自己的项目查询对应对象来实现不同的数字孪生可视化效果。
楼主最近还看过