vue使用 BIMFACE demo

一个小案例

首先在 index.html 文件引入 js 文件

<script src="https://static.bimface.com/api/BimfaceSDKLoader/BimfaceSDKLoader@latest-release.js"></script>

然后在相应的页面编写 bim 代码。其实官网给的demo都是js的，只要把它转成vue语法就可以了。
https://bimface.com/developer-jsdemo

<template><div style="height: 90%;"><div class='buttons'><button class="button" id="btnLoadMap" @click="loadMap">加载地图</button></div><!-- 定义DOM元素，用于在该DOM元素中显示模型或图纸 --><div id="domId" style="height: 100%;"></div></div>
</template><script>export default {name: 'HelloWorld',data() {return {viewToken: '24448941b05340968a92ae84a2a*****',   // 这里替换成自己的viewer3D: '',app: '',viewAdded: false,isMapLoaded: false,loaderConfig: null,}},mounted() {var that = thisvar 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 = thisvar 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 = thisif (!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 {}
</style>

vue使用 BIMFACE demo相关推荐

Vue异步组件Demo
Vue异步组件Demo 在大型应用中,我们可能需要将应用拆分为多个小模块,按需从服务器下载.为了进一步简化,Vue.js 允许将组件定义为一个工厂函数,异步地解析组件的定义.Vue.js 只在组件需要 ...
antv-x6 vue流程图编辑器demo
antv-x6 vue流程图编辑器demo 效果如下: 效果如下: <template><div class="content"><div class ...
vue脚手架基础demo
vue脚手架基础demo 目录 vue脚手架基础demo created_demo1示例 created_demo2示例 filters_demo3 v-once v-text_demo4 数据类型d ...
vue前端开发demo示例
vue前端开发demo示例目录 vue前端开发demo示例系统结构 js部分界面部分界面系统结构 js部分代码如下(示例): import request from '@/utils/re ...
vue——二级菜单demo
学习了vue,最近想着写一写demo练一练,今天写的二级菜单,中间踩过很多坑 1.存数据:最开始想着一级菜单存一个数组,二级菜单存不同的数组.那么问题来了,一级菜单和二级菜单应该是超级相关联的,如果分 ...
VUE的组件DEMO
组件的基本写法可以如下: HTML: <div id="components-demo"><button-counter self-data="this ...
基于Ant Design vue框架登录demo
我们直接进入正题吧~~~ 先来看下效果图那么前端代码呢~~~ 不着急,这就双手奉上哈~~ <a-col :span="12"><div class=" ...
vue的项目demo（asp.net mvc5+vue2.5）
本项目是asp.net mvc5+vue2.5的项目,用了挺长的时间进行摸索和研究,非常适合vue的初学者进行模仿和研究,可以举一反三对本项目进行扩展. 本项目前台显示是用vue2.5开发的,后台操作 ...
vue 手机端demo
有个想法写一个各种插件的用法和实列出来那样每次用什么就直接复制过来就好.大家感觉怎么样尽情期待吧!努力开发中快乐的小前端! 示列图如下 https://download.csdn.net/do ...

vue使用 BIMFACE demo

vue使用 BIMFACE demo

vue使用 BIMFACE demo相关推荐

最新文章

热门文章