<!--
|
* @Author: qiminghui 228917479@qq.com
|
* @Date: 2023-01-29 14:17:46
|
* @LastEditors: LuLu
|
* @LastEditTime: 2023-05-31 11:52:14
|
* @FilePath: \cim-xian\src\views\outViews\ueContainer.vue
|
* @Description: 外部引用组件需要在组件调用时传入场景url参数ueUrl
|
-->
|
<template>
|
<div id="ueContent">
|
<iframe id="djtIframe" style="width:100%;height:100%" :src="ueUrl" frameborder="0"></iframe>
|
</div>
|
</template>
|
<script>
|
import {
|
TUMap,
|
TUBounds,
|
TUVector3
|
} from "tumap/dist/tumap.v1.8";
|
export default {
|
props: {
|
ueUrl: {
|
type: String,
|
required: true,
|
}
|
},
|
data() {
|
return {
|
map: "",//ue场景对象
|
loading: ''
|
}
|
},
|
created() {
|
this.loading = this.$loading({
|
lock: true,
|
text: 'Loading',
|
fullscreen: true,
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
});
|
|
|
},
|
mounted() {
|
let _this = this
|
//sdk接入形式
|
// this.initUeConditions(this.ueUrl)
|
let iframe = document.getElementById('djtIframe')
|
if (iframe.attachEvent) {// IE下
|
iframe.attachEvent("onload", function () {
|
// 后续操作
|
_this.loading.close();
|
});
|
} else {
|
iframe.onload = function () {
|
// 后续操作
|
_this.loading.close();
|
};
|
}
|
|
|
},
|
methods: {
|
//初始化场景(传入对应ue场景地址)
|
initUeConditions(url) {
|
let _this = this
|
if (!url) {
|
alert('初始化组件，请传入ue场景地址')
|
}
|
//抛出全局ue地图对象,方便调用
|
window.ueMap = this.map = new TUMap({
|
id: "ueContent",
|
url: url,
|
onInit: () => {
|
console.log('ue地图', _this.map)
|
}
|
});
|
|
window.ueIframe = document.getElementById('djtIframe').contentWindow
|
|
},
|
//获取镜头信息
|
getCamereaMsg() {
|
var location = this.map.camera.location;//位置信息
|
var rotation = this.map.camera.rotation;//角度信息
|
var distance = this.map.camera.distance;//距离信息
|
|
var wgs84Position = this.map.transformLocalToWGS84(location.x, location.y)
|
var longitude = wgs84Position.x
|
var latitude = wgs84Position.y
|
console.log(`坐标"：${location.x},${location.y},${location.z}`);
|
console.log(`旋转:${rotation.roll},${rotation.pitch},${rotation.yaw}`);
|
console.log(`镜头垂直距离：${camera.distance}`);
|
},
|
//
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
#ueContent {
|
width: 100%;
|
height: 100%;
|
|
#iframeContent {
|
width: 100%;
|
height: 100%;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
}
|
</style>
|
