vue 中使用 bimface详情

npm install -g @vue/cli

 vue create bimface-demo

npm run serve
 

<template>
  <div id="app">
    <section class="wrap">
      <section class="viewer-box">
        <div class="viewer-2d" id="viewer2d"></div>
        <div class="viewer-3d" id="viewer3d"></div>
      </section>
    </section>
  </div>
</template>

 mounted() {
    let options = new BimfaceSDKLoaderConfig();
    options.viewToken = this.viewToken;
    BimfaceSDKLoader.load(options, this.successCallback, this.failureCallback);
  },

methods:{
     successCallback(viewMetaData) {
       let that=this
      // 获取DOM元素
      let dom3d = document.getElementById('viewer3d');
      // 配置参数
      let config = new Glodon.Bimface.Application.WebApplication3DConfig();
      config.domElement = dom3d;
      config.enableViewhouse = false;
      //取消工具条
      config.Toolbars = [];
      // 创建viewer3D对象
      let app = new Glodon.Bimface.Application.WebApplication3D(config);
      // 添加模型
      app.addView(that.viewToken);
      let viewer3D = app.getViewer();
 
      //模型点击监听事件
      app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.MouseClicked, function (objectData) {
        componentId = objectData.objectId;
        //根据模型构件ID获取对应图纸的构件ID
        that.viewerDrawing.toDrawingId(that.componentId, getElementId);
        // 定义获取图纸对应图元ID的回调函数
        function getElementId(elementId) {
          if (elementId) {
            //如果当前图纸有对应的模型构件ID，就缩放到对应位置
            that.viewerDrawing.zoomToObject(elementId);
            that.viewerDrawing.update();
          } else {
            //如果当前图纸没有对应的模型构件ID，需进一步判断是否有包含该构件的图纸
            viewer3D.getDrawingListbyId(that.fileId, that.componentId, getDrawing);
            function getDrawing(data) {
              if (data.length) {
                // 取第一张图纸进行二三维联动
                let drawingId = data[0].viewInfo.id;
                that.viewerDrawing.destroy();
                that.viewerDrawing.load(viewToken, drawingId)
              }
            }
          }
        }
      }
      )
 
      // 监听添加view完成的事件
      app.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        // 渲染3D模型
        app.render();
        //自适应屏幕大小
        window.onresize = function () {
          viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
        }
        //隐藏右上角viewhouse
        //viewer3D.hideViewHouse();
        let options2d = new BimfaceSDKLoaderConfig();
        options2d.viewToken = that.viewToken;
        options2d.viewType = BimfaceViewTypeOption.DrawingView;
        BimfaceSDKLoader.load(options2d, successCallback2d, failureCallback2d);
        function successCallback2d(viewMetaData) {
          let dom2d = document.getElementById('viewer2d');
          let config2d = new Glodon.Bimface.Viewer.ViewerDrawingConfig();
          config2d.domElement = dom2d;
          //添加图纸
          that.viewerDrawing = new Glodon.Bimface.Viewer.ViewerDrawing(config2d);
          let drawingUrl = viewMetaData.drawingUrl;
          //如果是单模型的话，只需要传图纸id
          let _id = 582803;
          that.viewerDrawing.load(that.viewToken, _id);
 
          //如果是集成模型的话，需要传图纸id和单模型的fileid
          //   let _id =1287057;
          //   let _fileid =1628186476905664;
          //   viewerDrawing.load(viewToken,_id,_fileid);
 
          // 监听图纸加载完成的事件
          that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.Loaded, zoomToElement);
 
          function zoomToElement() {
            if (that.componentId) {
              that.viewerDrawing.toDrawingId(that.componentId, function (elementId) {
                //缩放到对应位置
                that.viewerDrawing.zoomToObject(elementId);
                that.viewerDrawing.update();
                console.log(elementId);
              })
            } else {
              console.log("!componentId");
            }
          }
 
          that.viewerDrawing.addEventListener(Glodon.Bimface.Viewer.ViewerDrawingEvent.SelectionChanged, function (objectData) {
            if (objectData.length > 0) {
              //根据图纸点击的构件ID获取对应的模型构件ID
              let componentId_2 = that.viewerDrawing.toModelId(objectData[0]);
              viewer3D.clearIsolation();
              //定位到该构件
              viewer3D.setSelectedComponentsById([componentId_2]);
              //是否存在构件
              let isExist = viewer3D.getViewer().getComponentInfoByUserId(componentId_2);
              if (isExist) {
                viewer3D.zoomToSelectedComponents();
              } else {
                viewer3D.render();
              }
            }
          })
        }
        function failureCallback2d(error) {
          console.log(error);
        }
      })
    },
    failureCallback(error) {
      console.log(error);
    }
  }