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 ...
随机推荐
- Portainer实战
Portainer是一个轻量级的Docker环境管理UI,可以管理docker host和docker swarm(我主要看中了能管理swarm这个,毕竟市面上能管理swarm的平台不多).之所以说是 ...
- 关于js中onload事件的部分报错。
当使用onload获取元素时,建议在onload事件之前定义需要获取的元素名称,在onload里面只执行获取操作,这样获取到的元素在后面才能顺利使用. <!DOCTYPE html> &l ...
- E4A写的app，点按钮，直接进入抖音指定用户界面
今天在网上看到有一个人,直接进抖音某个指定用户的界面,一般模拟的方式,要先通过搜索的方式,再选用户,点进去 但是这样操作,不大友好,也影响速度 最理想的方式,是通过 ＂无障碍＂,直接控制抖音进入指定的 ...
- Alpha3
队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11899921.html 作业博客 :https://edu.cnblogs.com/campus/f ...
- Tomcat的并发能力
关注 一.一些限制 Windows 每个进程中的线程数不允许超过 2000 Linux 每个进程中的线程数不允许超过 1000 在 Java 中每开启一个线程需要耗用 1MB 的 JVM 内存空间 ...
- 2019年java全栈工程师学习大全
技术更新日新月异,对于初入职场的同学来说,经常会困惑该往那个方向发展,这一点我是深有体会的. 我刚开始学习 Java 那会,最大的问题就是不知道该学什么,以及学习的顺序,我相信这也是很多初学者经常面临 ...
- Tengine的说明
什么是Tengine 官方帮助文档:http://tengine.taobao.org/changelog_cn.html
- 复制pycharm虚拟环境
我还是在内网进行开发,上篇讲了数据库驱动,方便链接数据库. 那么虚拟环境呢?那么多个包,离线下载………… 关键是我自己的笔记本也会进行交叉开发.一会儿在内网,一会儿在公网. 还是复制粘贴比较简单. 下 ...
- ThreadPool.QueueUserWorkItem 简单示例，显示当前时间
1.线程池 添加方法 作为一个线程运行 class Program { static void Main(string[] args) { ThreadPool.QueueUserWorkItem( ...
- 密钥密码体系CA，CSC,CV
密钥密码体系CA,CD,CSC,CV 片内操作系统 (cos) 密码学(Cryptography) 非接触式智能卡Contactless Smart Card, CSC 密钥名词 名词 英文说明 中文 ...