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 ...
随机推荐
- 理解Web路由（浅谈前后端路由与前后端渲染）
1.什么是路由? 在Web开发过程中,经常会遇到『路由』的概念.那么,到底什么是路由?简单来说,路由就是URL到函数的映射. 路由的概念最开始是由后端提出来的,在以前用模板引擎开发页面的时候,是使用路 ...
- Web前端开发规范之脚本文件和动态文本文件命名规则
脚本文件:一般使用脚本功能的英文小写缩写命名 实际模块:例如广告条的javascript文件名为ad.js,弹出窗口的javascript文件名为pop.js 公用模块:js文件命名:英文命名,后缀j ...
- 创业小记：ALL IN才是迈出创业第一步的关键
对于创业而言,能卖出这创业第一步的,大多都经过了长期反复的心理拷问与折磨. 因为当你迈出创业的那一步,你可能需要面对的是毫无收入保障的生活,以及后果自负的结局. ALL IN才是迈出创业第一步的关键( ...
- Android相关属性的介绍：android:exported = true
在Activity中该属性用来标示:当前Activity是否可以被另一个Application的组件启动:true允许被启动:false不允许被启动. android:exported 是Androi ...
- ES 基本用法
转自:https://www.cnblogs.com/rodge-run/p/7760308.html ES的基本概念 1> 集群和节点 一个es集群是由一个或多和es节点组成的集合 每一个集群 ...
- 轻量级Web服务器http-server
http-server是一个简单的零配置命令行http服务器.可用于h5页面手机端测试 Vue .Angualr.React项目打包后真机测试 github地址:https://github.com/ ...
- js 秒的倒计时，将秒转换为时分秒显示
在VUE 中的使用 {{moveMin}} // ...methods: { // 补0 formatBit (val) { val = +val ? val : ' + val }, // 秒转时分 ...
- Conv2d常设置参数意义-继续扩展
记录下一些常用设置: 1.下采样 当设置为: nn.Conv2d(nc,ndf,,,,bias=False) kernel_size = 4, stride = 2, padding = 1,就是将特 ...
- python初级(302) 2 easygui简单使用
一.复习之前的两个练习,巩固计数循环和条件循环 1.系统生成一个随机数1到5,然后让用户的猜测,若猜对了,提示恭喜你,猜对了,否则提示,对不起,你猜错了(提示,1到5的随机数为:secret = ra ...
- datatables：initComplete和drawCallback比较
drawCallback: 对表的每个绘制事件执行操作非常有用 - 例如,您可能希望使用新显示的数据更新外部控件,或者启用服务器端处理,您可能希望将事件分配给新创建的元素.此回调旨在实现此目的,并将在 ...