131 lines
2.6 KiB
Vue
131 lines
2.6 KiB
Vue
<template>
|
|
<div :class="[{ 'expend-only': expend }, 'screen-map-server',toolBarStore.expand ? 'expand' : '']" @mouseenter="moveEnter" @mouseleave="moveLeave">
|
|
|
|
<img alt="ICON_MAP" class="icon-cover" :src="getAssetsFile(`icon-${active}-active.png`)">
|
|
|
|
<div v-for="(item, index) in list" class="screen-map-server-item" :key="index" :style="getStyle(item, index)"
|
|
@click="toggle(item, index)">
|
|
|
|
<img v-show="(!expend && !index) || expend" alt="ICON_MAP" class="icon-map"
|
|
:src="getAssetsFile(`icon-${item.prop}${item.prop == active ? '-active' : ''}.png`)">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { getAssetsFile } from '@/utils/common'
|
|
import useToolBarStore from '@/store/modules/toolbar'
|
|
|
|
const toolBarStore = useToolBarStore()
|
|
const emit = defineEmits([ 'toggle' ])
|
|
|
|
const active = ref('satellite')
|
|
const expend = ref(false)
|
|
|
|
const list = [
|
|
{
|
|
label: '遥感',
|
|
prop: 'satellite'
|
|
},
|
|
{
|
|
label: '海图',
|
|
prop: 'sea'
|
|
},
|
|
{
|
|
label: '浅色',
|
|
prop: 'light'
|
|
}
|
|
]
|
|
|
|
/**
|
|
* 动态改变当前图例的定位
|
|
* @param e 当前图例信息
|
|
* @param index 当前图例下标
|
|
*/
|
|
const getStyle = (e, index) => ({
|
|
'background-color': !expend.value && e.color ? e.color : 'transparent', // 未展开样式
|
|
'border-radius': expend.value ? '0px' : '5px', // 未展开样式
|
|
right: expend.value ? `${index * 40 + (index + 1) * 4}px` : `${(index + 1) * 4}px`,
|
|
'transition-duration': expend.value ? `${index * 0.2}s` : '0s',
|
|
'z-index': e.index
|
|
})
|
|
|
|
const moveEnter = () => {
|
|
expend.value = true
|
|
}
|
|
|
|
const moveLeave = () => {
|
|
expend.value = false
|
|
}
|
|
|
|
/**
|
|
* 底图切换
|
|
* @param e 当前图例信息
|
|
*/
|
|
const toggle = (e) => {
|
|
active.value = e.prop
|
|
emit('toggle', 'toggle-base', e.prop)
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.screen-map-server {
|
|
position: absolute;
|
|
right: 30px;
|
|
bottom: 112px;
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 4px;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
background-color: transparent;
|
|
transition-duration: .3s;
|
|
cursor: pointer;
|
|
pointer-events: auto;
|
|
|
|
&.expend-only {
|
|
height: 48px;
|
|
width: 135px;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(77, 151, 255, 0.5);
|
|
|
|
.icon-cover {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* COVER */
|
|
.icon-cover {
|
|
display: block;
|
|
position: absolute;
|
|
right: 4px;
|
|
top: 4px;
|
|
z-index: 9;
|
|
}
|
|
|
|
/* ITEM */
|
|
.screen-map-server-item {
|
|
border-radius: 0;
|
|
height: 40px;
|
|
position: absolute;
|
|
top: 4px;
|
|
width: 40px;
|
|
z-index: 1;
|
|
|
|
.icon-map {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
.expand{
|
|
right: 390px;
|
|
}
|
|
</style>
|