怎么在BIMFACE中自定义标签，并且绑定事件？

Question

怎么在BIMFACE中自定义标签，并且绑定事件？

Answer 1

【详细见下面链接】

如何在viewer2D或viewer3D的视图上打自定义标签？

2D图纸上增加自定义标签

function onSDKLoadSucceeded(viewMetaData){

// 初始化viewer
var view = document.getElementById('view');
var appConfig = new Glodon.Bimface.Application.WebApplication2DConfig();
appConfig.domElement = view;
var app = new Glodon.Bimface.Application.WebApplication2D(appConfig);
app.load(viewToken);
var events = Glodon.Bimface.Viewer.Viewer2DEvent;
var viewer = app.getViewer();
// 初始化DrawableContainer
var drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
drawableConfig.viewer = viewer;
drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
// 响应MouseClick事件
viewer.addEventListener(events.MouseClicked,function(objectData) {
       var config = new Glodon.Bimface.Plugins.Drawable.CustomItemConfig();
       // 创建自定义元素，可以是一个dom element，也可以是个字符串
       // ***************************************************
        var circle = document.createElement('div');
        circle.style.width = '80px';
        circle.style.height = '32px';
        circle.style.borderRadius = '10%';
        circle.style.background = '#fff';
        circle.innerText = '自定义标签';
        config.content = circle;
        // ****************************************************
      //允许拖拽
        config.draggable =true;
        config.viewer = viewer;
        //增加一个Tip提示
        config.tooltip = 'my tip';
        config.worldPosition = objectData.worldPosition;

      //生成customItem实例
      var customItem = new Glodon.Bimface.Plugins.Drawable.CustomItem(config);

      //自定义标签的鼠标左键事件
      customItem.onClick(function(item) {
           alert('left click');
      });
      //自定义标签的鼠标右键事件
      customItem.onRightClick(function(item) {
            alert('right click');
      });
    //拖拽事件
      customItem.onEndDrag(function(item) {
            console.log(JSON.stringify(item.worldPosition));
      });

      // 添加自定义标签
      drawableContainer.addItem(customItem)
      //设置Tip的样式
      customItem.setTooltipStyle({border:'1px'});
    });
};