Bimface 基于vue调用bimface前端接口 - 2D图纸

<template>
  <!-- 1 -->
  <div class="hello" ref="bfContainer">
    <!-- 颜色模式 -->
    <button class="button" ref="blackandwhiteRef" @click="black_and_white">
      黑白模式
    </button>
    <!-- 视图列表 -->
    <button class="button" ref="viewListRef" @click="viewList">视图列表</button>
    <!-- 图层信息 -->
    <button class="button" ref="layersListRef" @click="layersList">
      图层信息
    </button>
    <!-- 管理图层 隐藏 -->
    <button class="button" ref="hideLayerRef" @click="hideLayer">
      隐藏图层
    </button>
    <!-- 选中图元 -->
    <button class="button" ref="selectPrimitiveRef" @click="selectPrimitive">
      选中图元
    </button>
    <!-- 给指定图元绘制云线框 -->
    <button class="button" ref="cloudLineRef" @click="cloudLine">
      矩形线框
    </button>
  </div>
</template>

<script>
// 2
import {
  BimfaceSDKLoader,
  BimfaceSDKLoaderConfig,
  Glodon,
} from "bimfacesdkloader";
let viewer2D;
let app;
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      blackandwhiteStatus: false,
      hideLayerStatus: false,
    };
  },
  async mounted() {
    //3
    const dom = this.$refs.bfContainer;
    let viewToken = "...";
    // 初始化显示组件
    let options = new BimfaceSDKLoaderConfig();
    options.viewToken = viewToken;
    options.language = BimfaceLanguageOption.en_GB; //英文版
    //options.language = BimfaceLanguageOption.sv_SE; //瑞典版
    //5
    try {
      const viewMetaData = await BimfaceSDKLoader.load(options);
      if (viewMetaData.viewType == "drawingView") {
        // ======== 判断是否为3D模型 ========
        // 获取DOM元素
        //let dom4Show = document.getElementById("domId");
        //创建webApplication3DConfig
        let webAppConfig =
          new Glodon.Bimface.Application.WebApplicationDrawingConfig();
        //4 设置webApplication3DConfig的dom元素值
        webAppConfig.domElement = dom;
        // 创建WebApplication3D
        app = new Glodon.Bimface.Application.WebApplicationDrawing(
          webAppConfig
        );
        // ***添加待显示的模型
        app.load(viewToken);
        // 从WebApplication获取viewer2D对象
        viewer2D = app.getViewer();
      } else {
        console.log("1");
      }
    } catch (err) {
      console.log(error);
    }
  },
  methods: {
    //颜色模式
    black_and_white() {
      if (!this.blackandwhiteStatus) {
        viewer2D.setDisplayMode(2);
        this.setButtonText(this.$refs.blackandwhiteRef, "默认模式");
      } else {
        viewer2D.setDisplayMode(0);
        this.setButtonText(this.$refs.blackandwhiteRef, "黑白模式");
      }
      this.blackandwhiteStatus = !this.blackandwhiteStatus;
    },
    //视图列表
    viewList() {
      let viewsList = viewer2D.getViews();
      console.log(viewsList); //如果有layout模式 可以加一个按钮 写入：viewer2D.showViewById(2629559);
    },
    //图层信息
    layersList() {
      let layersList = viewer2D.getLayers();
      console.log(layersList);
    },
    //管理图层
    hideLayer() {
      if (!this.hideLayerStatus) {
        viewer2D.hideLayer("189228");
        this.setButtonText(this.$refs.hideLayerRef, "显示图层");
      } else {
        viewer2D.showLayer("189228");
        this.setButtonText(this.$refs.hideLayerRef, "隐藏图层");
      }
      this.hideLayerStatus = !this.hideLayerStatus;
    },
    //选中图元
    selectPrimitive() {
      console.log(viewer2D.getElementsByLayerId(189228)); //根据图层ID获取图元
      viewer2D.selectByIds(151630922); //图元id
    },
    //给指定图元绘制云线框
    cloudLine() {
      let color = new Glodon.Web.Graphics.Color("#EE799F", 1);
      viewer2D.setElementBoxColor(color);
      viewer2D.setElementBoxStyle("CloudRect");
      viewer2D.showElementBox("151630922");
    },
    setButtonText(button, text) {
      button.innerText = text;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}

.hello {
  height: 100vh;
}

.button {
  margin: 5px 0 5px 5px;
  width: 90px;
  height: 30px;
  border-radius: 3px;
  border: none;
  background: #11dab7;
  color: #ffffff;
}
</style>