<template>
|
<div class="bottom" id="bottom">
|
<div class="mapTools" v-show="show">
|
<div class="mapTool" v-show="test.fwval">
|
<el-button class="tool-rotate" @click="zoomIn" title="放大">
|
<img src="../../../static/img/image/zoomIn.png" />
|
</el-button>
|
</div>
|
<div class="mapTool" v-show="test.fwval">
|
<el-button class="tool-rotate" @click="zoomOut" title="缩小">
|
<img src="../../../static/img/image/zoomOut.png" />
|
</el-button>
|
</div>
|
<!-- <div class="mapTool">
|
<el-button
|
class="tool-trueNorth"
|
v-show="test.zbzval"
|
@click="trueNorth"
|
title="正北"
|
>
|
<img src="../../../static/img/image/zbz.png" />
|
</el-button>
|
</div> -->
|
<!-- <div class="mapTool">
|
<el-button
|
class="tool-fullScreen"
|
v-show="test.qpval"
|
@click="fullScreen"
|
title="全屏"
|
>
|
<img src="../../../static/img/image/qp.png" />
|
</el-button>
|
</div> -->
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.bottom {
|
position: absolute;
|
bottom: 0.4rem;
|
height: 0.76rem;
|
left: 0.5rem;
|
}
|
.mapModeControl {
|
position: absolute;
|
right: 0.05rem;
|
background: rgba(90, 90, 90, 0.5);
|
bottom: 0.05rem;
|
height: 0.76rem;
|
width: 1.03rem;
|
transition: all 1s;
|
}
|
.bottom .mapModeControl:hover {
|
transition: all 0.6s;
|
-webkit-transition: all 0.6s;
|
width: 3.2rem;
|
}
|
.mapMode {
|
display: inline-block;
|
}
|
.mapMode dl {
|
width: 0.88rem;
|
height: 0.6rem;
|
border: 1px solid #494949;
|
cursor: pointer;
|
margin: 0.08rem;
|
}
|
|
.mapMode dl:hover {
|
border-color: #0553b4;
|
}
|
|
.mapMode dl {
|
position: relative;
|
}
|
#history {
|
background: url(../../../static/img/1.png) no-repeat;
|
}
|
#mode-3d {
|
background: url(../../../static/img/2.png) no-repeat;
|
}
|
#mode-2d {
|
background: url(../../../static/img/4.png) no-repeat;
|
}
|
.mapMode dt {
|
width: 100%;
|
height: 0.2rem;
|
line-height: 0.2rem;
|
position: absolute;
|
left: 0;
|
bottom: 0px;
|
font-size: 0.12rem;
|
text-align: center;
|
color: #fff;
|
text-shadow: 1px 1px 2px #000;
|
background: rgba(0, 0, 0, 0.5);
|
}
|
.mapModeActive {
|
background: rgba(1, 37, 80, 0.5) !important;
|
}
|
|
.mapTools {
|
position: absolute;
|
/* bottom: 2rem; */
|
bottom: 0.2rem;
|
right: 0.1rem;
|
}
|
.mapTool {
|
margin: 0.1rem 0;
|
}
|
.mapTool .el-button {
|
padding: 0 !important;
|
font-size: 0.24rem;
|
border: unset;
|
float: unset;
|
display: block;
|
background: rgba(18, 126, 255, 1);
|
}
|
|
/* .button-group-vertical {
|
text-align: center;
|
position: relative;
|
} */
|
.fgx {
|
position: absolute;
|
width: 80%;
|
height: 1px;
|
height: 1px;
|
border: 1px solid #dcdfe6;
|
z-index: 999;
|
margin: 0 10%;
|
}
|
/* .button-group-vertical .el-button-group > .el-button:first-child {
|
border-top-right-radius: 0.04rem !important;
|
border-bottom-left-radius: 0px !important;
|
}
|
.button-group-vertical .el-button-group > .el-button:last-child {
|
border-top-right-radius: 0;
|
border-bottom-left-radius: 0.04rem !important;
|
} */
|
.mapTool img {
|
width: 30px;
|
/* height: 0.4rem; */
|
}
|
</style>
|
|
<script>
|
import Bus from "../../js/bus.js";
|
export default {
|
props: ["test"],
|
data() {
|
return {
|
show: true,
|
parentdata: {
|
fwval: false,
|
zbzval: false,
|
qpval: false,
|
zymlval: false,
|
kjcxval: false,
|
dxmsval: false,
|
snmsval: false,
|
ssval: false,
|
},
|
clickIndex: 0,
|
// isShowHistory: false,
|
camera: {
|
position: [116.52217697339846, 39.75979421847914, 17045.47005612415],
|
orientation: {
|
heading: 0,
|
pitch: -90,
|
roll: 0,
|
},
|
},
|
modes: [
|
{
|
id: "mode-3d",
|
name: "3D",
|
mode: 3,
|
},
|
{
|
id: "mode-2d",
|
name: "2D",
|
mode: 2,
|
},
|
],
|
};
|
},
|
mounted() {
|
Bus.$on("myMsg", (myMsg) => {
|
this.show = myMsg;
|
});
|
},
|
methods: {
|
modeClick(index, mode) {
|
this.clickIndex = index;
|
Viewer.scene.mode = mode;
|
},
|
flyBack() {
|
// let p = sgworld.Navigate.getDegrees();
|
// console.log("经纬度:", p);
|
sgworld.Navigate.flyToPointsInterest({
|
destination: new Cesium.Cartesian3.fromDegrees(
|
this.camera.position[0],
|
this.camera.position[1],
|
this.camera.position[2]
|
),
|
orientation: {
|
heading: Cesium.Math.toRadians(this.camera.orientation.heading),
|
pitch: Cesium.Math.toRadians(this.camera.orientation.pitch),
|
roll: Cesium.Math.toRadians(this.camera.orientation.roll),
|
},
|
});
|
},
|
fullScreen() {
|
Viewer.fullscreenButton.viewModel.command(true);
|
},
|
zoomIn() {
|
$(".navigation-control")[0].click();
|
},
|
zoomOut() {
|
$(".navigation-control-last")[0].click();
|
},
|
trueNorth() {
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Viewer.camera.position,
|
orientation: {
|
heading: 0,
|
pitch: Viewer.camera.pitch,
|
roll: 0,
|
},
|
});
|
},
|
// showHistory() {
|
// this.isShowHistory = !this.isShowHistory;
|
// if (this.isShowHistory) {
|
// $(".bottomLeft").show();
|
// } else {
|
// $(".bottomLeft").hide();
|
// }
|
// historyImager && (historyImager.show = this.isShowHistory);
|
// },
|
},
|
};
|
</script>
|
