gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化图例显示

Browse Source
This commit is contained in:
wzy-warehouse
2026-05-06 18:02:56 +08:00
parent c347bbea8b
commit 1636ad586d
5 changed files with 115 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/rain-earthquake/useLayerControl.ts
+39 -40
View File
@@ -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;
}
};
src/hooks/rain-earthquake/useRightHandle.ts
+36 -36
View File
@@ -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;
}
};