108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="baselayer-switcher">
|
||
|
|
<div
|
||
|
|
class="switcher-item"
|
||
|
|
v-for="item in data"
|
||
|
|
:key="item.name"
|
||
|
|
:class="{ active: item.name === activeLayer }"
|
||
|
|
@click="activeLayer = item.name"
|
||
|
|
>
|
||
|
|
<img :src="item.img" alt="" />
|
||
|
|
<div class="label">{{ item.name }}</div>
|
||
|
|
</div>
|
||
|
|
<div class="nineSectionsImg">
|
||
|
|
<img :src="nineSectionsImg" alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, watch, onMounted } from "vue";
|
||
|
|
import mapShiliangtu from "@/assets/images/map-shiliangtu.png";
|
||
|
|
import mapDixingtu from "@/assets/images/map-dixingtu.png";
|
||
|
|
import mapYingxiangtu from "@/assets/images/map-yingxiangtu.png";
|
||
|
|
import nineSectionsShiliang from "@/assets/images/nineSections-shiliang.png";
|
||
|
|
import nineSectionsDixing from "@/assets/images/nineSections-dixing.png";
|
||
|
|
import nineSectionsYingxiang from "@/assets/images/nineSections-yingxiang.png";
|
||
|
|
const data = ref([
|
||
|
|
{ name: "矢量", img: mapShiliangtu },
|
||
|
|
{ name: "地形", img: mapDixingtu },
|
||
|
|
{ name: "影像", img: mapYingxiangtu },
|
||
|
|
]);
|
||
|
|
const nineSectionsImg = ref(nineSectionsShiliang);
|
||
|
|
const nineSectionsData = ref([
|
||
|
|
{ name: "矢量", img: nineSectionsShiliang },
|
||
|
|
{ name: "地形", img: nineSectionsDixing },
|
||
|
|
{ name: "影像", img: nineSectionsYingxiang },
|
||
|
|
]);
|
||
|
|
const activeLayer = ref("矢量");
|
||
|
|
|
||
|
|
watch(activeLayer, (val) => {
|
||
|
|
nineSectionsImg.value =
|
||
|
|
nineSectionsData.value.find((item) => item.name === val)?.img || "";
|
||
|
|
});
|
||
|
|
</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>
|