<template>
|
<div id="rightMain">
|
<!-- 左侧罗盘和指南针和业务按钮 START -->
|
<div class="rightCompass">
|
<div class="centerBtn">
|
<div id="funcZone" style="display: flex" @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" @click="showPanel(1)">
|
3D
|
</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="showPanel(5)" :style="panelindex.id == 5 ? activeBg : ''">交互</div>
|
</div>
|
<!-- <div>
|
<div class="divbtn" @click="showPanel(6)">图层</div>
|
</div> -->
|
<div>
|
<div class="divbtn" @click="showPanel(7)" :style="panelindex.id == 7 ? activeBg : ''">场景</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="showPanel(8)" :style="panelindex.id == 8 ? activeBg : ''">工具</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="showPanel(9)" :style="panelindex.id == 9 ? activeBg : ''">分析</div>
|
</div>
|
<div>
|
<div class="divbtn" @click="showPanel(10)" :style="panelindex.id == 10 ? activeBg : ''">查询</div>
|
</div>
|
<div>
|
<!-- <div class="divbtn" @click="identifyInfo()">属性</div> -->
|
</div>
|
</div>
|
<div class="_compass"></div>
|
</div>
|
<!-- 左侧罗盘和指南针和业务按钮 END -->
|
<!-- 中间切换按钮 START -->
|
<div class="switchBtn" @click="isShowDrawer = !isShowDrawer" v-show="!isShowDrawer">
|
<div class="switchBtnImg"></div>
|
</div>
|
<!-- 中间切换按钮 END -->
|
|
<!-- 右边内容 START -->
|
<div class="content" :style="{ 'width': isShowDrawer ? '334px' : '0px' }">
|
<div class="closeRight" @click="isShowDrawer = false"></div>
|
<el-card class="opt-card scrollbar">
|
<div slot="header" class="header_box">
|
<span class="header_title">{{ panelindex.title }}</span>
|
<span class="header_title_en">{{ panelindex.titleEn }}</span>
|
</div>
|
<location-panel @hiddenPanel="hiddenPanel" ref="locationpanel" v-show="panelindex.id === 5" />
|
<!-- <layer-panel ref="layercontrol" :keyString="`id`" @hiddenPanel="hiddenPanel" v-show="panelindex.id === 6" /> -->
|
<scene-panel @hiddenPanel="hiddenPanel" v-show="panelindex.id === 7" @ldcontrol="btnClick" />
|
<operate-panel v-show="panelindex.id === 8" />
|
<analysis-panel @pmfxshow="pmfxshow" v-show="panelindex.id === 9" />
|
<geom-query v-show="panelindex.id === 10" />
|
</el-card>
|
</div>
|
<!-- 右边内容 END -->
|
|
|
</div>
|
</template>
|
<script>
|
import identifyTool from '@/utils/identifyTools.js'
|
import LocationPanel from "../../../components/developcenter/mainViewer/LocationPanel.vue";
|
import LayerPanel from "../../../components/developcenter/mainViewer/LayerPanel.vue";
|
import ScenePanel from "../../../components/developcenter/mainViewer/ScenePanel.vue";
|
import AnalysisPanel from "../../../components/developcenter/mainViewer/AnalysisPanel.vue";
|
import OperatePanel from "../../../components/developcenter/mainViewer/OperatePanel.vue";
|
import geomQuery from "../../../components/developcenter/mainViewer/geomQuery.vue";
|
export default {
|
|
components: {
|
LocationPanel,
|
LayerPanel,
|
ScenePanel,
|
AnalysisPanel,
|
OperatePanel,
|
geomQuery
|
},
|
data() {
|
return {
|
isShowDrawer: false, // 定义关闭按钮
|
btnTag: 0,
|
is2D3Don: false,
|
isDoubleOn: false,
|
hasinital: false,
|
showtag: "",
|
panelindex: { title: "交互", id: 5, titleEn: 'interactive' },
|
activeBg: { backgroundImage: "url(" + ("./right_btn_active.png") + ")" }
|
}
|
},
|
methods: {
|
hidesubbutton() {
|
$("#funcZone").css("width", "56px");
|
$("#funcZone").css("margin-left", "0px");
|
if (this.btnTag === 0) {
|
$("#btn2D").css("display", "none");
|
$("#btn3D").css("display", "flex");
|
$("#btnLD").css("display", "none");
|
// $("#btn3D").css("margin-left", "90px");
|
} else if (this.btnTag === 1) {
|
$("#btn2D").css("display", "flex");
|
$("#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", "flex");
|
// $("#btnLD").css("margin-left", "90px");
|
}
|
},
|
showsubbutton() {
|
$("#funcZone").css("width", "155px");
|
$("#funcZone").css("margin-left", "-105px");
|
$("#btn2D").css("display", "flex");
|
$("#btn3D").css("display", "flex");
|
$("#btnLD").css("display", "flex");
|
$("#btn3D").css("margin-left", "");
|
$("#btn2D").css("margin-left", "");
|
$("#btnLD").css("margin-left", "");
|
|
},
|
btnClick(val) {
|
if (val.id === 3) {
|
//处理2 3 维联动
|
let _sdiv = val.showtag === "2d" ? "#2dviewer" : "#3dviewerex";
|
if (val.isOn === true) {
|
this.$store.commit("changeStatus", true);
|
if (this.showtag !== "" && this.showtag !== val.showtag) {
|
this.$alert("请先关闭");
|
return;
|
}
|
$(_sdiv).css("display", "block");
|
$(_sdiv).css("width", "50%");
|
$("#3dviewer").css("width", "50%");
|
this.showtag = val.showtag;
|
|
if (this.hasinital === false && val.showtag === "2d") {
|
// this.$parent.$parent.$parent.$refs.twodviewer.init();
|
let _linkage = this.$store.state._linkage; // 重新赋值
|
this.$store.commit("CHANGE_LINKAGE", !_linkage);
|
this.hasinital = true;
|
} else {
|
this.$parent.$parent.$refs._3dviewer.isDoubleOn = true;
|
|
}
|
} else {
|
this.$store.commit("changeStatus", false);
|
$(_sdiv).css("display", "none");
|
$("#3dviewer").css("width", "100%");
|
this.showtag = "";
|
this.$parent.$parent.$refs._3dviewer.isDoubleOn = false;
|
|
}
|
} else {
|
this.isShowDrawer = true;
|
this.panelindex = val;
|
}
|
},
|
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, titleEn: 'interactive' });
|
// this.$emit("btnClick", { title: "定位", id: tag });
|
break;
|
case 6:
|
this.btnClick({ title: "图层", id: tag, titleEn: 'layer' });
|
// this.$emit("btnClick", { title: "图层", id: tag });
|
break;
|
case 7:
|
this.btnClick({ title: "场景", id: tag, titleEn: 'scene' });
|
// this.$emit("btnClick", { title: "场景", id: tag });
|
break;
|
case 8:
|
this.btnClick({ title: "工具", id: tag, titleEn: 'tool' });
|
// this.$emit("btnClick", { title: "工具", id: tag });
|
break;
|
case 9:
|
this.btnClick({ title: "分析", id: tag, titleEn: 'analysis' });
|
// this.$emit("btnClick", { title: "专题", id: tag });
|
break;
|
case 10:
|
this.btnClick({ title: "查询", id: tag, titleEn: 'query' });
|
// this.$emit("btnClick", { title: "专题", id: tag });
|
break;
|
default:
|
break;
|
}
|
},
|
|
hiddenPanel() {
|
this.isShowDrawer = false;
|
},
|
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,
|
});
|
},
|
pmfxshow(option) {
|
this.$parent.$parent.$parent.$refs._3dviewer.initalEcharts(option);
|
},
|
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() {
|
debugger
|
identifyTool.start((pick, type) => {
|
debugger
|
|
this.$refs.IdentifyTool.open(pick, type)
|
})
|
},
|
//改变罗盘和放大缩小ui的位置
|
changeCompassPosition() {
|
// let compass = document.getElementsByClassName("compass")[0];
|
// let navigationControls = document.getElementsByClassName("navigation-controls")[0];
|
// let parentNode = document.getElementsByClassName("_compass")[0]
|
// parentNode.appendChild(compass)
|
// parentNode.appendChild(navigationControls)
|
// document.getElementsByClassName("compass")[0].remove()
|
// document.getElementsByClassName("navigation-controls")[0].remove()
|
|
}
|
},
|
mounted() {
|
setTimeout(() => {
|
this.changeCompassPosition()
|
}, 1000);
|
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>
|
#rightMain {
|
position: absolute;
|
right: 0px;
|
z-index: 999;
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
|
|
|
|
.rightCompass {
|
color: aliceblue;
|
width: 80px;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.centerBtn {
|
display: flex;
|
flex-direction: column;
|
|
.divbtn {
|
width: 56px;
|
height: 34px;
|
font-size: 12px;
|
font-family: Microsoft YaHei;
|
color: #FCFDFF;
|
text-shadow: 0px 1px 1px rgba(0, 1, 2, 0.65);
|
cursor: pointer;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
background: url("../../../assets/img/right_btn.png") no-repeat;
|
background-size: 100% 100%;
|
margin-top: 6px;
|
margin-left: 3px;
|
}
|
|
|
|
.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;
|
}
|
}
|
|
._compass {
|
width: 100%;
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
}
|
}
|
|
.switchBtn {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
|
.switchBtnImg {
|
width: 35px;
|
height: 554px;
|
background: url("../../../assets/img/right_line_arrow.png") no-repeat;
|
background-size: 100% 100%;
|
}
|
}
|
|
.content {
|
font-size: 20px;
|
color: aliceblue;
|
width: 0px;
|
height: 100%;
|
overflow: hidden;
|
transition: 0.3s ease;
|
|
background-image: url('../../../assets/img/right_back_img.png');
|
background-size: 334px 100%;
|
|
.closeRight {
|
height: 60px;
|
width: 42px;
|
top: 50%;
|
margin-top: -30px;
|
position: absolute;
|
cursor: pointer;
|
}
|
|
.opt-card {
|
color: white;
|
border: 0 !important;
|
overflow: auto;
|
height: 100%;
|
border-radius: 0 !important;
|
background: rgba(0, 0, 0, 0);
|
padding-left: 40px;
|
padding-right: 20px;
|
padding-top: 80px;
|
|
.header_box {
|
height: 100%;
|
display: flex;
|
flex-direction: row;
|
}
|
|
.header_title {
|
display: inline-block;
|
height: 26px;
|
font-size: 18px;
|
line-height: 30px;
|
font-family: PangMenZhengDao;
|
font-style: italic;
|
color: #FFFFFF;
|
background: linear-gradient(to top, rgba(129, 198, 239, 0.83) 0%, rgba(246, 252, 255, 0.83) 62.3046875%, rgba(255, 255, 255, 0.83) 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
margin-left: 25px;
|
}
|
|
.header_title_en {
|
display: inline-block;
|
width: 90px;
|
height: 25px;
|
font-size: 10px;
|
font-family: Myriad Pro;
|
font-weight: 400;
|
color: #FFFFFF;
|
line-height: 25px;
|
margin-left: 10px;
|
text-shadow: 0px 2px 0px rgba(10, 40, 95, 0.69);
|
background: linear-gradient(0deg, #3F85D8 0%, #98DEFF 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
|
/deep/ .el-card__header {
|
font-size: 16px;
|
border-bottom: 0;
|
|
width: 249px;
|
height: 28px;
|
background: url("../../../assets/img/right_title_back.png") no-repeat;
|
background-size: 249px 28px;
|
padding: 0px;
|
}
|
|
/deep/ .el-card__body {
|
padding: 0px;
|
padding-top: 10px;
|
padding-left: 0px;
|
|
|
}
|
|
/deep/ .el-collapse {
|
border: 0px !important;
|
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
/deep/ .el-collapse-item__header {
|
background: rgba(40, 130, 232, 0.35) !important;
|
padding-left: 10px;
|
color: white;
|
height: 36px;
|
font-weight: 400;
|
border-bottom: 0;
|
}
|
|
/deep/ .el-collapse-item__wrap {
|
background: rgba(0, 0, 0, 0) !important;
|
border: 0px !important;
|
}
|
|
/deep/.el-form-item__label {
|
color: #ffffff;
|
}
|
}
|
}
|
}
|
</style>
|
