构件树控件

为了让用户更直观的看到建筑的结构，且更方便的操作建筑，我们 SDK 提供了构件树控件 BuildingTreeWidget。

所谓构件树就是将建筑图层中的建筑构件拟化为一个树形结构的数据，进而展示在界面中，方便用户了解建筑。

构件树控件的初始化和管理方式与其他常规控件并无差异，只是在使用时有众多参数，在此就不在介绍初始化以及管理方式。

注：由于构件树是建筑构件的虚拟树结构，所以此结构树控件 BuildingTreeWidget 只能用于有建筑图层 BuildingLayer 的场景中。

1. 数据结构

1.1 BuildingTreeWidget 控件的参数

interface SceneTreeData {
    // 树结构数据
    nodes: SceneTreeNode[][][];
    // 树分组
    nodeGroups: SceneTreeNodeGroup[];
    // 控件面板样式
    style?: StyleSheet;
    // 构件树样式
    treeStyle?: TreeStyle;
    // 是否使用自定义数据
    useCustomData?: boolean;
    // 是否显示分组
    groupShow?: boolean;
    // 头部标题设置
    header?: string;
    // 图层ID设置
    layerIds?: string[];
    // 面板DOM
    container?: string | HTMLElement;
    // 是否打开属性面板
    openProperty?: boolean;
    // 是否打开右键菜单
    openContextMenu?: boolean;
    // 关键值所对应构件属性的设置
    keys?: SceneTreeAttributeKeysKeys;

    expandType?: string;
    // 是否展开树结构全部节点
    expandAll?: boolean;
    // 是否高亮row
    isHighlightRow?: boolean;
}

1.2 关键值所对应的构件属性

interface SceneTreeAttributeKeysKeys {
    Category?: string;
    Family?: string;
    FamilyType?: string;
    BldgLevel_Desc?: string;
    primary_key?: string;
}

1.3 树节点

interface SceneTreeNode {
    id: number;
    name: string;
    value: string;
    kind: string;
    parent: string | number;
    children?: SceneTreeNode[];
    attribute: {
        [key: string]: any;
    };
    code?: string;
    modelUID: string;
    root?: boolean;
    level?: number;
}

1.4 树分组

interface SceneTreeNodeGroup {
    name: string;
    value: string;
    icon: string;
    parent?: string | number;
    children?: SceneTreeNodeGroup[];
}

2. 控件使用

该构件树控件的使用方式有两种，一是使用默认数据，二是使用自定义数据。

2.1 默认数据

使用默认数据，就是我们常规的使用方式，即构件树的数据信息是由建筑BIM模型图层 BuildingLayer 的文件地址 url 来进行拼接修改请求过来的。

代码示例如下：

const layer = new ubm.BuildingLayer({
  id: "0",
  title: "小别墅",
  url: "http://121.46.3.70:8018/stream/i3s/OMhoU9Awg4U1/PIGkFfwT2b15/e8b9398a2e4e5423cff920703/emYWlDpqdlBV/SceneServer",
})
scene.layer.add(layer)
scene.ui.add(new ubm.BuildingTreeWidget(scene, {
  keys: {
    primary_key: "guid",// 场景目录所使用的keys值 
  }
}), "top-right")

可见，其默认数据的控件使用方式，需要配置很少的参数。但需要注意的是此 primary_key 是必须要填写的参数。

注：上述代码中的建筑图层的URL地址是非常特殊的，也就是说，对于使用默认数据的情况下，其图层地址需要是使用如上述代码中如此格式的图层地址才行。否则该构件树控件不可用，或者就使用自定义数据。

2.2 自定义数据

使用自定义数据，就是我们在控件外提前请求到构件树的数据信息，然后以参数形式传入到控件中进而渲染出构件树。

示例代码如下：

//自定义数据
const treeData  = ...

scene.ui.add(new ubm.BuildingTreeWidget(scene, {
  // 是否使用自定义数据
  useCustomData: true,
  keys: {
    primary_key: "guid",// 场景目录所使用的keys值 
  },
  // 使用自定义分组
  nodeGroups: [
    { icon: 'cube', name: '构件', value: '构件' }, 
    { icon: 'cube', name: '空间', value: '空间' }
  ],
  // 使用自定义数据
  nodes: [[treeData]]
}), "top-right")

可见，使用自定义数据需要自己事先获取到构件树的数据信息，而且此数据还需要与当前建筑图层是一一对应的。这种方式通常用于图层地址非第一种使用默认数据的URL的建筑图层，就可以通过自定义数据来完成构件树的展示。

注：需要注意的是，自定义数据的数据格式一定要和当前场景建筑图层的构件信息数据一一对应。否则构件树功能会有一定程度上的问题。
Table of Contents