上期BIMFACE功能测评（一）重点给大家演示了在BIMFACE控制台，模型上传、转换预览以及简单的本地模型展示的全过程。
实现本地加载模型图纸是最基础的操作，如果想要转换之后的模型，能够产生更多的价值。就需要我们基于业务需求，进行二次开发。
BIMFACE定位是一款面向建筑业软件开发者的平台工具，提供了丰富的二次开发接口，可应用于设计、施工、运维乃至全生命周期的应用。特地去官网瞄了一眼案例介绍，类似奥雅纳、古河云等面向运维业务的效果感觉不错。
那为了让大家可以更好地在实际业务场景中进行二次开发，本期测评就立足与运维场景，帮助大家快速使用这些简单的API，实现更多功能。一张表先总览下BIMFACE适用于运维阶段的接口，以及我自己对应用场景的举例理解：
整体来说，根据现有的功能及前后端API来看，至少可以满足90%及以上的功能需求开发了。那接下来我就按照我表格里罗列的功能，展示下实现逻辑，本次主要介绍“构件编辑”功能块。
构件编辑对于是三维可视化应用的基础，建筑物作为一个非常复杂的集合体，包含的构件数量非常庞杂，在运维管理过程中，我们为了定位到重要设备的位置，突出显示关注的构件，需要对模型的显示进行一系列操作。
1、构件着色
BIMFACE提供2类构件着色的接口，分别是按照ID和条件给构件着色
//********************根据Id给构件着色*********************
var isOverrideComponentsColorByIdActivated = false;
function overrideComponentsColorById() {
var color = new Glodon.Web.Graphics.Color("#333333", 0.8);
if (!isOverrideComponentsColorByIdActivated) {
// 根据Id修改构件颜色及透明度
viewer3D.overrideComponentsColorById(["271431"], color);
// 根据Id修改构件透明度
viewer3D.overrideComponentsOpacityById(["307240"], 0.8);
viewer3D.render();
}
}
//********************根据条件给构件着色*********************
var isOverrideComponentsColorByDataActivated = false;
function overrideComponentsColorByData() {
if (!isOverrideComponentsColorByDataActivated) {
var color = new Glodon.Web.Graphics.Color("#333333", 0.8);
//设置给构件着色的条件
viewer3D.overrideComponentsColorByObjectData([{
"categoryId": "-2001360"
}], color);
viewer3D.overrideComponentsOpacityByObjectData([{
"levelName": "F2"
}], 0.8);
viewer3D.render();
}
}
2、构件隐藏
BIMFACE提供2类构件隐藏的接口，分别是按照ID和条件隐藏构件。
//********************根据Id隐藏构件*********************
var isHideComponentsByIdActivated = false;
function hideComponentsById() {
if (!isHideComponentsByIdActivated) {
viewer3D.hideComponentsById(["307240", "267327", "307240", "259504", "264857"]);
viewer3D.render();
}
}
//********************根据条件隐藏构件*********************
var isHideComponentsByDataActivated = false;
function hideComponentsByData() {
if (!isHideComponentsByDataActivated) {
//设置隐藏构件的条件
viewer3D.hideComponentsByObjectData([{
"levelName": "F2"
}]);
viewer3D.render();
} else {
//取消隐藏
viewer3D.showComponentsByObjectData([{
"levelName": "F2"
}]);
viewer3D.render();
}
isHideComponentsByDataActivated = !isHideComponentsByDataActivated;
}
3、构件半透明
BIMFACE提供2类构件半透明的接口，分别是按照ID和条件半透明构件。
//********************根据Id半透明构件*********************
var isTransparentComponentsByIdActivated = false;
function transparentComponentsById() {
if (!isTransparentComponentsByIdActivated) {
viewer3D.transparentComponentsById(["307240"]);
viewer3D.render();
} else {
//取消半透明
viewer3D.opaqueComponentsById(["307240"]);
viewer3D.render();
}
isTransparentComponentsByIdActivated = !isTransparentComponentsByIdActivated;
}
//********************根据条件半透明构件*********************
var isTransparentComponentsByDataActivated = false;
function transparentComponentsByData() {
if (!isTransparentComponentsByDataActivated) {
//设置半透明构件的条件
viewer3D.transparentComponentsByObjectData([{
"levelName": "F2"
}]);
viewer3D.render();
}
isTransparentComponentsByDataActivated = !isTransparentComponentsByDataActivated;
}
4、构件隔离
BIMFACE提供3类构件着色的接口，分别是按照ID、条件、fileID（针对集成文件）隔离构件。（备注：隔离是指除了指定构件，其他构件无法进行选中等操作）
//********************根据Id隔离构件*********************
function isolateComponentsById() {
if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !
isIsolateComponentsByDataActivated) {
//集成文件的ID应该使用"fileId.ElementId"
viewer3D.isolateComponentsById([
"4a9a86ef19c948ba847b3647246bd141.9812604"
], makeOthersTranslucent);
viewer3D.render();
isIsolateComponentsByIdActivated = !isIsolateComponentsByIdActivated;
}
}
//********************根据文件Id隔离构件*********************
function isolateComponentsByFileId() {
if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !
isIsolateComponentsByDataActivated) {
viewer3D.isolateComponentsByObjectData([{
"fileId": "1548026928112320"
}
], makeOthersTranslucent);
viewer3D.render();
isIsolateComponentsByFileIdActivated = !isIsolateComponentsByFileIdActivated;
}
}
//********************根据条件隔离构件*********************
function isolateComponentsByData() {
if (!isIsolateComponentsByIdActivated && !isIsolateComponentsByFileIdActivated && !
isIsolateComponentsByDataActivated) {
//设置隔离构件的条件
viewer3D.isolateComponentsByObjectData([{
"levelName": "F2"
}], makeOthersTranslucent);
viewer3D.render();
isIsolateComponentsByDataActivated = !isIsolateComponentsByDataActivated;
}
}
//********************隔离状态下不同构件颜色*********************
var isSetIsolatedComponentColorActivated = false;
function setColor() {
if (!isSetIsolatedComponentColorActivated) {
// 设置隔离状态下构件颜色
viewer3D.setIsolatedComponentColor(new Glodon.Web.Graphics.Color("#3223A6", 0.4));
viewer3D.render();
setButtonText("btnSetColor", "恢复颜色");
}
isSetIsolatedComponentColorActivated = !isSetIsolatedComponentColorActivated;
5、冻结构件
与构件隔离不同，冻结是指针对指定构件进行冻结，其他构件可以进行选中等操作。
isComponentsDeactivated = false;
function deactivate() {
if (!viewAdded) {
return;
}
if (isComponentsDeactivated) {
viewer3D.clearOverrideColorComponents();
viewer3D.activateAllComponents();
viewer3D.render();
} else {
// 为被冻结的构件着色，以示区分
var newColor = new Glodon.Web.Graphics.Color(128, 128, 128, 0.5);
viewer3D.overrideComponentsColorById(['267327', '268067'], newColor);
// 冻结屋顶的构件
viewer3D.deactivateComponentsById(['267327', '268067']);
viewer3D.render();
setButtonText('btnDeactivate', '恢复构件');
}
isComponentsDeactivated = !isComponentsDeactivated;
}
6、构件闪烁强调
设备状态跟踪是运维平台核心的功能，一旦设备发生故障，第一时间获取发生故障的设备信息是十分关键的。
//********************构件闪烁*********************
var isBlinkComponentsActivated = false;
function setBlinkColor() {
if (!isBlinkComponentsActivated) {
// 构件闪烁
viewer3D.addBlinkComponentsById(["3813038", "3939364", "4067477"]);
viewer3D.setBlinkColor(new Glodon.Web.Graphics.Color("#32D3A6", 0.8));
viewer3D.enableBlinkComponents(true);
viewer3D.setBlinkIntervalTime(500);
viewer3D.render();
}
isBlinkComponentsActivated = !isBlinkComponentsActivated;
}
上述就是本次功能测评—构件编辑功能板块内容，最后也教大家1个方法可以快速学会用这些接口。
以“构件闪烁强调”接口为例，首先找到对应方法“addBlinkComponentsById”，然后打开BIMFACE 的JavaScript API文档，Crtl+F搜索到对应的方法，如图：
就可以看到详细的方法介绍，参数类型及描述，这是我自己在学习的过程中感觉比较实用快捷的方法。作为新手小白刚上手直接看成段的代码还是挺有难度的，希望这种方法可以帮助大家快速上手，慢慢积累，争取高效开发出自己想要业务场景。
后面几期文章，我会按照表格上的内容持续更新。第一次做这样的学习输出，有疑问或者想法，欢迎随时私信联系。共同学习，一起成长！
