第一章 vue初始化DTS场景

目录

命令

1. 引入ac.min.js

1.1static加ac.min.js

1.2 在index.html页面引入ac.min.js

2. 初始化场景

2.1引入场景组件

2.2初始化场景组件

---

命令

如果第一次引入别人搭建好的vue项目,想要运行则在终端输入以下内容  

(1) npm i                       项目所需要的包

(2) npm run dev            运行项目

如果打包则是npm run build

1. 引入ac.min.js

1.1static加ac.min.js

当我们把框架初始好后,先在static下面加入ac.min.js

注意:ac.min.js放在static会被识别到,如果放到public或者src下面识别不到

1.2 在index.html页面引入ac.min.js

加入ac.min.js后我们在最外侧的index.html页面中引入ac.min.js,引入后才会全局使用ac.min.js文件中的数据

2. 初始化场景

场景通常都是配合着功能框架走的,所以需要在功能框架里引入场景组件

功能页面和场景组件是在同一个目录下的

2.1引入场景组件

2.2初始化场景组件

<template>
  <div id="player" style="display: block; width: 100%; height: 100%"></div>
</template>

<script>
import ip from "../api/ip.js";
import ak_init from "../cloud/event/ak_init.js";
import ak_event from "../cloud/event/ak_event.js"
export default {
  name: "Player",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      api: null,
      player:null,
    };
  },
  mounted() {
    let apiOptions = {
      onReady: () => {
        window.__g=this.player.getAPI()
        this.$store.state.__g = this.player.getAPI();
          ak_init.init();
      },
      onApiVersion: undefined,
      onEvent: (event) => {
          ak_event.init(event);
      }

    };
    //初始化API实例并启动渲染，DigitalTwinPlayer对象的构造参数请参考API开发文档
    this.player = new DigitalTwinPlayer(ip.cloudip, {
      domId: "player",
      apiOptions:apiOptions

    });
  },
  methods: {

  },

  destroyed() {
    //关闭云渲染并释放资源
    this.api.destroy();
  },
};
</script>

<style scoped>
.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>

加载的时候 

onReady: () => {
        window.__g=this.player.getAPI()                        //初始化__g是全局使用
        this.$store.state.__g = this.player.getAPI();
          ak_init.init();                               
      },

当点击时
onEvent: (event) => {
          ak_event.init(event);
      }

初始化API实例并启动渲染，ip.cloudip是工程启动后的ip+端口
    this.player = new DigitalTwinPlayer(ip.cloudip, {
      domId: "player",
      apiOptions:apiOptions

    });