地图功能调整--资源面板增加图例

src/store/layout.js

@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
 
 const floatPanelsConflict = {
-	uav: ['fcky', 'cube', 'kysg', 'tsjs_gis'],
-	kysg: ['uav', 'tsjs_gis'],
+	uav: ['fcky', 'cube', 'kysg', 'tsjs_gis', 'layers_legend'],
+	kysg: ['uav', 'tsjs_gis', 'layers_legend'],
 	fcky: ['uav', 'cube'],
 	cube: ['uav', 'fcky'],
-	tsjs_gis: ['uav', 'kysg'],
+	tsjs_gis: ['uav', 'kysg', 'layers_legend'],
+	layers_legend: ['kysg', 'uav', 'tsjs_gis'],
 }
 
 let lastAsideCollapse = {}
@@ -26,6 +27,7 @@ const useLayoutStore = defineStore('layout', {
 			fcky: false, // 分层空域
 			cube: false, // 网格点查询
 			tsjs_gis: false, // gis态势监视，按钮面板
+			layers_legend: false, // 空域图层的图例
 		},
 		uavMonitorOn: false, // 是否在ue场景中打开态势监视
 		toolsActive: {}, // 工具栏的激活状态

src/views/home/cpns/PanelSjwg.vue

@@ -63,6 +63,18 @@
 				</template>
 			</div>
 		</Transition>
+
+		<Transition name="emerge-left">
+			<div class="feature-legend" v-if="layoutStore.floatPanels.layers_legend">
+				<div class="title-sub">图例</div>
+				<ul>
+					<li v-for="item in featureLists">
+						<i :style="{ background: item.color }"></i>
+						<span>{{ item.label }}</span>
+					</li>
+				</ul>
+			</div>
+		</Transition>
 	</div>
 </template>
 
@@ -85,8 +97,18 @@ let shifeiStatus = false
 
 onBeforeMount(() => {
 	getLists()
+	addAreaColors()
 })
 
+function addAreaColors() {
+	featureLists.value.forEach((i) => {
+		if (!i.color) {
+			i.color = airSpaceTypes.find((t) => t.label === i.label).color
+		}
+	})
+	layoutStore.toggleFloatPanel('layers_legend', true)
+}
+
 function showWarning(message) {
 	ElMessage({ offset: 90, type: 'warning', message })
 }
@@ -208,8 +230,8 @@ const featureLists = ref([
 	{ label: '净空区', type: 'area', show: false, check: false, icon: 'jkqu', children: [] },
 	{ label: '适飞区', type: 'area', show: false, check: false, icon: 'sfqu', children: [] },
 	{ label: '已批复空域', type: 'area', show: false, check: false, icon: 'ypfkyu', children: [] },
-	{ label: '航线', type: 'route', show: false, check: false, icon: 'hxian', children: [] },
-	{ label: '起降场', type: 'plot', show: false, check: false, icon: 'qjchang', children: [] },
+	{ label: '航线', type: 'route', show: false, check: false, icon: 'hxian', children: [], color: '#ffff00' },
+	{ label: '起降场', type: 'plot', show: false, check: false, icon: 'qjchang', children: [], color: '#45dcb5' },
 ])
 
 let resources
@@ -269,10 +291,10 @@ function handleCheck(item, type) {
 			color = hexToRgb(airSpaceTypes.find((i) => i.value === item.spaceType).color, 0.5)
 			break
 		case 'plot':
-			color = [69, 220, 181, 0.7]
+			color = hexToRgb(featureLists.value.find((i) => i.type === 'plot').color, 0.7)
 			break
 		case 'route':
-			color = [255, 255, 0, 0.5]
+			color = hexToRgb(featureLists.value.find((i) => i.type === 'route').color, 0.5)
 	}
 	const data = [
 		{
@@ -415,8 +437,9 @@ function handleRestoreChecked() {
 }
 
 onBeforeUnmount(() => {
-	// clearAllFeatures()
 	handleStoreChecked()
+	layoutStore.toggleFloatPanel('layers_legend', false)
+	// clearAllFeatures()
 })
 
 const vCollapse = {
@@ -585,4 +608,37 @@ const vCollapse = {
 	margin: 5px 0 10px;
 	color: #999;
 }
+
+.feature-legend {
+	position: absolute;
+	bottom: var(--panel-gap);
+	left: calc(var(--panel-left) - var(--panel-gap));
+	width: 150px;
+	padding: 10px 15px 15px;
+	background-color: rgba(0, 17, 50, 0.5);
+	border: 1px solid #055f8d;
+	border-radius: 5px;
+
+	.title-sub {
+		margin-left: -5px;
+	}
+
+	ul {
+		margin-top: 10px;
+		li {
+			display: flex;
+			align-items: center;
+			&:not(:last-child) {
+				margin-bottom: 5px;
+			}
+			i {
+				display: block;
+				width: 10px;
+				height: 10px;
+				margin-right: 10px;
+				opacity: 0.6;
+			}
+		}
+	}
+}
 </style>