BIMFACE功能测评- 如何创建二三维标签？

之前章节给大家重点讲解BIMFACE中针对构件状态展示的一些接口方法，那这次就重点和大家说说运维场景中比较高频且好用的功能——二三维标签。

BIMFACE目前支持RVT、SKP、IFC、IGMS、DWG和集成模型，共提供了二维标签、三维标签、聚合标签3种工具。

1. 二维标签：可应用于图纸/模型场景中，标签是浮于视图之上，不会被构件或图元遮挡。
2. 三维标签：可用于模型场景中，标签和构件存在三维遮挡关系。
3. 聚合标签：适用于标签过多导致体验差的场景，它可以将二维或者三维标签按照不同的层级进行缩放展示，大大提升了模型的美观度及加载性能。

其中二维标签又分为3类，包括自定义标签、引线标签和小地图标签。

1. 自定义标签：可在标签中添加文字、图片、调整样式，也可添加DOM元素以进行更多的功能拓展。
2. 引线标签：样式较为固定的标签类型，需要与构件进行关联，并且对单次出现的完整标签数量有限制。
3. 小地图标签：在小地图上显示的标签，可配置需要显示的楼层。
   接下来，我将分别介绍三种不同类型标签的实现方式。

一、二维标签-自定义标签

二维标签的三种类型添加逻辑是类似的，其中自定义标签应用更加灵活，本次我就挑选自定义标签来作为演示案例吧~

step 1. 创建自定义标签容器

BIMFACE中的实现逻辑是将所有的二维标签实例存放在一个二维标签的容器内，这里我们先来创建标签容器DrawableContainer：

// ************************自定义标签***********************
var DrawableContainer= null;
function createDrawableContainer() {
   
  if (!cunstomItemContainer) {
   
// 构造自定义标签容器配置drawableConfig
var drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
 // 设置markerContainerConfig匹配的viewer对象
drawableConfig.viewer = viewer2D;
// 构造三维标签容器markerContainer
drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
  }
}

step 2. 创建自定义标签

在容器创建完成后，我们可以创建具体的标签了。自定义标签允许添加DOM元素，因此它的样式非常多样，这里我们就在标签中添加一个div并对它的内容和样式进行设置，同时构造函数addItems：

function addItems(objectdata) {
   
                position = objectdata.worldPosition;
                var config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
                var rectangle = document.createElement('div');
                //自定义样式，支持Html的任意dom元素
                rectangle.style.width = '100px';
                rectangle.style.height = '32px';
                rectangle.style.lineHeight = '32px';
                rectangle.style.textAlign = 'center';
                rectangle.style.fontSize = '14px';
                rectangle.style.border = 'solid';
                rectangle.style.borderWidth = '1px';
                rectangle.style.borderColor = '#32D3A6';
                rectangle.style.color = '#444444';
                rectangle.style.borderRadius = '3px';
                rectangle.style.background = '#F2F2F2';
                rectangle.innerText = '自定义标签';
                config.content = rectangle;
                //设置可以拖拽
                config.draggable = true;
                config.offsetY = -32;