<template>
|
<div class="legend-panel">
|
<transition name="fade">
|
<div :class="'legend-content map-background'" v-show="isShow">
|
<div class="legend-content-box" v-for="(item,index) in serviceLayers" :key="index">
|
<p><span>{{ item.name }}</span></p>
|
<div class="map-under-line"></div>
|
<ul>
|
<li v-for="(ite,idx) in item.layers" :key="idx">
|
<img :src="ite.legendImage===undefined?'../.././assets/images/map-pages/setting.png':ite.legendImage" alt=''>
|
<span>{{ ite.name }}</span>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</transition>
|
<el-tooltip :popper-class="'map-tooltip'" effect="dark" content="图例" placement="left">
|
<div :class="this.isShow?'legend-btn map-btn-active':'legend-btn map-btn-unactive'"
|
@click="legendChange()">
|
<i class="el-icon-more-outline"></i>
|
</div>
|
</el-tooltip>
|
</div>
|
</template>
|
<script>
|
import { LayerWasteWater } from '../../conf/layers/LayerWasteWater'
|
import { LayerWasteGas } from '../../conf/layers/LayerWasteGas'
|
import { LayerWasteSolid } from '../../conf/layers/LayerWasteSolid'
|
import { LayerAirQuality } from '../../conf/layers/LayerAirQuality'
|
import { LayerEnvRisk } from '../../conf/layers/LayerEnvRisk'
|
import { LayerSoilGroundWater } from '../../conf/layers/LayerSoilGroundWater'
|
import { LayerPipeLines } from '../../conf/layers/LayerPipeLines'
|
import { LayerPk } from '../../conf/layers/LayerPk'
|
import { LayerArea } from '../../conf/layers/LayerArea'
|
|
export default {
|
name: 'LegendPanel',
|
data () {
|
return {
|
// 控制图例 内容的 显示/隐藏
|
isShow: false,
|
serviceLayers: [LayerSoilGroundWater, LayerEnvRisk, LayerAirQuality, LayerWasteSolid, LayerWasteGas, LayerWasteWater, LayerArea, LayerPk, LayerPipeLines]
|
}
|
},
|
methods: {
|
// 图标 控制内容的展示与隐藏
|
legendChange () {
|
this.isShow = !this.isShow
|
}
|
}
|
}
|
</script>
|
|
<style lang="less">
|
.legend-panel {
|
position: absolute;
|
z-index: 502;
|
bottom: .11979rem;
|
right: .14583rem;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
-webkit-box-align: end;
|
-ms-flex-align: end;
|
//align-items: flex-end;
|
transition: all .5s;
|
|
.legend-btn {
|
width: .2rem;
|
height: .2rem;
|
//font-size: .08333rem;
|
border: .00521rem solid @background-color-light;
|
border-radius: @border-radius;
|
text-align: center;
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-orient: vertical;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
-webkit-box-align: center;
|
-ms-flex-align: center;
|
align-items: center;
|
-webkit-box-pack: center;
|
-ms-flex-pack: center;
|
justify-content: center;
|
background: @background-color;
|
margin-top: .04167rem;
|
cursor: pointer;
|
//color: @color;
|
margin-left: auto;
|
font-size: 0.08333rem;
|
}
|
|
@keyframes bounce-in {
|
0% {
|
transform: scale(0);
|
opacity: 0.3;
|
}
|
100% {
|
transform: scale(1);
|
opacity: 1;
|
}
|
}
|
|
.fade-enter-active {
|
transform-origin: right bottom;
|
animation: bounce-in .2s;
|
}
|
|
.fade-leave-active {
|
transform-origin: right bottom;
|
animation: bounce-in .2s reverse;
|
}
|
|
.legend-content {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
-webkit-box-orient: horizontal;
|
-webkit-box-direction: reverse;
|
-ms-flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
|
width: -webkit-max-content;
|
width: -moz-max-content;
|
width: max-content;
|
|
overflow: hidden;
|
min-height: 1.28646rem;
|
|
.legend-content-box {
|
font-size: 0.07292rem;
|
padding: .10417rem;
|
border-left: .00521rem solid @background-color-split;
|
|
p {
|
text-align: center;
|
margin: 0 !important;
|
//padding: 0;
|
//color: @color-title;
|
-webkit-margin-before: 0.3rem;
|
margin-block-start: 0.3rem;
|
-webkit-margin-after: 0.2rem;
|
margin-block-end: 0.2rem;
|
margin-bottom: 0.05208rem !important;
|
|
span {
|
color: @color-title;
|
font-size: .08333rem;
|
font-weight: 600;
|
}
|
}
|
|
ul {
|
list-style: none;
|
flex-wrap: wrap;
|
margin: 0 !important;
|
padding: 0 !important;;
|
padding-inline: 0;
|
font-size: .08333rem;
|
|
li {
|
list-style: none;
|
display: flex;
|
-webkit-box-align: center;
|
align-items: center;
|
margin: 0.05208rem 0;
|
|
img {
|
width: .08333rem;
|
height: .08333rem;
|
margin-right: .01042rem;
|
}
|
|
span {
|
color: @color;
|
}
|
}
|
}
|
}
|
|
}
|
}
|
</style>
|
