常见问题 > 详情

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