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

• 1、支持在viewer2D、viewer3D的视图上打自定义标签

注：可以是一个DOM元素，也可以是个字符串

• 2、标签支持Hover的时候，有Tip的提示
• 3、标签具有鼠标左键右键的监听事件
• 4、标签支持任意拖拽，并返回终点的坐标信息。（现仅支持2D）

下面代码是在View3D选中一个构件增加自定义标签的具体实现方法。

• 第一步正常加载模型
• 第二步在选中的监听事件写具体实现代码

function onSDKLoadSucceeded(viewMetaData){
   // 初始化viewer
   var view = document.getElementById('view');
   var WebAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
   WebAppConfig.domElement = view;
   var appEvents = Glodon.Bimface.Application.WebApplication3DEvent;

   var app = new Glodon.Bimface.Application.WebApplication3D(WebAppConfig);
   var viewer = app.getViewer();
   app.addView(viewMetaData.viewToken);

   // 初始化DrawableContainer
   var drawableConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
   drawableConfig.viewer = viewer;
   drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawableConfig);
   app.addEventListener(appEvents.ViewAdded, function() {
        app.render();
   });
   app.addEventListener(appEvents.ComponentsSelectionChanged, function(objectData) {
        if(!objectData.worldPosition)return
        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.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');
          });

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

下面代码是在View2D选中一个构件增加自定义标签的具体实现方法。

• 第一步正常加载图纸
• 第二步在图纸点击的监听事件写具体实现代码

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);

   viewer.addEventListener(events.ViewAdded,function() {
       viewer.render();
   });

    // 响应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'});
        });
    };