# 构件管理

在本教程中，你可以通过BIMFACE提供的ElementManager相关类对指定图层下的构件、要素进行管理。

提示：本教程需要先获取场景中的图层对象，可参考图层管理 (opens new window)。

# 教程

在上一节【图层管理】中，你已经实现了场景内的图层管理。但从应用层面出发，你对模型进行操作的颗粒度可能还会细化到构件级别。因此，在图层的概念下，我们针对不同类型的模型提供了更细粒度的管理器。

ComponentManager (opens new window)：构件管理器。对BIMLayer，你可以通过其对应的构件管理器对构件进行管理。
PointFeatureManager (opens new window)：点要素管理器。若FeatureLayer对应的矢量数据是由点要素组成的，那么你可以通过其对应的点要素管理器对点要素进行管理，其中要素是组成矢量模型的最小单元。
LineFeatureManager (opens new window)：线要素管理器。若FeatureLayer对应的矢量数据是由线要素组成的，那么你可以通过其对应的线要素管理器对线要素进行管理。
PolygonFeatureManager (opens new window)：面要素管理器。若FeatureLayer对应的矢量数据是由面要素组成的，那么你可以通过其对应的面要素管理器对面要素进行管理。

接下来，我们将依次对构件、要素管理器进行介绍。

# 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)部分。

# FeatureLayer的要素管理器

在矢量数据中，我们通常用要素来表示构成数据的基本单元。矢量数据可以划分为点要素、线要素以及面要素三种类型，单个shp数据仅可以包含一种类型的要素。为了对不同类型的要素进行管理，我们引入了三种要素管理器。要素管理器不需要单独进行构造，在创建FeatureLayer时会自动生成。你可以先通过FeatureLayer下的接口获取到对应的FeatureManager，再通过FeatureManager下的接口对要素进行不同操作。

// 获取FeatureLayer对应的要素管理器。若shp文件为面要素文件，则需要获取PolygonFeatureManager
let polygonFeatureManager = featureLayer.getPolygonComponentManager();

// 对ID为18、22、25的要素进行闪烁
polygonFeatureManager.blink({ids:['18','22','25']},new Glodon.Web.Graphics.Color(255,255,0,1));
// 清除ID为18的要素闪烁效果
polygonFeatureManager.clearBlinkComponents({ids:['18']});

更多关于要素管理的方法，可参考相关接口文档 (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.Application.WebApplicationGISConfig();
      // 设置创建WebApplicationGIS的dom对象
      webAppConfig.domElement = domShow;
      // 创建WebApplicationGIS
      app = new Glodon.Bimface.Application.WebApplicationGIS(webAppConfig);

      // 加载待显示的场景
      app.addScene(viewToken);

      // 获取ViewerGIS对象
      viewer = app.getViewer();

      // 对场景加载情况进行监听
      viewer.addEventListener(Glodon.Bimface.Viewer.ViewerGISEvent.SceneAdded, function () {
        // 获取图层管理器
        layerManager = viewer.getLayerManager();

        // 根据图层ID获取对应图层对象
        let layer = layerManager.getLayer('yourLayerId');
        // 获取场景的根节点图层对象
        let rootLayer = layerManager.getRootLayer();

        // 添加图层组
        addGroupLayer();
        // 添加BIM资源
        addBIMLayer();
        // 添加shp矢量资源
        addFeatureLayer();

        // 根据图层ID删除图层对象
        layerManager.removeLayer('yourLayerId');

        // 根据图层ID移动featureLayer对象至根目录图层
        layerManager.moveLayer('featureLayerId',rootLayer.getId());
        
        // 对BIMLayer的构件进行管理
        managerComponents();
        // 对FeatureLayer的要素进行管理
        managerFeatures();
      });
    }

    // 加载失败回调函数
    function failureCallback(error) {
      console.log(error);
    }

    // ********************** 添加图层组 **********************
    function addGroupLayer(){
      // 定义构造GroupLayer所需的配置参数
      let option;
      // 设置图层的Id、名称
      option.id = 'groupLayerId';
      option.name = 'groupLayer';

      // 构造GroupLayer
      let groupLayer = new Glodon.Bimface.Layer.GroupLayer(option);

      // 调用LayerManager的接口将GroupLayer添加至场景的根节点图层
      layerManager.addLayer(bimLayer,rootLayer.getId());
    }

    // ********************** 添加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.Layer.BIMLayer(option);

      // 调用LayerManager的接口将BIMLayer添加至GroupLayer下
      layerManager.addLayer(bimLayer,'groupLayerId');
    }

    // ******************** 添加shp矢量资源 ********************
    function addBIMLayer(){
      // 定义构造FeatureLayer所需的配置参数
      let option;
      // 设置图层的Id、名称
      option.id = 'featureLayerId';
      option.name = 'featureLayer';
      // 指定待加载shp资源的View Token
      option.viewToken = '<yourViewToken>'

      // 构造FeatureLayer
      let featureLayer = new Glodon.Bimface.Layer.FeatureLayer(option);

      // 调用LayerManager的接口将FeatureLayer添加至场景的根节点图层
      layerManager.addLayer(bimLayer,'groupLayerId');
    }

    // ********************* 对构件进行管理 *********************
    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 managerFeatures(){
      // 获取FeatureLayer对应的要素管理器。若shp文件为面要素文件，则需要获取PolygonFeatureManager
      let polygonFeatureManager = layerManager.getLayer('featureLayerId').getPolygonComponentManager();

      // 对ID为18、22、25的要素进行闪烁
      polygonFeatureManager.blink({ids:['18','22','25']},new Glodon.Web.Graphics.Color(255,255,0,1));
      // 清除ID为18的要素闪烁效果
      polygonFeatureManager.clearBlinkComponents({ids:['18']});
    }
  </script>
</body>

</html>

恭喜你，已经成功掌握了构件、要素管理相关的内容。接下来你将学习到效果管理 (opens new window)相关的知识。

← 图层管理效果管理 →