120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<template>
|
|
<div class="baselayer-switcher" :style="{ right: drawerOpen ? '480px' : '12px' }">
|
|
<div
|
|
class="switcher-item"
|
|
v-for="item in layers"
|
|
:key="item.key"
|
|
:class="{ active: item.key === activeKey }"
|
|
@click="handleSwitch(item.key)"
|
|
>
|
|
<img :src="item.img" alt="" />
|
|
<div class="label">{{ item.name }}</div>
|
|
</div>
|
|
<div class="nineSectionsImg">
|
|
<img :src="nineSectionsImg[activeKey]" alt="" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref, watch } from "vue";
|
|
import { useUiStore } from "@/store/modules/ui";
|
|
import shiliangImg from "@/assets/images/map-shiliangtu.png";
|
|
import dixingImg from "@/assets/images/map-dixingtu.png";
|
|
import yingxiangImg from "@/assets/images/map-yingxiangtu.png";
|
|
import nineSectionsShiliangImg from "@/assets/images/nineSections-shiliang.png";
|
|
import nineSectionsDixingImg from "@/assets/images/nineSections-dixing.png";
|
|
import nineSectionsYingxiangImg from "@/assets/images/nineSections-yingxiang.png";
|
|
const props = defineProps({
|
|
map: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
})
|
|
const uiStore = useUiStore();
|
|
const drawerOpen = ref(uiStore.drawerOpen);
|
|
|
|
// 监听 store 中的 drawerOpen 变化
|
|
watch(
|
|
() => uiStore.drawerOpen,
|
|
(newVal) => {
|
|
drawerOpen.value = newVal;
|
|
}
|
|
);
|
|
const layers = [
|
|
{ key: "s_province_boundaries", name: "矢量", img: shiliangImg },
|
|
{ key: "BASEMAP-white", name: "地形", img: dixingImg },
|
|
{ key: "BASEMAP-img", name: "影像", img: yingxiangImg },
|
|
];
|
|
const nineSectionsImg:any = {'s_province_boundaries':nineSectionsShiliangImg,'BASEMAP-white':nineSectionsDixingImg,'BASEMAP-img':nineSectionsYingxiangImg,}
|
|
|
|
const activeKey = ref(layers[0].key);
|
|
const handleSwitch = (key: string) => {
|
|
activeKey.value = key;
|
|
props.map.baseLayerSwitcher(key);
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.baselayer-switcher {
|
|
display: flex;
|
|
position: absolute;
|
|
bottom: 20px;
|
|
right: 480px;
|
|
z-index: 200;
|
|
.switcher-item {
|
|
background: #d8d8d8;
|
|
border-radius: 2px;
|
|
width: 85px;
|
|
height: 60px;
|
|
display: none;
|
|
position: relative;
|
|
cursor: pointer;
|
|
img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.label {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 2px 3px;
|
|
background-color: #00000059;
|
|
color: #fff;
|
|
border-radius: 2px 0 0 2px / 2px 0px 0px 2px;
|
|
}
|
|
&:hover {
|
|
border: 1px solid #3a7098;
|
|
.label {
|
|
background-color: #005293;
|
|
}
|
|
}
|
|
}
|
|
.switcher-item:not(:first-child) {
|
|
margin-left: 4px;
|
|
}
|
|
.active {
|
|
display: block;
|
|
border: 1px solid #3a7098;
|
|
.label {
|
|
background-color: #005293;
|
|
}
|
|
}
|
|
&:hover {
|
|
.switcher-item {
|
|
display: block;
|
|
}
|
|
}
|
|
.nineSectionsImg {
|
|
position: absolute;
|
|
right: 56px;
|
|
bottom: 92px;
|
|
border: 1px solid grey;
|
|
pointer-events: none;
|
|
img {
|
|
max-width: 100px;
|
|
width: 100px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|