Tutorial: 如何在viewer2D或viewer3D的视图上打标签，比如图片？

我们在浏览模型的过程中，有时候我们想在点击一个构件的时候增加一个二维标签或者在加载模型的时候，有一些特别的构件可以用二维标签去描述此构件的详细信息。BIMFACE提供了对应的javascript的API，用户可以根据自己的业务流程，增加一个二维标签去表达更多信息。

下面代码是在View3D选中一个构件增加一张图片的具体实现方法:

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

viewer.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ComponentsSelectionChanged,function(componentData){
    if(componentData && componentData.objectId){

        // 首先创建DrawableContainer
        var drawaleContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
        drawaleContainerConfig.viewer = viewer;
        var drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawaleContainerConfig);
        var imageConfig = new Glodon.Bimface.Plugins.Drawable.ImageConfig();

        // 设置自己的imageUrl
        imageConfig.src = "flower.png";
        // 通过selection change可以得到构件ID和坐标
        imageConfig.worldPosition = componentData.worldPosition;
        var image = new Glodon.Bimface.Plugins.Drawable.Image(imageConfig);

        //图片的点击事件
        image.onClick(function() {
        var id=image.id;
        alert(id);
            });

        //添加image
        drawableContainer.addItem(image);
        }
    });

下面代码是在View2D选中一个构件增加一张图片的具体实现方法。

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

viewer2D.addEventListener(Glodon.Bimface.Viewer.Viewer2DEvent.MouseClicked,function(Position) {
    // 首先创建DrawableContainer
    var drawaleContainerConfig = new Glodon.Bimface.Plugins.Drawable.DrawableContainerConfig();
    drawaleContainerConfig.viewer = viewer2D;
    var drawableContainer = new Glodon.Bimface.Plugins.Drawable.DrawableContainer(drawaleContainerConfig);
    var config = new Glodon.Bimface.Plugins.Drawable.ImageConfig();

    // 设置自己的imageUrl
    config.src = "flower.png";

    //获取当前鼠标点击的坐标
      config.worldPosition = Position.worldPosition;
      var tag = new Glodon.Bimface.Plugins.Drawable.Image(config);

      //图片的点击事件
       tag.onClick(function(item){
              console.log(item);
            })
      drawableContainer.addItem(tag);
});