# 构件管理
在本教程中，你可以通过BIMFACE提供的ElementManager相关类对指定图层下的构件进行管理。
提示：本教程需要先获取场景中的图层对象，可参考图层管理 (opens new window)。
# 教程
在上一节【图层管理】中，你已经实现了场景内的图层管理。但从应用层面出发，你对模型进行操作的颗粒度可能还会细化到构件级别。因此，在图层的概念下，我们针对不同类型的模型提供了更细粒度的管理器。
ComponentManager (opens new window)：构件管理器。对BIMLayer，你可以通过其对应的构件管理器对构件进行管理。
ExternalObjectManager (opens new window)：外部构件管理器。对ExternalObjectLayer，你可以通过其对应的外部构件管理器对图层下的外部构件对象进行管理。
接下来，我们将依次对构件、外部构件管理器进行介绍。
# BIMLayer的构件管理器
构件作为BIM模型的基本组成单元，具有广泛的操作应用空间。为了便于对构件进行管理，我们引入了构件管理器。构件管理器不需要单独进行构造，在创建BIMLayer时会自动生成。你可以先通过BIMLayer下的接口获取到ComponentManager，再通过ComponentManager下的接口对构件进行不同操作。
// 获取BIMLayer的ComponentManager，以便于对构件进行管理
let componentManager = bimLayer.getComponentManager();
// 对所有构件进行着色
componentManager.overrideColor({all:true},new Glodon.Web.Graphics.Color(255,0,0,1));
// 对ID为12、14的构件清除着色效果
componentManager.restoreColor({ids:['12','14']});
更多关于构件管理的方法，可参考相关接口文档 (opens new window)部分。
# ExternalObjectLayer的外部构件管理器
在外部构件图层中，我们支持添加多个外部构件对象进行应用，为了便于对外部构件进行管理，我们引入了外部构件管理器。外部构件管理器不需要单独进行构造，在创建ExternalObjectLayer时会自动生成。你可以先通过ExternalObjectLayer下的接口获取到ExternalObjectManager，再通过ExternalObjectManager下的接口对外部构件进行不同操作。
// 获取ExternalObjectLayer对应的要素管理器
let extObjManager = extObjLayer.getExternalObjectManager();
// 添加新的外部构件对象
extObjManager.loadObject({
name:"car",
url:{objectUrl:"https://static.bimface.com/attach/6db9d5bcf88640f997b23be61e870ee8_%E6%B1%BD%E8%BD%A6.3DS"}
},function(){
// 获取外部构件id
let id = extObjManager.getObjectIdByName('car');
// 设置外部构件的位置，传入经纬度+高程
extObjManager.setLocation(id,{lat: 31.254685987, lon: 121.568945612, alt: 0})
// 对外部构件进行缩放操作
extObjManager.scale(id,{x:0.01,y:0.01,z:0.01});
viewer.render();
});
更多关于外部构件管理器的方法，可参考相关接口文档 (opens new window)部分。
# 运行结果
输入以上代码，浏览器就可以加载我们对构件及要素进行操作管理后的场景了。
# 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first scene in BIMFACE</title>
</head>
<body>
<div id="domId" style="width:800px; height:600px"></div>
<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js" charset="utf-8"></script>
<script>
// 声明viewer、app及layerManager变量
let viewer, app, layerManager;
// 声明viewToken变量，填入想要显示的模型/图纸/场景token
let viewToken = '<yourViewToken>';
// 构造BimfaceSDKLoaderConfig对象
let loaderConfig = new BimfaceSDKLoaderConfig();
// 设置BimfaceSDKLoaderConfig的viewToken
loaderConfig.viewToken = viewToken;
// 调用BimfaceSDKLoader的load方法加载模型
BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
// 加载成功回调函数
function successCallback(viewMetaData) {
// 获取DOM元素
let domShow = document.getElementById('domId');
// 创建WebApplicationGISConfig
let webAppConfig = new Glodon.Bimface.Earth.Application.WebApplicationGISConfig();
// 设置创建WebApplicationGIS的dom对象
webAppConfig.domElement = domShow;
// 创建WebApplicationGIS
app = new Glodon.Bimface.Earth.Application.WebApplicationGIS(webAppConfig);
// 加载待显示的场景
app.addScene(viewToken);
// 获取ViewerGIS对象
viewer = app.getViewer();
// 对场景加载情况进行监听
viewer.addEventListener(Glodon.Bimface.Earth.Viewer.ViewerGISEvent.SceneAdded, function () {
// 获取图层管理器
layerManager = viewer.getLayerManager();
// 根据图层ID获取对应图层对象
let layer = layerManager.getLayer('yourLayerId');
// 获取场景的根节点图层对象
let rootLayer = layerManager.getRootLayer();
// 添加图层组
addGroupLayer();
// 添加BIM资源
addBIMLayer();
// 添加三维图纸资源
addDrawingLayer();
// 添加外部构件图层
addExtObjLayer();
// 根据图层ID删除图层对象
layerManager.removeLayer('yourLayerId');
// 根据图层ID移动BIMLayer对象至根目录图层
layerManager.moveLayer('bimLayerId',rootLayer.getId());
// 对BIMLayer的构件进行管理
managerComponents();
// 对ExternalObjectLayer的外部构件进行管理
managerExternalObjects();
});
}
// 加载失败回调函数
function failureCallback(error) {
console.log(error);
}
// ********************** 添加图层组 **********************
function addGroupLayer(){
// 定义构造GroupLayer所需的配置参数
let option;
// 设置图层的Id、名称
option.id = 'groupLayerId';
option.name = 'groupLayer';
// 构造GroupLayer
let groupLayer = new Glodon.Bimface.Earth.Layer.GroupLayer(option);
// 调用LayerManager的接口将GroupLayer添加至场景的根节点图层
layerManager.addLayer(groupLayer);
}
// ********************** 添加BIM资源 **********************
function addBIMLayer(){
// 定义构造BIMLayer所需的配置参数
let option;
// 设置图层的Id、名称
option.id = 'bimLayerId';
option.name = 'bimLayer';
// 指定待加载BIM模型的View Token
option.viewToken = '<yourViewToken>'
// 构造BIMLayer
let bimLayer = new Glodon.Bimface.Earth.Layer.BIMLayer(option);
// 调用LayerManager的接口将BIMLayer添加至GroupLayer下
layerManager.addLayer(bimLayer,'groupLayerId');
}
// ********************** 添加三维图纸资源 **********************
function addDrawingLayer(){
// 定义构造DrawingLayer所需的配置参数
let option;
// 设置图层的Id、名称
option.id = 'drawingLayerId';
option.name = 'drawingLayer';
// 指定待加载三维图纸的View Token
option.viewToken = '<yourViewToken>'
// 构造DrawingLayer
let drawingLayer = new Glodon.Bimface.Earth.Layer.DrawingLayer(option);
// 调用LayerManager的接口将DrawingLayer添加至根目录下
layerManager.addLayer(drawingLayer);
}
// ********************** 添加外部构件图层 **********************
function addExtObjLayer(){
// 定义构造ExternalObjectLayer所需的配置参数
let option;
// 设置图层的Id、名称
option.id = 'extObjLayerId';
option.name = 'extObjLayer';
// 构造ExternalObjectLayer
let extObjLayer = new Glodon.Bimface.Earth.Layer.ExternalObjectLayer(option);
// 调用LayerManager的接口将ExternalObjectLayer添加至根目录下
layerManager.addLayer(extObjLayer);
}
// ********************* 对构件进行管理 *********************
function managerComponents(){
// 获取BIMLayer的ComponentManager，以便于对构件进行管理
let componentManager = layerManager.getLayer('bimLayerId').getComponentManager();
// 对所有构件进行着色
componentManager.overrideColor({all:true},new Glodon.Web.Graphics.Color(255,0,0,1));
// 对ID为12、14的构件清除着色效果
componentManager.restoreColor({ids:['12','14']});
}
// ********************* 对外部构件进行管理 *********************
function managerExternalObjects(){
// 获取ExternalObjectLayer对应的要素管理器
let extObjManager = layerManager.getLayer('extObjLayerId').getExternalObjectManager();
// 添加新的外部构件对象
extObjManager.loadObject({
name:"car",
url:{objectUrl:"https://static.bimface.com/attach/6db9d5bcf88640f997b23be61e870ee8_%E6%B1%BD%E8%BD%A6.3DS"}
},function(){
// 获取外部构件id
let id = extObjManager.getObjectIdByName('car');
// 设置外部构件的位置，传入经纬度+高程
extObjManager.setLocation(id,{lat: 31.254685987, lon: 121.568945612, alt: 0})
// 对外部构件进行缩放操作
extObjManager.scale(id,{x:0.01,y:0.01,z:0.01});
viewer.render();
});
}
</script>
</body>
</html>
恭喜你，已经成功掌握了构件管理相关的内容。