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