<template>
|
<div class="rightBottom trigger" id="rightBottom">
|
<div class="mapTools">
|
<!-- <div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="数字人"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div
|
class="legend-bg"
|
@click="showDigitalPerson"
|
:class="{ active: isShowDP }"
|
>
|
<img class="legendImg" src="@/assets/img/new/数字人.png" />
|
</div>
|
</el-tooltip>
|
</div> -->
|
<div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="亦庄新区范围"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="maskingOut">
|
<img class="legendImg" src="@/assets/img/new/mengbanbai.png" />
|
</div>
|
</el-tooltip>
|
</div>
|
<div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="图例"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="showLegendPop">
|
<img class="legendImg" src="@/assets/img/new/legend.png" />
|
</div>
|
</el-tooltip>
|
</div>
|
<!-- <div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="视角切换"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="fovViewer">
|
<img class="dwImg" src="@/assets/img/new/location.png" />
|
</div>
|
</el-tooltip>
|
</div> -->
|
<div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="复位"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="flyBack">
|
<img class="fwImg" src="@/assets/img/new/fuwei.png" />
|
</div>
|
</el-tooltip>
|
</div>
|
<div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="指北"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="trueNorth">
|
<img class="zbImg" src="@/assets/img/new/zhibei.png" />
|
</div>
|
</el-tooltip>
|
</div>
|
<!-- <div class="mapTool" v-if="isActive">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="全屏"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="fullScreen">
|
<img src="@/assets/img/new/quanping.png" />
|
</div>
|
</el-tooltip>
|
</div>
|
<div class="mapTool" v-else>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="退出全屏"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg tcqp" @click="fullScreen">
|
<img class="qpImg" src="@/assets/img/new/tuichuquanping.png" />
|
</div>
|
</el-tooltip>
|
</div> -->
|
<div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="放大"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="zoomIn">
|
<img class="fdImg" src="@/assets/img/new/zoomIn.png" />
|
</div>
|
</el-tooltip>
|
</div>
|
<div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="缩小"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="zoomOut">
|
<img class="sxImg" src="@/assets/img/new/zoomOut.png" />
|
</div>
|
</el-tooltip>
|
</div>
|
<!-- <div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="场景快照"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="screenShot">
|
<img class="legendImg" src="@/assets/img/new/mengban.png" />
|
</div>
|
</el-tooltip>
|
</div> -->
|
<!-- <div class="mapTool">
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="相机参数"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<div class="legend-bg" @click="getcamera">
|
<img class="legendImg" src="@/assets/img/new/mengban.png" />
|
</div>
|
</el-tooltip>
|
</div> -->
|
<!-- <div class="mapTool">
|
<el-tooltip class="item" effect="dark" content="二三维切换" placement="left">
|
<el-button class="tool-23mode" @click="_23mode">
|
<img class="tswImg" v-show="mode === 3" src="@/assets/img/right/23w2.png" />
|
<img class="stwImg" v-show="mode === 2" src="@/assets/img/right/23w3.png" />
|
</el-button>
|
</el-tooltip>
|
</div>-->
|
<!-- <div class="mapTool button-group-vertical">
|
<el-button-group>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="放大"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<el-button class="tool-zoomIn" @click="zoomIn">
|
<div class="legend-bg">
|
<img class="fdImg" src="@/assets/img/right/fd2.png" />
|
</div>
|
</el-button>
|
</el-tooltip>
|
<el-tooltip
|
class="item"
|
effect="dark"
|
content="缩小"
|
placement="left"
|
popper-class="item_tooltip"
|
>
|
<el-button class="tool-zoomOut" @click="zoomOut">
|
<img class="sxImg" src="@/assets/img/right/sx2.png" />
|
</el-button>
|
</el-tooltip>
|
</el-button-group>
|
</div>-->
|
</div>
|
<transition name="el-zoom-in-bottom">
|
<right-legend v-if="showLegend" class="transition-box"></right-legend>
|
</transition>
|
</div>
|
</template>
|
|
<style scoped>
|
.rightBottom {
|
position: absolute;
|
bottom: 109px;
|
right: 20px;
|
}
|
.trigger {
|
pointer-events: all;
|
}
|
|
.mapTool {
|
margin: 2px 0;
|
}
|
.legend-bg:hover {
|
background-image: url("~@/assets/img/new/leftCircle-y.png");
|
}
|
.legend-bg {
|
background-image: url("~@/assets/img/new/leftCircle.png");
|
background-size: 100%;
|
background-color: transparent;
|
width: 35px;
|
height: 35px;
|
position: relative;
|
cursor: pointer;
|
}
|
.active {
|
background-image: url("~@/assets/img/new/leftCircle-y.png");
|
}
|
.tcqp {
|
background-color: rgba(0, 138, 252, 0.6);
|
border-radius: 50%;
|
}
|
/*
|
.mapTool .el-button {
|
padding: 0 !important;
|
width: 30px;
|
height: 30px;
|
border: unset;
|
float: unset;
|
display: block;
|
background: rgba(0, 0, 0, 0);
|
} */
|
|
.legend-bg img {
|
/* margin-top: 14px;
|
margin-left: 14px; */
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
width: 20px;
|
}
|
|
.button-group-vertical {
|
text-align: center;
|
position: relative;
|
}
|
|
.fgx {
|
position: absolute;
|
width: 66%;
|
height: 1px;
|
border: 1px solid #dcdfe6;
|
z-index: 999;
|
margin: 0 13%;
|
}
|
|
.button-group-vertical .el-button-group > .el-button:first-child {
|
border-top-right-radius: 4px !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: 4px !important;
|
}
|
|
/* .legendImg:hover {
|
content: url("../../assets/img/right/legend_hover.png");
|
}
|
.dwImg:hover {
|
content: url("../../assets/img/right/location1.png");
|
}
|
.fwImg:hover {
|
content: url("../../assets/img/right/fw.png");
|
}
|
|
.zbImg:hover {
|
content: url("../../assets/img/right/zb.png");
|
}
|
|
.qpImg:hover {
|
content: url("../../assets/img/right/qp.png");
|
}
|
|
.tswImg:hover {
|
content: url("../../assets/img/right/23w.png");
|
}
|
|
.stwImg:hover {
|
content: url("../../assets/img/right/32w.png");
|
}
|
|
.fdImg:hover {
|
content: url("../../assets/img/right/fd.png");
|
}
|
|
.sxImg:hover {
|
content: url("../../assets/img/right/sx.png");
|
} */
|
|
.tool-zoomIn {
|
margin-bottom: -7px;
|
}
|
</style>
|
<script>
|
let _index = 0;
|
import rightLegend from "./right-legend";
|
import Bus from "../tools/Bus";
|
export default {
|
name: "right-bottom",
|
components: {
|
rightLegend,
|
},
|
data() {
|
return {
|
isWideAngle: false,
|
wideAngle: 1.04,
|
isShowDP: false,
|
isShowTA: false,
|
clickIndex: 0,
|
camera: {
|
position: [116.540659, 39.744945, 50000],
|
orientation: {
|
heading: 0,
|
pitch: -90,
|
roll: 0,
|
},
|
},
|
mode: 3,
|
modes: [
|
{
|
id: "mode-3d",
|
name: "3D",
|
mode: 3,
|
},
|
{
|
id: "mode-2d",
|
name: "2D",
|
mode: 2,
|
},
|
],
|
url: "",
|
showLegend: false, //图例展示
|
isActive: true,
|
};
|
},
|
mounted() {
|
//关闭我的资源弹窗
|
Bus.$on("closeLegendPop", (data) => {
|
if (data) {
|
this.showLegend = false;
|
}
|
});
|
},
|
destroyed() {
|
Bus.$off("closeLegendPop");
|
},
|
methods: {
|
// 相机参数
|
getcamera() {
|
let p = sgworld.Navigate.getCameraInfo();
|
console.log(p);
|
},
|
showDigitalPerson() {
|
this.isShowDP = !this.isShowDP;
|
this.$store.commit("showDigitalPerson", this.isShowDP);
|
if (!this.isShowDP) {
|
this.$store.commit("showTextArea", false);
|
}
|
},
|
maskingOut() {
|
if (!window.maskinglayer) {
|
window.maskinglayer = sgworld.Creator.createImageryProvider(
|
"蒙版",
|
"wms",
|
{
|
url: "http://10.10.4.121:8070/gisserver/wmsserver/WaiWeiMengBan",
|
layers: "",
|
parameters: {
|
format: "image/png",
|
transparent: true,
|
alpha: 1,
|
},
|
},
|
"0",
|
15, //zindex
|
true,
|
""
|
);
|
} else {
|
window.maskinglayer.deleteObject();
|
window.maskinglayer = null;
|
}
|
},
|
screenShot() {
|
sgworld.tools.browse();
|
sgworld.Analysis.createScreenshot();
|
},
|
S3M() {
|
var promise = Viewer.scene.open(
|
"http://192.162.2.2:8090/iserver/services/3D-GX/rest/realspace"
|
);
|
console.log(promise);
|
},
|
modeClick(index, mode) {
|
this.clickIndex = index;
|
Viewer.scene.mode = mode;
|
},
|
_23mode() {
|
if (this.mode === 3) {
|
Viewer.scene.mode = 2;
|
this.mode = 2;
|
} else if (this.mode === 2) {
|
Viewer.scene.mode = 3;
|
this.mode = 3;
|
}
|
},
|
fovViewer() {
|
this.isWideAngle = !this.isWideAngle;
|
if (this.isWideAngle) {
|
this.wideAngle = window.Viewer.camera.frustum.fov;
|
window.Viewer.camera.frustum.fov = 2;
|
} else {
|
window.Viewer.camera.frustum.fov = this.wideAngle;
|
}
|
},
|
flyBack() {
|
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() {
|
this.isActive = !this.isActive;
|
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,
|
},
|
});
|
},
|
//图例弹出
|
showLegendPop() {
|
this.showLegend = !this.showLegend;
|
if (this.showLegend) {
|
//关闭我的资源弹窗
|
Bus.$emit("closeMyResourcePop", true);
|
}
|
},
|
},
|
};
|
</script>
|
