164 lines
4.0 KiB
Vue
164 lines
4.0 KiB
Vue
<template>
|
||
<div
|
||
class="baselayer-switcher"
|
||
:style="{ right: drawerOpen ? '480px' : '12px' }"
|
||
v-if="uiStore.mapType == '2D'"
|
||
>
|
||
<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 { useMapStore } from '@/store/modules/map';
|
||
import { layerConfig2Flat } from '@/components/gis/gisUtils';
|
||
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 mapStore = useMapStore();
|
||
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);
|
||
|
||
/**
|
||
* 判断图层管理中的基础底图（customBaseLayer）是否被选中
|
||
*/
|
||
const isCustomBaseLayerChecked = (): boolean => {
|
||
const layerConfig = layerConfig2Flat(mapStore.layerData);
|
||
const customBaseLayer = layerConfig.find(
|
||
(item: any) => item.key === 'customBaseLayer'
|
||
);
|
||
|
||
if (!customBaseLayer) {
|
||
return false;
|
||
}
|
||
|
||
// 判断是否被选中：直接选中或子节点被选中
|
||
const checkedKeys = mapStore.checkedLayerKeys;
|
||
if (checkedKeys.includes('customBaseLayer')) {
|
||
return true;
|
||
}
|
||
|
||
// 检查子节点
|
||
if (customBaseLayer.children && customBaseLayer.children.length > 0) {
|
||
return customBaseLayer.children.some((child: any) =>
|
||
checkedKeys.includes(child.key)
|
||
);
|
||
}
|
||
|
||
return false;
|
||
};
|
||
|
||
const handleSwitch = (key: string) => {
|
||
// 判断图层管理中的基础底图是否被选中
|
||
const customBaseLayerChecked = isCustomBaseLayerChecked();
|
||
|
||
activeKey.value = key;
|
||
props.map.baseLayerSwitcher(key, customBaseLayerChecked ? 1 : 0);
|
||
};
|
||
</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>
|