vue 中使用 bimface詳情

Posted on by

整個過程分為如下幾個步驟:

  • 1、安裝 vue 腳手架
  • 2、創建項目
  • 3、引入 bimface 響應的文件
  • 4、修改 App.vue 文件，實現頁面渲染

1. 安裝 vue 腳手架

這裡還是使用 Vue CLI

通過如下命令，全局安裝 vue 腳手架工具

npm install -g @vue/cli

安裝好之後，可以通過安裝 nrm ，來切換鏡像源，也可以直接進行下一步

2. 創建項目

找一個合適的目錄，打開 cmd 或者 powshell，鍵入如下命令，創建名為 bimface-demo 的項目

 vue create bimface-demo

接下來，就是一系列選擇瞭，通過截圖的方式演示

通過上下箭頭選擇 Manually select features ，表示不適用默認配置，而是要自己配置 vue 項目，然後敲擊回車

下面使用默認選擇即可，然後敲擊回車

下面選擇 vue2 版本，然後回車

 下面選擇代碼檢查工具 Eslint 的配置，通過上下箭頭選擇第3項，然後回車（後面禁用 ESlint 代碼檢查，如果不是專業前端，就不用配置這個瞭）

 下面選擇第1項目，表示保存代碼時，會對代碼進行檢查（因為後面我們會禁用 ESlint，所以這裡無所謂瞭），然後回車

 下面選擇使用默認配置(使用單獨的配置文件，而不是將所有配置都寫到一個文件中)，然後回車

 下面詢問，是否將上面的選擇保存為模板，下次創建 vue 項目時可以直接使用次模板，我們這裡輸入 n，然後回車，等待創建項目完成

 經過一段時間等待，看到大概如下的界面，就證明項目創建成功瞭

3. 引入 bimface 文件

3.1 運行項目

首先運行一下項目，看看項目創建的是否成功

使用 vs cde（建議使用 vs code，而不是 webstorm 等） 打開剛剛創建的項目 bimface-demo

打開方式是，在 vs cde 的菜單欄，選擇文件->打開文件夾，然後選擇  bimface-demo 文件夾，然後點擊 選擇文件夾 即可

打開之後，在編輯器左側“資源管理器”中，右鍵單擊空白處，選擇“在繼承終端中打開”，或者使用快捷鍵 ctrl+`(就是 TAB 鍵上面的那個鍵)，也可以在編輯器中打開終端，這是一個類似於 cmd 的命令行工具，我們可以在這裡鍵入一些命令，而不用專門開啟 cmd 或者 Powshell

 在終端中鍵入如下命令，然後回車，啟動服務

npm run serve

當出現如下界面，表示啟動成功

 此時在，瀏覽器中，輸入上面標紅的地址，出現如下界面，就萬事大吉瞭

3.2 引入 bimface 文件

上面都是一些準備工作，下面開始真正的編寫代碼

因為 廣聯達 沒有提供 bimface 的相關包，如 BimfaceSDKLoader，所以無法通過 npm 的方式在 vue 項目中安裝  BimfaceSDKLoader，所以隻能通過傳統方式引入瞭

在項目目錄中，找到 public 目錄中的 index.html，打開

將 demo 中引入的幾個 css 和 js 文件，在這裡引入，別忘瞭保存文件

4. 實現頁面渲染

首先在項目根目錄下，找到 .eslintrc.js 文件，打開，將標紅的文件註釋，目的是取消 ESLint 對代碼的檢查，減少很多麻煩

 然後在項目根目錄的 src 目錄下找到 App.vue 文件，打開，在這個頁面中編寫代碼，渲染 bimface 模型

4.1 修改 html

將 demo 中的項目代碼，復制到 vue 文件中的 template 模板中

<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>

4.2 修改 CSS

將文件中 style 標簽中的代碼全部刪除

4.3 修改 JS

將 demo 中的 js 代碼，修改後拷貝到 script 標簽中

加入 data 函數，存儲組件中需要的數據

 添加 mounted 方法，將如下代碼加進來

註意在合適的位置添加 this 關鍵字，用以表示當前組件

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

在 methods 中添加兩個自定義方法 successCallback 和 failureCallback

註意：方法開始的位置，聲明 that 變量用於指代 this，因為在此函數中，某些情況下， this 不再指代當前 vue 組件 

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);
    }
  }

到此這篇關於vue 中使用 bimface詳情的文章就介紹到這瞭,更多相關vue 中使用 bimface內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：