vue 項目中使用bimface

在vue項目中使用bimface 模型的方法
效果圖

點擊加載地圖後

在vue項目的根目錄下找到

在裏面加入<script src="https://static.bimface.com/api/BimfaceSDKLoader/[email protected]" charset="utf-8"></script>
如圖
然後在我們的vue頁面裏面如圖修改
結構

樣式

行爲

代碼

<template>
   <div class='main'>
    <div class='buttons'>
      <button class="button" id="btnLoadMap" @click="loadMap">加載地圖</button>
    </div>
    <!-- 定義DOM元素，用於在該DOM元素中顯示模型或圖紙 -->
    <div id="domId"></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      viewToken: 'a7c49f0a880d4dff9bd5d932e1ff5e1d',
      viewer3D:'',
      app:'',
      viewAdded:false,
      isMapLoaded:false,
      loaderConfig:null,
      
    }
  },
  mounted() {
    var that=this
      var options = new BimfaceSDKLoaderConfig();
      options.viewToken = that.viewToken;
      BimfaceSDKLoader.load( options, that.successCallback,that.failureCallback);
  },
  methods:{
    setButtonText(btnId, text) {
      var dom = document.getElementById(btnId);
      if (dom != null && dom.nodeName == "BUTTON") {
        dom.innerText = text;
      }
    },
    // 加載成功回調函數
     successCallback(viewMetaData) {
       var that=this
      var dom4Show = document.getElementById('domId');
      // 設置WebApplication3D的配置項
      var webAppConfig = new Glodon.Bimface.Application.WebApplication3DConfig();
      webAppConfig.domElement = dom4Show;
      webAppConfig.enableLogarithmicDepthBuffer = true;
      // 創建WebApplication3D，用以顯示模型
      var app = new Glodon.Bimface.Application.WebApplication3D(webAppConfig);
      app.addView(viewMetaData.viewToken);
      var viewer3D = app.getViewer();
      that.viewer3D = viewer3D;
      // 增加加載完成監聽事件
      viewer3D.addEventListener(Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
        that.viewAdded = true;
        //自適應屏幕大小
        window.onresize = function () {
          viewer3D.resize(document.documentElement.clientWidth, document.documentElement.clientHeight - 40)
        }
        // 渲染場景
        viewer3D.render();
      });
    },
     // 加載失敗回調函數
     failureCallback(error) {
      console.log(error);
    },

     // 添加構件嵌套關係
    loadMap() {
      var that=this
      if (!that.viewAdded) {
        return;
      }
      if (!that.isMapLoaded) {
        // 構造地圖配置項
        var mapConfig = new Glodon.Bimface.Plugins.TileMap.MapConfig();
        mapConfig.viewer = that.viewer3D;
        // 設置模型載入的基點
        mapConfig.basePoint = {
          "x": -85689.088,
          "y": -62066.347
        }
        mapConfig.modelPosition = [121.63259566511255,29.837978723638756];
        mapConfig.modelRotationZ = 0 * Math.PI / 180;
        mapConfig.modelAltitude = 0;
        // 構造地圖對象
        var map = new Glodon.Bimface.Plugins.TileMap.Map(mapConfig);
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
    }

    .buttons {
      font-size: 0;
    }

    .button {
      margin: 5px 0 5px 5px;
      width: 100px;
      height: 30px;
      border-radius: 3px;
      border: none;
      background: #32D3A6;
      color: #FFFFFF;
    }

    .main {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
    }
     #domId {
      flex: 1;
      height:500px;
    }
</style>