PKPM BIMViewer的使用
模型的使用，目前有两个方案，
一个是使用全局组件，在单页面的主页面中进行嵌套
<template>
<div id="model">
<!-- 这样的写的目的是为了销毁的干净 -->
<div :id="obvContainer"
:class="{is_show:!isShow}">
<div :id="obv"></div>
</div>
</div>
</template>
一个是使用iframe使用外部网页的嵌入
<template>
<!-- 模型的嵌入 -->
<iframe id="view3d"
:src="iframeSrc"
width="100%"
height="100%"
frameborder=""
scrolling="none"
class="showmodelIframe"></iframe>
</template>
iframe实际上嵌套的是另一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>galp_igbom_web_product_Obv</title>
<!--OBV4.0修改地址 样式文件-->
<link
href="https://api.cloud.pkpm.cn/bimviewer/viewer/v4/locale/locale.properties"
rel="resource"
type="application/l10n"
/>
<link
rel="stylesheet"
href="https://api.cloud.pkpm.cn/bimviewer/viewer/v4/obv.css"
type="text/css"
/>
<!--obv 的 JS-->
<script
src="https://api.cloud.pkpm.cn/bimviewer/viewer/v4/obv.js"
type="text/javascript"
charset="utf-8"
></script> <script src="./utils/common/common.js" charset="utf-8"></script>
<script src="./utils/bimJs/BimShow.js" charset="utf-8"></script>
<script src="./utils/bimJs/ObvApiWrapper.js" charset="utf-8"></script>
<script>
var mapGuid = {};
//var camera_position = "";
var camera_position =
'{"position":{"x":146518.99887679535,"y":-165402.77170371916,"z":43010.86008260351},"target":{"x":32979.83428482477,"y":-55016.90462385754,"z":25436.756957522586},"up":{"x":-0.07908594642234183,"y":0.07688951033799524,"z":0.9938980914955344},"aspect":0.8879668049792531,"fov":53.13010235415598,"orthoScale":159326.80454922342,"isPerspective":false,"pivotPoint":{"x":44460.192437633596,"y":-74092.20639070861,"z":-380.5984779546852}}';
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr().match(reg); //匹配目标参数
if (r != null) return unescape(r[]);
return null; //返回参数值
}
function getAccessToken(cb) {
var token = getUrlParam("token");
var expires = getUrlParam("expires");
cb(token, expires);
} window.onload = function() {
var container = document.getElementById("viewer-div");
EPM.BIM.loadBIMModelByUrn(container, getAccessToken, function(
build,
viewer3dApi,
application
) {
var obvApiWrapper = new ObvApiWrapper(
build,
viewer3dApi,
application
);
window.obvApiWrapper = obvApiWrapper;
console.log("iframes-window", window);
window.parent.setObvApiWrapper(obvApiWrapper);
var obv = obvApiWrapper.getObvApi(); /*
监听事件这边OBV4.0写法都改了：加载标注插件的写法也改了
监听几何信息是否加载完全*/
obv.addEventListener(
OBV.ViewerEventTypes.GeometryLoadedEvent,
function handelGeometryLoaded() {
//根据视角，模型位置进行更新
if (camera_position) {
var camera = JSON.parse(camera_position);
var viewer = obv.getViewer();
new OBV.Controllers.Viewer3d.ViewController(
viewer
).setViewFromCameraInfoSync(camera, true);
} else {
obv.fitToView();
} if (obv.isGeometryLoaded && obv.isPropertyLoaded) {
obvApiWrapper.getMapGuid(function(res) {
mapGuid = res;
window.parent.setMapGuid(mapGuid);
});
}
}
);
//监听属性是否加载完成
obv.addEventListener(
OBV.ViewerEventTypes.ProperiesLoadedEvent,
function handelGeometryLoaded() {
if (obv.isGeometryLoaded && obv.isPropertyLoaded) {
obvApiWrapper.getMapGuid(function(res) {
mapGuid = res;
window.parent.setMapGuid(mapGuid);
});
}
}
);
//监听模型大小变化事件
obv.addEventListener(
OBV.ViewerEventTypes.CameraChangeEvent,
function() {
// that.$emit("resizeEvent");
}
);
//监听构件选中事件
obv.addEventListener(
OBV.ViewerEventTypes.SelectionChangedEvent,
function(e) {
console.log("modelObjects", e.nodeIdArray);
//that.modelObjects = e.nodeIdArray;
//that.$emit("modelObjects", e.nodeIdArray);
}
);
//加载标注的插件
window.OBV["AddinLibLoader"]
.loadBuiltInAddinLib("OBVAddins.Marker")
.then(event => {
//初始化加载标注成功之后，再进行监听事件
obvApiWrapper.getMarkerAddin(function() {
obvApiWrapper.getMarkerAnnotationClickedEventListener(function(
val
) {
var obj = val;
window.parent.setClickMarkEvent(obj);
//that.$emit("clickMarkEvent", obj);
});
obvApiWrapper.getMarkerSelectedEventListener(function(val) {
var obj = val;
window.parent.setClickMarkEvent(obj);
// that.$emit("selectedMarkEvent", obj);
});
});
});
//监听鼠标监听事件
obv.addEventListener(OBV.ViewerEventTypes.MouseClickedEvent, function(
e
) {
//that.$emit("eventPosition", e.position);
});
});
};
</script>
</head>
<style>
html {
width: %;
height: %;
} body {
width: %;
height: %;
} .customizing-view-div {
position: relative;
width: %;
height: %;
}
</style>
<body oncontextmenu="return false">
<div id="viewer-div" class="customizing-view-div"></div>
</body>
</html>
iframe父子之间进行交互，子组件可以调用vue里面的方法向vue传数据，实现交互
mounted() {
this.loadModel()
if (this.moduleName) {
this.getBimboxUrlRequest()
}
window['setObvApiWrapper'] = a => {
this.setObvApiWrapper(a)
}
window['setMapGuid'] = a => {
this.setMapGuid(a)
}
window['setClickMarkEvent'] = a => {
this.setClickMarkEvent(a)
}
//setClickMarkEvent
},
根据需要，我们都在封装好的model或者iframeModel组件中把对应的模型操作方法写好，然后调用组件的时候通过ref属性之间调用方法
methods: {
/**如果页面有维绿大厦，原来也有维绿大厦 就不卸载维绿大厦，否则全部卸载 */
unloadModel() {
var models = this.obvApiWrapper.getObvApi().getModels()
for (var i = ; i < models.length; i++) {
this.obvApiWrapper.unloadModel(models[i].id)
}
},
/**点击标注的事件 */
setClickMarkEvent(a) {
this.$emit('clickMarkEvent', a)
},
/**初始化模型视图之后，将 obvApiWrapper模型操作对象传过来*/
setObvApiWrapper(a) {
this.obvApiWrapper = a
this.getBimboxUrlRequest()
},
/**初始化模型视图之后，将 mapGuid传过来，这个时候模型肯定加载完成*/
setMapGuid(a) {
this.mapGuid = a
this.$emit('obvApiWrapper', this.obvApiWrapper)
},
/**发送请求获取到模型地址，然后进行加载模型：满足多模型加载 */
async getBimboxUrlRequest() {
var that = this
var res = await ObvApi.getBimboxUrl(this.buildingId, this.moduleName)
if (res.data.code == && res.data.result && res.data.result.length > ) {
res.data.result.forEach(element => {
if (element.name) {
setTimeout(that.loadDocument(element.name), )
}
})
} else {
this.bimBoxUrl = this.defaultBimboxUrl
}
},
/**初始化模型环境，application、view */
loadModel() {
console.log('loadModel')
var that = this
getAuth(this.$store.getters.bjInfo)
getAccessToken(function(access_token, expires_in) {
let url =
'/static/obv/page/model/model.html?&token=' + access_token + '&expires=' + expires_in + '&r=' + Math.random()
that.iframeSrc = url
})
},
/**加载文档和模型 */
loadDocument(urn) {
if (this.obvApiWrapper) {
this.obvApiWrapper.loadDocumentByUrn(
urn,
function handleResolve() {
//将obvApi返回父节点
},
function(err) {
// that.$message(err);
}
)
}
},
/**关联模型,传入 存有xdbguid的数组 */
linkObject(guidArr) {
var that = this
if (this.obvApiWrapper == '' && this.mapGuid == {}) {
this.$message('模型未加载完，点击无法响应！')
this.$emit('loading', false)
return
}
//设置默认视角
var nodeIds = []
var count =
for (var k in this.mapGuid) {
if (guidArr.indexOf(k) !== -) {
nodeIds.push(this.mapGuid[k])
count++
if (count == guidArr.length) {
return nodeIds //this.obvApiWrapper.setIsolation()
}
}
}
},
//创建标注
createMarker(markerItem, item, message) {
this.obvApiWrapper.createMarker(markerItem, item, message)
this.$emit('loading', false)
},
//清空标注
clearMarkers: function(obvApi) {
this.obvApiWrapper.clearMarkers()
this.markedNodeIds = []
this.$emit('loading', false)
}
}
组件的调用
<script>
import Model from '@/components/IframeModel.vue'
import jQuery from 'jquery'
export default {
name: 'ModelRunning',
props: {
moduleName: {
type: String
},
markDatas: {
type: Array
}
},
components: {
Model
},
data() {
return {
BimModel: {},
obvApi: ''
}
},
mounted() {
this.BimModel = this.$refs.BimModel
this.$emit('BimModel', this.BimModel)
},
watch: {
markDatas(v) {
this.loadMarkInfo()
}
},
methods: {
/**获取模型对象 */
getObvApiWrapper(a) {
//debugger
this.obvApi = a
this.$emit('obvApi', a)
//设置视角
var camera_position =
'{"position":{"x":166082.99897721765,"y":119934.73657508119,"z":114472.7609660573},"target":{"x":73992.4176136514,"y":-26028.709355075698,"z":39501.407713036824},"up":{"x":-0.21259922967969852,"y":-0.33696948924271614,"z":0.9171985231448544},"aspect":0.8879668049792531,"fov":53.13010235415598,"orthoScale":188166.69878667328,"isPerspective":false,"pivotPoint":{"x":79328.38981130453,"y":-19366.16670130758,"z":7522.623504414594}}'
var camera = JSON.parse(camera_position)
var viewer = this.obvApi.getViewer()
new OBV.Controllers.Viewer3d.ViewController(viewer).setViewFromCameraInfoSync(camera, true)
},
//点击那个标注点的事件
selectMarkEventData(val) {
//debugger
var that = this
console.log('val', val)
let id = val.numberedId
var green = jQuery(window.frames['view3d'].contentDocument)
.find('div#' + id + '.marker-annotation')
.find('.green')
console.log('green.hasClass', green.hasClass('success'))
if (green.hasClass('success')) {
green.removeClass('success') green
.parents('.marker-annotation')
.next('.marker-anchor')
.addClass('active')
} else {
green.addClass('success') green
.parents('.marker-annotation')
.next('.marker-anchor')
.removeClass('active')
if (this.obvApi.getObvApi()) {
this.obvApi.getObvApi().restoreObjectsColor()
}
}
},
//加载标注，创建标注
loadMarkInfo: function() {
//debugger
if (this.markDatas.length == ) {
return
}
var that = this
var markDataInfo = this.markDatas
// that.BimModel.clearMarkers()
for (var d in markDataInfo) {
if (markDataInfo[d].objectId && markDataInfo[d].objectId.length > ) {
var nodeArray = new Array()
var message =
"<div class='shui deviceinfo'>" +
"<div class='title'>" +
markDataInfo[d].deviceName +
"</div><div class='content'>" +
"<div class='content_item'><label>编号：</label><span>1" +
markDataInfo[d].deviceNO +
'</span></div>' +
"<div class='content_item'><label>系统：</label><span>" +
markDataInfo[d].systemName +
'</span></div>' +
"<div class='content_item'><label>位置：</label><span>" +
markDataInfo[d].floorName +
'_' +
markDataInfo[d].roomName +
"</span></div><div class='content_item'><label>状态：</label><span class='state'>正在运行</span></div>" +
"<div class='content_item2'></div>" +
"<div class='content_item3'><span class='system'>系统运行状态</span><i class='icon'></i></div></div></div>"
console.log('message', message)
var node = that.BimModel.linkObject(markDataInfo[d].objectId)
if (node && node.length > ) {
nodeArray = node
that.BimModel.createMarker(
{
dtype: ,
position: nodeArray
},
'object',
message
)
}
var green = jQuery(window.frames['view3d'].contentDocument) green
.find('.deviceinfo')
.parents('.marker-annotation')
.next('.marker-anchor')
.addClass('deviceinfo_anchor')
}
}
}
}
}
</script>
PKPM BIMViewer的使用的更多相关文章
- 封装的PKPM BimView的方法
封装的方法 var ObvApiWrapper; if (!ObvApiWrapper) { ObvApiWrapper = {}; } ObvApiWrapper = function(build, ...
- PKPM快捷键
e删除sc删除节点hq绘制直线墙lbz布置梁zz楼层组装bsc板生成bxg板修改门窗洞dbz(洞布置)全房间洞(fd)正交轴网zww拉伸s
- 图片轮播的JS写法，通用涉及多个轮播
本代码是借鉴大神的代码分析理解后,自己改写的!有不足指出希望给为大神指点. 核心只有一个JS,里面包含了css样式. 展示效果图:
- ebe2
Email:kefu007@vip.qq.com 软件每天有更新.请用Ctrl+F键搜索您需要的软件..如果你找不到你需要的软件可以联系客户服务人员帮您找! 海拉之光LucidShape光学设计仿真分 ...
- ebe
ebe1 Email:kefu007@vip.qq.com 89600 VSA 软件解调和矢量信号分析的综合工具 Aspen Plus大型通用流程模拟系统 AutoAdvance Baccarat-P ...
- java 读取ini文件
1.情景:需要将硬代码写到文件中,这样以后改动只需改动灵活 1)txt文件,需要将这code字符串读到代码中,保存成数组 2)导包:pom.xml添加依赖: <dependency> &l ...
随机推荐
- java内存dump文件导出与查看
生成dump文件的命令:jmap -dump:format=b,file=20170307.dump 16048file后面的是自定义的文件名,最后的数字是进程的pid 使用jvisualvm来分析d ...
- 20189220 余超《Linux内核原理与分析》第三周作业
操作系统如何工作的 第二章的基础知识 计算机的三大法宝:存储程序计算机,函数调用堆栈机制,中断. 堆栈:堆栈是C语言程序运行时必须使用的几率函数条用路径和参数存储的空间,具体作用分为:记录函数条用的框 ...
- 【转】ANDROIDROM制作（一）——ROM结构介绍、精简和内置、一般刷机过程
作为对Rom制作的一个总结,本节主要介绍以下内容: 1.Rom介绍 2.Rom文件结构 3.app的精简与内置 4.Recovery简介 5.radio包简介 6.一般刷机过程.刷机过程中 ...
- jmeter cookie管理器
jmeter cookie管理器 不能用正则表达式获取登录接口生成的cookie 因为cookies并不是在登录的响应结果中生成的,而是在response header中携带的,所以不能用正则表达式提 ...
- python问题集
1.selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in P ...
- Python - Django - form 组件自定义校验
reg2.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- TIBCO Jaspersoft Studio 报表软件使用教程
Detail 1里面放置动态内容框可以循环遍历数据 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn ...
- 如何确定垃圾？JVM GC ？
如何确定垃圾? 正文 如何确定垃圾? 前面已经提到 JVM 可以采用 引用计数法 与 可达性分析算法 来确定需要回收的垃圾,我们来具体看一下这两种算法: 引用计数法 该方法实现为:给每个对象添加一个引 ...
- [03]Go设计模式:工厂模式（Factory Pattern）
目录 工厂模式 一.简介 二.代码 三.参考资料 工厂模式 一.简介 工厂模式(Factory Pattern)是软件设计中最常用的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象 ...
- Clean code 关于注释、函数、命名的感想
最近在看代码整洁之道(Clean code)这本书,其实看的有点痛苦,因为越看就会越想自己写的代码是什么鬼?一些不知所云的命名,不整洁的代码格式,本想诠释代码的意思却添加了一段段废话,还有那些被强制加 ...