优化图例显示
This commit is contained in:
wzy-warehouse
@@ -2,22 +2,31 @@
|
||||
<template>
|
||||
<div
|
||||
class="legend-container"
|
||||
v-show="useStatusStore().uiComponents.leftLegend.show"
|
||||
v-show="
|
||||
useStatusStore().uiComponents.leftLegend.show &&
|
||||
Object.keys(useLeftLegendStore().legendListInfo).length > 0
|
||||
"
|
||||
>
|
||||
<div class="legend-title">
|
||||
{{ useLeftLegendStore().legendListInfo.title }}
|
||||
</div>
|
||||
<div
|
||||
class="legend-item"
|
||||
v-for="(item, index) in useLeftLegendStore().legendListInfo.list"
|
||||
:key="index"
|
||||
class="legend-box"
|
||||
v-for="key in Object.keys(useLeftLegendStore().legendListInfo)"
|
||||
:key="key"
|
||||
>
|
||||
<div class="legend-title">
|
||||
{{ useLeftLegendStore().legendListInfo[key].title }}
|
||||
</div>
|
||||
<div
|
||||
class="legend-color"
|
||||
:style="{ 'background-color': `${item.color}` }"
|
||||
></div>
|
||||
<div class="legend-text">
|
||||
<span class="legend-text-title">{{ item.label }}</span>
|
||||
class="legend-item"
|
||||
v-for="(item, index) in useLeftLegendStore().legendListInfo[key].list"
|
||||
:key="index"
|
||||
>
|
||||
<div
|
||||
class="legend-color"
|
||||
:style="{ 'background-color': `${item.color}` }"
|
||||
></div>
|
||||
<div class="legend-text">
|
||||
<span class="legend-text-title">{{ item.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -35,14 +44,10 @@
|
||||
left: 20px;
|
||||
z-index: 1000;
|
||||
padding: 6px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 15px;
|
||||
border-radius: 2px;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 240px;
|
||||
gap: 30px;
|
||||
min-width: 240px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
color: white;
|
||||
@@ -51,6 +56,10 @@
|
||||
border: 1px solid rgb(0, 225, 255);
|
||||
}
|
||||
|
||||
.legend-box:not(:last-child) {
|
||||
border-right: 1px solid rgb(0, 225, 255);
|
||||
}
|
||||
|
||||
.legend-title {
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
|
||||
@@ -61,48 +61,47 @@ export const useLayerControl = () => {
|
||||
useStatusStore().poiLayers.showPopulationGrid.loading = true;
|
||||
|
||||
if (useStatusStore().poiLayers.showPopulationGrid.show) {
|
||||
// 显示图例
|
||||
useStatusStore().uiComponents.leftLegend.loading = true;
|
||||
useStatusStore().uiComponents.leftLegend.show = true;
|
||||
|
||||
useLeftLegendStore().legendListInfo.title = '人口密度图例';
|
||||
useLeftLegendStore().legendListInfo.list = [
|
||||
{
|
||||
label: 'Min-0 < 100',
|
||||
color: '#b1fe02',
|
||||
},
|
||||
{
|
||||
label: '100 ≤ X < 500',
|
||||
color: '#6bf700',
|
||||
},
|
||||
{
|
||||
label: '500 ≤ X < 1000',
|
||||
color: '#fcf600',
|
||||
},
|
||||
{
|
||||
label: '1000 ≤ X < 2000',
|
||||
color: '#fecb02',
|
||||
},
|
||||
{
|
||||
label: '2000 ≤ X < 4000',
|
||||
color: '#fc9e00',
|
||||
},
|
||||
{
|
||||
label: '4000 ≤ X < 8000',
|
||||
color: '#fe7004',
|
||||
},
|
||||
{
|
||||
label: '8000 ≤ X < 10000',
|
||||
color: '#fb3f02',
|
||||
},
|
||||
{
|
||||
label: '10000 ≤ X < Max',
|
||||
color: '#ff0000',
|
||||
},
|
||||
];
|
||||
// 添加图例
|
||||
useLeftLegendStore().legendListInfo.population = {
|
||||
title: '人口密度图例',
|
||||
list: [
|
||||
{
|
||||
label: 'Min-0 < 100',
|
||||
color: '#b1fe02',
|
||||
},
|
||||
{
|
||||
label: '100 ≤ X < 500',
|
||||
color: '#6bf700',
|
||||
},
|
||||
{
|
||||
label: '500 ≤ X < 1000',
|
||||
color: '#fcf600',
|
||||
},
|
||||
{
|
||||
label: '1000 ≤ X < 2000',
|
||||
color: '#fecb02',
|
||||
},
|
||||
{
|
||||
label: '2000 ≤ X < 4000',
|
||||
color: '#fc9e00',
|
||||
},
|
||||
{
|
||||
label: '4000 ≤ X < 8000',
|
||||
color: '#fe7004',
|
||||
},
|
||||
{
|
||||
label: '8000 ≤ X < 10000',
|
||||
color: '#fb3f02',
|
||||
},
|
||||
{
|
||||
label: '10000 ≤ X < Max',
|
||||
color: '#ff0000',
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
// 隐藏图例
|
||||
useStatusStore().uiComponents.leftLegend.show = false;
|
||||
delete useLeftLegendStore().legendListInfo.population;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -15,46 +15,46 @@ export const useRightHandle = () => {
|
||||
useStatusStore().weatherLayers.showRainfallGrid.loading = true;
|
||||
useStatusStore().weatherLayers.showRainfallGrid.show = true;
|
||||
|
||||
// 显示图例
|
||||
useStatusStore().uiComponents.leftLegend.loading = true;
|
||||
useStatusStore().uiComponents.leftLegend.show = true;
|
||||
useLeftLegendStore().legendListInfo.title = '降雨量图例';
|
||||
useLeftLegendStore().legendListInfo.list = [
|
||||
{
|
||||
label: '无雨/微雨; <0.1mm/12h',
|
||||
color: 'rgba(200,200,200,0)',
|
||||
},
|
||||
{
|
||||
label: '小雨；<5mm/12h',
|
||||
color: 'rgba(0,0,255,0.4)',
|
||||
},
|
||||
{
|
||||
label: '中雨； <15mm/12h',
|
||||
color: 'rgba(0,255,255,0.5)',
|
||||
},
|
||||
{
|
||||
label: '大雨； <30mm/12h',
|
||||
color: 'rgba(0,255,0,0.6)',
|
||||
},
|
||||
{
|
||||
label: '暴雨； <70mm/12h',
|
||||
color: 'rgba(255,255,0,0.7)',
|
||||
},
|
||||
{
|
||||
label: '大暴雨； <140mm/12h',
|
||||
color: 'rgba(255,165,0,0.8)',
|
||||
},
|
||||
{
|
||||
label: '特大暴雨； >140mm/12h',
|
||||
color: 'rgba(255,0,0,0.9)',
|
||||
},
|
||||
];
|
||||
// 添加图例
|
||||
useLeftLegendStore().legendListInfo.precipitation = {
|
||||
title: '降雨量图例',
|
||||
list: [
|
||||
{
|
||||
label: '无雨/微雨; <0.1mm/12h',
|
||||
color: 'rgba(200,200,200,0)',
|
||||
},
|
||||
{
|
||||
label: '小雨；<5mm/12h',
|
||||
color: 'rgba(0,0,255,0.4)',
|
||||
},
|
||||
{
|
||||
label: '中雨； <15mm/12h',
|
||||
color: 'rgba(0,255,255,0.5)',
|
||||
},
|
||||
{
|
||||
label: '大雨； <30mm/12h',
|
||||
color: 'rgba(0,255,0,0.6)',
|
||||
},
|
||||
{
|
||||
label: '暴雨； <70mm/12h',
|
||||
color: 'rgba(255,255,0,0.7)',
|
||||
},
|
||||
{
|
||||
label: '大暴雨； <140mm/12h',
|
||||
color: 'rgba(255,165,0,0.8)',
|
||||
},
|
||||
{
|
||||
label: '特大暴雨； >140mm/12h',
|
||||
color: 'rgba(255,0,0,0.9)',
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
// 关闭暴雨模拟：隐藏降雨栅格图层
|
||||
useStatusStore().weatherLayers.showRainfallGrid.show = false;
|
||||
|
||||
// 隐藏图例
|
||||
useStatusStore().uiComponents.leftLegend.show = false;
|
||||
// 删除图例
|
||||
delete useLeftLegendStore().legendListInfo.precipitation;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -5,12 +5,14 @@ import { ref, type Ref } from 'vue';
|
||||
* 左侧图例信息
|
||||
*/
|
||||
export const useLeftLegendStore = defineStore('leftLegend', () => {
|
||||
const legendListInfo: Ref<{
|
||||
title: string;
|
||||
list: { label: string; color: string }[];
|
||||
}> = ref({
|
||||
title: '',
|
||||
list: [],
|
||||
});
|
||||
const legendListInfo: Ref<
|
||||
Record<
|
||||
string,
|
||||
{
|
||||
title: string;
|
||||
list: { label: string; color: string }[];
|
||||
}
|
||||
>
|
||||
> = ref({});
|
||||
return { legendListInfo };
|
||||
});
|
||||
|
||||
@@ -29,8 +29,8 @@ export const useStatusStore = defineStore('status', () => {
|
||||
loading: true,
|
||||
},
|
||||
leftLegend: {
|
||||
show: false,
|
||||
loading: false,
|
||||
show: true,
|
||||
loading: true,
|
||||
},
|
||||
rightButton: {
|
||||
show: true,
|
||||
@@ -215,8 +215,8 @@ export const useStatusStore = defineStore('status', () => {
|
||||
loading: true,
|
||||
};
|
||||
uiComponents.leftLegend = {
|
||||
show: false,
|
||||
loading: false,
|
||||
show: true,
|
||||
loading: true,
|
||||
};
|
||||
uiComponents.rightButton = {
|
||||
show: true,
|
||||
|
||||
Reference in New Issue
Block a user