<template>
|
<Popup ref="pop" top="20px" left="calc(100% - 600px)" :maxHeight="'700px'" :title="title" @close="close(true)"
|
width="300px" @cancel="close(false)">
|
<div style="padding: 10px;">
|
<div class="underGroundBox">
|
<el-switch class="elSwitch" @change="setUnderGroundCheck" v-model="value1" active-text="地下模式">
|
</el-switch>
|
|
<!-- <div class="contentRight">
|
<el-switch class="elSwitch" v-model="value2" active-text="地下网格">
|
</el-switch>
|
</div> -->
|
</div>
|
<div class="underGroundBox">
|
<span>
|
透明度 :
|
</span>
|
<div class="contentRight">
|
<el-slider v-model="value3" @change="setAlphaChange" :format-tooltip="formatTooltip"></el-slider>
|
</div>
|
|
</div>
|
</div>
|
|
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from '@/components/Tool/Popup.vue';
|
export default {
|
name: 'location',
|
components: { Popup },
|
data() {
|
return {
|
title: '地下模式',
|
value1: true,
|
value2: false,
|
value3: 50,
|
|
};
|
},
|
methods: {
|
// 关闭弹窗
|
close(isCloseBtn, removeLayer = true) {
|
// removeLayer && this.removeImageLayer();
|
// 重置data值
|
this.value1 = false;
|
this.value3 = 50;
|
this.setUnderGroundCheck();
|
this.setAlphaChange()
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
|
},
|
setUnderGroundCheck() {
|
earthCtrl.camera.undergroundMode = this.value1
|
earthCtrl.camera.imageryLayerAlpha = this.value3 / 100
|
},
|
// 打开弹窗
|
open() {
|
this.close(true);
|
this.$refs.pop.open();
|
|
this.setUnderGroundCheck();
|
},
|
formatTooltip(val) {
|
return val + '%'
|
},
|
setAlphaChange() {
|
earthCtrl.camera.imageryLayerAlpha = this.value3 / 100
|
}
|
|
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.elSwitch {
|
::v-deep.el-switch__core {
|
border-radius: 10px !important;
|
width: 40px !important;
|
height: 20px;
|
}
|
|
::v-deep.el-switch__core:after {
|
width: 16px;
|
height: 16px;
|
border-radius: 100%;
|
|
}
|
|
|
}
|
|
.underGroundBox {
|
display: flex;
|
margin-bottom: 10px;
|
align-items: center;
|
|
span {
|
font-size: 14px;
|
}
|
|
.contentRight {
|
flex: 1;
|
margin-left: 10px;
|
}
|
}
|
|
::v-deep .el-switch.is-checked .el-switch__core:after {
|
margin-left: -17px;
|
|
}
|
</style>
|
