如何在视图上打自定义标签?_文档_BIMFACE_BIM应用二次开发平台

如何在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'}); }); };