<template>
|
<Popup
|
ref="pop"
|
:title="title"
|
@close="close(true)"
|
width="400px"
|
@cancel="close(false)"
|
>
|
<el-row :gutter="20">
|
<el-col :span="4">
|
<el-button
|
@click="alphaChange(1)"
|
icon="el-icon-minus"
|
size="small"
|
></el-button>
|
</el-col>
|
<el-col :span="16">
|
<el-slider
|
v-model="modelForm.alpha"
|
:min="0"
|
:step="0.1"
|
:max="1"
|
@change="update()"
|
>
|
</el-slider>
|
</el-col>
|
<el-col :span="4">
|
<el-button
|
@click="alphaChange(2)"
|
icon="el-icon-plus"
|
size="small"
|
></el-button>
|
</el-col>
|
</el-row>
|
|
<!-- <el-input
|
size="small"
|
v-model="modelForm.alpha1"
|
@input="update2"
|
></el-input> -->
|
<!-- <el-slider
|
@input="update1"
|
|
show-input
|
>
|
</el-slider> -->
|
|
</Popup>
|
</template>
|
|
<script>
|
import Popup from "./Popup";
|
|
|
export default {
|
name: "AddOnlineMap",
|
components: {
|
Popup,
|
},
|
mixins: [],
|
data() {
|
return {
|
title: "透明度",
|
modelForm: {
|
alpha: 1,
|
|
},
|
titleset: null,
|
index: null,
|
};
|
},
|
computed: {
|
|
},
|
methods: {
|
|
// 关闭弹窗
|
close(isCloseBtn, removeLayer = true) {
|
// removeLayer && this.removeImageLayer();
|
if (this.index != null) {
|
this.$store.state.setAlphaList[this.index].alpha = this.modelForm.alpha;
|
|
}
|
this.index = null;
|
// 重置data值
|
Object.assign(this.$data, this.$options.data());
|
!isCloseBtn && this.$refs.pop.close();
|
|
|
},
|
// 打开弹窗
|
open() {
|
this.close(true);
|
this.$refs.pop.open();
|
this.showTileSet();
|
},
|
changeToken(token) {
|
this.mapCollection.tokne = token;
|
},
|
update2() {
|
this.modelForm.alpha = this.modelForm.alpha1;
|
this.update();
|
},
|
update1() {
|
this.modelForm.alpha1 = this.modelForm.alpha;
|
this.update();
|
},
|
alphaChange(res) {
|
switch (res) {
|
case 1:
|
if (this.modelForm.alpha <= 0) {
|
this.modelForm.alpha = 0
|
} else {
|
this.modelForm.alpha = this.modelForm.alpha - 0.1
|
}
|
|
this.update()
|
break;
|
case 2:
|
if (this.modelForm.alpha >= 1) {
|
this.modelForm.alpha = 1
|
} else {
|
this.modelForm.alpha = this.modelForm.alpha + 0.1
|
}
|
this.modelForm.alpha = this.modelForm.alpha.toFixed(1)
|
this.update()
|
break;
|
}
|
},
|
|
|
update() {
|
this.titleset.style = new Cesium.Cesium3DTileStyle({
|
color: "color('rgba(255,255,255," + this.modelForm.alpha + ")')",
|
});
|
},
|
showTileSet() {
|
this.index = null;
|
var tile = this.$store.state.setAlphaDity
|
for (var j in Viewer.scene.primitives._primitives) {
|
if (Viewer.scene.primitives._primitives[j].id == tile.cnName) {
|
this.titleset = Viewer.scene.primitives._primitives[j]
|
}
|
}
|
|
|
var list = this.$store.state.setAlphaList;
|
|
for (var i = 0; i < list.length; i++) {
|
if (list[i].name == tile.cnName) {
|
this.index = i;
|
}
|
}
|
|
if (this.index != null) {
|
this.modelForm.alpha = list[this.index].alpha;
|
this.modelForm.alpha1 = list[this.index].alpha;
|
} else {
|
|
this.modelForm.alpha = 1;
|
this.modelForm.alpha1 = 1;
|
}
|
},
|
|
},
|
};
|
</script>
|
|
<style scoped lang="less">
|
/deep/.el-card__body {
|
padding: 0px !important;
|
}
|
.map {
|
display: inline-block;
|
cursor: pointer;
|
margin: 5px;
|
text-align: center;
|
|
.el-image {
|
border: 2px solid #fff;
|
border-radius: 4px;
|
}
|
}
|
.boxCard {
|
margin-bottom: 5px;
|
}
|
</style>
|
