<template>
|
<div class="main3dviewer" @mouseleave="removeEventListener()" @mouseover="addEventListener()"
|
style="position: relative; width: 100%">
|
<div class="rightbuttongroup" style="
|
position: absolute;
|
z-index: 990;
|
top: 305px;
|
right: 22px;
|
width: 40px;
|
">
|
<div id="funcZone" style="display: flex; width:55px" @mouseleave="hidesubbutton()" @mouseover="showsubbutton()">
|
<div class="divbtn" id="btnLD" style="display: none" @click="showPanel(3)">
|
联动
|
</div>
|
<div id="btn2D" class="divbtn" style="display: none" @click="showPanel(2)">
|
2D
|
</div>
|
<div class="divbtn" id="btn3D" style="display: inline-block; " @click="showPanel(1)">
|
3D
|
</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="showPanel(5)">交互</div>
|
</div>
|
<!-- <div>
|
<div class="divbtn" @click="showPanel(6)">图层</div>
|
</div> -->
|
<div>
|
<div class="divbtn" @click="showPanel(7)">场景</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="showPanel(8)">工具</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="showPanel(9)">分析</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="identifyInfo">属性</div>
|
</div>
|
</div>
|
|
|
<sdkContainer style="position: absolute"> </sdkContainer>
|
<div id="sectionCharts" class="sectionChars">
|
<echartsview ref="echartsview" />
|
</div>
|
|
<IdentifyTool ref="IdentifyTool" />
|
</div>
|
</template>
|
<script>
|
import sdkContainer from "../../../components/sgword/mapView.vue";
|
import IdentifyTool from './IdentifyTool.vue'
|
import identifyTool from '@/utils/identifyTools.js'
|
import echartsview from "./echartview.vue";
|
export default {
|
props: {
|
btnClick: {
|
type: Function,
|
default: null,
|
},
|
},
|
components: { sdkContainer, echartsview, IdentifyTool },
|
data() {
|
return {
|
btnTag: 0,
|
is2D3Don: false,
|
isDoubleOn: false,
|
bimObj: null
|
};
|
},
|
methods: {
|
hidesubbutton() {
|
$("#funcZone").css("width", "55px");
|
$("#funcZone").css("margin-left", "0px");
|
if (this.btnTag === 0) {
|
$("#btn2D").css("display", "none");
|
$("#btn3D").css("display", "inline-block");
|
$("#btnLD").css("display", "none");
|
// $("#btn3D").css("margin-left", "90px");
|
} else if (this.btnTag === 1) {
|
$("#btn2D").css("display", "inline-block");
|
$("#btn3D").css("display", "none");
|
$("#btnLD").css("display", "none");
|
// $("#btn2D").css("margin-left", "90px");
|
} else if (this.btnTag === 2) {
|
$("#btn2D").css("display", "none");
|
$("#btn3D").css("display", "none");
|
$("#btnLD").css("display", "inline-block");
|
// $("#btnLD").css("margin-left", "90px");
|
}
|
},
|
showsubbutton() {
|
$("#funcZone").css("width", "135px");
|
$("#funcZone").css("margin-left", "-85px");
|
$("#btn2D").css("display", "inline-block");
|
$("#btn3D").css("display", "inline-block");
|
$("#btnLD").css("display", "inline-block");
|
$("#btn3D").css("margin-left", "");
|
$("#btn2D").css("margin-left", "");
|
$("#btnLD").css("margin-left", "");
|
// if (this.btnTag === 0) {
|
// $("#btn3D").css("margin-left", "5px");
|
// $("#btn2D").css("margin-left", "80px");
|
// $("#btnLD").css("margin-left", "80px");
|
// } else if (this.btnTag === 1) {
|
// $("#btn2D").css("margin-left", "5px");
|
// $("#btnLD").css("margin-left", "80px");
|
// $("#btn3D").css("margin-left", "80px");
|
// } else if (this.btnTag === 2) {
|
// $("#btn3D").css("margin-left", "80px");
|
// $("#btnLD").css("margin-left", "5px");
|
// $("#btn2D").css("margin-left", "80px");
|
// }
|
},
|
showPanel(tag) {
|
if (this.btnClick)
|
switch (tag) {
|
case 1:
|
Viewer.scene.morphTo3D();
|
this.btnTag = 0;
|
break;
|
case 2:
|
Viewer.scene.morphTo2D();
|
this.btnTag = 1;
|
break;
|
case 3:
|
this.btnTag = 2;
|
this.is2D3Don = !this.is2D3Don;
|
this.btnClick({
|
title: "联动",
|
id: tag,
|
isOn: this.is2D3Don,
|
showtag: "2d",
|
});
|
// this.$emit("btnClick", {
|
// title: "联动",
|
// id: tag,
|
// isOn: this.is2D3Don,
|
// });
|
break;
|
case 4:
|
break;
|
case 5:
|
this.btnClick({ title: "交互", id: tag });
|
// this.$emit("btnClick", { title: "定位", id: tag });
|
break;
|
case 6:
|
this.btnClick({ title: "图层", id: tag });
|
// this.$emit("btnClick", { title: "图层", id: tag });
|
break;
|
case 7:
|
this.btnClick({ title: "场景", id: tag });
|
// this.$emit("btnClick", { title: "场景", id: tag });
|
break;
|
case 8:
|
this.btnClick({ title: "工具", id: tag });
|
// this.$emit("btnClick", { title: "工具", id: tag });
|
break;
|
case 9:
|
this.btnClick({ title: "分析", id: tag });
|
// this.$emit("btnClick", { title: "专题", id: tag });
|
break;
|
default:
|
break;
|
}
|
},
|
syncViewer(global1, global2) {
|
global1.camera.flyTo({
|
destination: global2.camera.position,
|
orientation: {
|
heading: global2.camera.heading,
|
pitch: global2.camera.pitch,
|
roll: global2.camera.roll,
|
},
|
duration: 0.0,
|
});
|
},
|
start() {
|
this.syncViewer(ViewerEx, Viewer);
|
},
|
removeEventListener() {
|
if (this.isDoubleOn === true) {
|
let that = this;
|
this.$nextTick(() => {
|
if (sgworld && sgworldEx) {
|
console.log("out");
|
Viewer.scene.preRender.removeEventListener(that.start);
|
}
|
});
|
}
|
},
|
addEventListener() {
|
//双球开启时，匹配双球监听
|
if (this.isDoubleOn === true) {
|
let that = this;
|
this.$nextTick(() => {
|
if (sgworld && sgworldEx) {
|
Viewer.scene.preRender.addEventListener(that.start);
|
}
|
});
|
}
|
},
|
initalEcharts(option) {
|
let v = option.ison ? "visible" : "hidden";
|
$("#sectionCharts").css("visibility", v);
|
this.$refs.echartsview.initalEcharts(option.data);
|
},
|
identifyInfo() {
|
identifyTool.start((pick, type) => {
|
this.$refs.IdentifyTool.open(pick, type)
|
})
|
}
|
},
|
mounted() {
|
let elementResizeDetectorMaker = require("element-resize-detector");
|
let erd = elementResizeDetectorMaker();
|
//侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
|
//覆盖实例选项
|
erd.listenTo(
|
document.getElementsByClassName("main3dviewer"),
|
function (element) {
|
let height = element.offsetHeight;
|
let isOn = height > 400 ? "" : "none";
|
$(".rightbuttongroup").css("display", isOn);
|
}
|
);
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
.divbtn {
|
width: 30px;
|
height: 30px;
|
line-height: 30px;
|
margin: 5px;
|
background-color: rgba(49, 49, 49, 0.8);
|
color: #bfbfbf;
|
border: 1px solid #858585;
|
text-align: center;
|
cursor: pointer;
|
font-size: 8px;
|
}
|
|
.divbtn:hover {
|
border: 1px solid #dddddd;
|
}
|
|
.sectionChars {
|
position: absolute;
|
top: auto;
|
width: 90%;
|
height: 200px;
|
bottom: 10px;
|
left: 5%;
|
padding: 10px 15px;
|
border-radius: 4px;
|
border: 1px solid rgba(128, 128, 128, 0.5);
|
color: #fff;
|
background: rgba(0, 0, 0, 0.4);
|
box-shadow: 0 3px 14px rgba(128, 128, 128, 0.5);
|
z-index: 99999;
|
visibility: hidden;
|
}
|
</style>
|
