# 图层管理

在本教程中，你可以通过BIMFACE提供的LayerManager类对场景内的图层进行管理。

提示：本教程需要先获取相关模型的View Token并成功加载场景，模型View Token的获取可参考获取View Token (opens new window),场景的加载方法可参考场景加载 (opens new window)。

# 教程

在上一节【场景加载】中，你已经实现了基础的场景加载与浏览。但实际应用中，你可能还需要对场景进行二次开发。二次开发的前提是场景已加载完成，这时，就需要在viewer中对场景的加载情况进行监听。

// 对场景加载情况进行监听
viewer.addEventListener(Glodon.Bimface.Viewer.ViewerGISEvent.SceneAdded, function () {
  // 在这里添加二次开发的相关代码
});

添加了场景加载的监听事件后，你就可以在监听事件的回调函数中添加扩展的代码，这些代码会在场景成功加载完成后开始执行。更多关于监听事件的使用方法可以参考监听事件 (opens new window)文档。

接下来，我们可以尝试对场景内的图层进行管理操作。图层是场景中的基本单元，每个图层实例对应了一个具体的模型资源，多源数据（BIM模型、倾斜摄影模型、地图、地形等）均可作为单独图层加载进场景。同一场景下允许存在多个图层，为了便于管理，我们引入了图层管理器（LayerManager）的类。

# 获取图层管理器

图层管理器不需要单独进行构造，在创建场景时会自动生成。你可以通过接口获取到场景的LayerManager。

// 声明layerManager变量
let layerManager;
// 获取图层管理器
layerManager = viewer.getLayerManager();

# 获取场景中的图层

获取到场景的图层管理器后，你还可以通过接口获取到已有的图层对象或根图层对象。其中，根图层对应场景目录树中的根节点对象。

// 根据图层ID获取对应图层对象
let layer = layerManager.getLayer('yourLayerId');

// 获取场景的根节点图层对象
let rootLayer = layerManager.getRootLayer();

# 添加新图层

在场景中，我们可以通过LayerManager添加新的图层，图层类型包括：

GroupLayer (opens new window)：图层组对象，可在该对象下添加多个图层，生成多图层文件夹。
BIMLayer (opens new window)：BIM图层，对应各类BIM三维模型资源的加载。支持的模型格式可参考BIMFACE支持格式 (opens new window)。
DrawingLayer (opens new window)：三维图纸图层，对应转换为流式加载模式的三维图纸资源的加载，目前仅dwg格式支持转为三维图纸。
ExternalObjectLayer (opens new window)：外部构件资源图层，对应外部构件资源的加载，支持obj、3ds、fbx格式的文件。
FeatureLayer (opens new window)：矢量资源图层，对应矢量资源模型的加载，支持shp、kml格式的矢量文件。
TilesetLayer (opens new window)：实景资源图层，对应倾斜摄影、点云数据的加载，支持osgb、las格式的文件。
TileLayer (opens new window)：地图图层，对应地图（DOM）资源的加载。目前BIMFACE支持TMS、WMTS协议的地图影像资源加载，默认加载天地图影像地图。
TerrainLayer (opens new window)：地形图层，对应地形（DEM）资源的加载，支持切换90m精度与30m精度地形，也可设置自定义地形资源 (opens new window)。

为了在场景中添加不同类型的模型文件，你需要构造不同类型的Layer对象，并利用View Token为其指定所要加载的资源，每个Layer对象仅可加载一个模型文件。需要注意的是，GIS场景中仅支持加载转换为bimtiles格式的模型，因此在进行模型转换时需选择“流式加载”模式。

构造完对应的Layer对象并指定待加载资源的View Token后，就可以调用LayerManager的添加图层方法，将Layer对象添加至场景指定的图层组中。

// ********************** 添加图层组 **********************
// 定义构造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资源 **********************
// 定义构造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');

// ********************** 添加三维图纸资源 **********************
// 定义构造DrawingLayer所需的配置参数
let option;
// 设置图层的Id、名称
option.id = 'drawingLayerId';
option.name = 'drawingLayer';
// 指定待加载三维图纸的View Token
option.viewToken = '<yourViewToken>'

// 构造DrawingLayer
let drawingLayer = new Glodon.Bimface.Layer.DrawingLayer(option);

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

// ******************** 添加shp矢量资源 ********************
// 定义构造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(featureLayer,'groupLayerId');

在实际场景应用中，通过控制台进入场景编辑界面，进行图层资源的添加删除等操作会更加方便便捷。

# 删除已有图层

如果想移除场景中已有的图层，可通过LayerManager进行图层的删除操作。

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

# 移动图层位置

你也可以对图层的层级位置进行更改，完成场景目录树的架构调整。

// 根据图层ID移动featureLayer对象至根目录图层
layerManager.moveLayer('featureLayerId',rootLayer.getId());

# 运行结果

输入以上代码，浏览器就可以加载我们对场景图层进行操作管理后的场景了。

# 完整代码

<!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();
        // 添加三维图纸资源
        addDrawingLayer();
        // 添加shp矢量资源
        addFeatureLayer();

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

        // 根据图层ID移动featureLayer对象至根目录图层
        layerManager.moveLayer('featureLayerId',rootLayer.getId());
      });

    }

    // 加载失败回调函数
    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');
    }

    // ********************** 添加三维图纸资源 **********************
    function addDrawingLayer(){
      // 定义构造DrawingLayer所需的配置参数
      let option;
      // 设置图层的Id、名称
      option.id = 'drawingLayerId';
      option.name = 'drawingLayer';
      // 指定待加载三维图纸的View Token
      option.viewToken = '<yourViewToken>'

      // 构造DrawingLayer
      let drawingLayer = new Glodon.Bimface.Layer.DrawingLayer(option);

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

    // ******************** 添加shp矢量资源 ********************
    function addFeatureLayer(){
      // 定义构造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(featureLayer,'groupLayerId');
    }
  </script>
</body>

</html>

你已经成功掌握了场景图层管理的内容，接下来你将学习到构件管理 (opens new window)相关的知识。

← 场景加载构件管理 →