怎么在BIMFACE中自定义标签,并且绑定事件?

怎么在BIMFACE中自定义标签,并且绑定事件?

阅读 1.4k
评论
    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'});
        });
    };
    

    图片描述

      撰写回答

      登录后参与交流、获取后续更新提醒