From 4b37c1cb3ed6bc9659a347c4d6445b23cd6187b5 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 25 Feb 2026 16:02:50 +0800
Subject: [PATCH] feat:图层管理调整
---
applications/drone-command/src/components/map-container/device-map-container.vue | 71 +++++++++++++++++++++--------------
1 files changed, 43 insertions(+), 28 deletions(-)
diff --git a/applications/drone-command/src/components/map-container/device-map-container.vue b/applications/drone-command/src/components/map-container/device-map-container.vue
index cb4e5a2..a16f191 100644
--- a/applications/drone-command/src/components/map-container/device-map-container.vue
+++ b/applications/drone-command/src/components/map-container/device-map-container.vue
@@ -5,33 +5,35 @@
:show-admin-boundary="true" :zoom-to-boundary="true" :enable-stage-emit="true"
:cluster-height="CLUSTER_HEIGHT" :detail-height="DETAIL_HEIGHT" @ready="handleMapReady"
@stage-change="handleStageChange" />
- <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.leftCollapsed }">
+ <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.rightCollapsed }">
<div class="layer-control-wrap" ref="layerWrapRef">
<div class="layer-control" @click="toggleLayerPanel">
<img :src="layerControlIcon" alt="图层控制" />
</div>
- <div v-if="showLayerPanel" class="layer-panel">
- <div class="panel-title">底图切换</div>
- <div class="base-map-options">
- <div class="base-map-card" :class="{ active: baseLayerKey === 'base-standard' }"
- @click="handleBaseLayerSelect('base-standard')">
- <img class="base-map-thumb standard" :src="dzIcon" alt="">
- <div class="base-map-label">标准地图</div>
+ <transition name="layer-panel-slide">
+ <div v-if="showLayerPanel" class="layer-panel">
+ <div class="panel-title">底图切换</div>
+ <div class="base-map-options">
+ <div class="base-map-card" :class="{ active: baseLayerKey === 'base-standard' }"
+ @click="handleBaseLayerSelect('base-standard')">
+ <img class="base-map-thumb standard" :src="dzIcon" alt="">
+ <div class="base-map-label">标准地图</div>
+ </div>
+ <div class="base-map-card" :class="{ active: baseLayerKey === 'base-satellite' }"
+ @click="handleBaseLayerSelect('base-satellite')">
+ <img class="base-map-thumb satellite" :src="yxIcon" alt="">
+ <div class="base-map-label">卫星地图</div>
+ </div>
</div>
- <div class="base-map-card" :class="{ active: baseLayerKey === 'base-satellite' }"
- @click="handleBaseLayerSelect('base-satellite')">
- <img class="base-map-thumb satellite" :src="yxIcon" alt="">
- <div class="base-map-label">卫星地图</div>
- </div>
- </div>
- <div class="panel-title">图层管理</div>
- <div class="panel-content">
- <el-tree ref="layerTreeRef" class="command-tree map-layer-tree" :data="layerTree" show-checkbox
- default-expand-all node-key="key" :props="layerTreeProps"
- :default-checked-keys="treeCheckedKeys" @check="handleLayerCheck" />
+ <div class="panel-title">图层管理</div>
+ <div class="panel-content">
+ <el-tree ref="layerTreeRef" class="command-tree map-layer-tree" :data="layerTree" show-checkbox
+ default-expand-all node-key="key" :props="layerTreeProps"
+ :default-checked-keys="treeCheckedKeys" @check="handleLayerCheck" />
+ </div>
</div>
- </div>
+ </transition>
</div>
</div>
@@ -88,7 +90,7 @@
type: Array,
default: () => [],
},
- leftCollapsed: {
+ rightCollapsed: {
type: Boolean,
default: false,
},
@@ -1290,7 +1292,7 @@
)
watch(
- () => props.leftCollapsed,
+ () => props.rightCollapsed,
isCollapsed => {
if (isCollapsed) showLayerPanel.value = false
}
@@ -1415,14 +1417,14 @@
.layer-control-root {
position: absolute;
- left: 337px;
- bottom: 22px;
- z-index: 9;
+ right: 337px;
+ top: 95px;
+ z-index: 11;
transition: transform 0.3s ease-in-out;
pointer-events: none;
&.collapsed {
- transform: translateX(-317px);
+ transform: translateX(317px);
}
}
@@ -1449,12 +1451,13 @@
display: flex;
flex-direction: column;
position: absolute;
- left: 66px;
- bottom: 0;
+ right: 66px;
+ top: 0;
width: 160px;
max-height: 442px;
background: #191932;
border-radius: 8px 8px 8px 8px;
+ z-index: 99;
.panel-title {
padding: 0 16px;
@@ -1523,4 +1526,16 @@
}
}
}
+
+.layer-panel-slide-enter-active,
+.layer-panel-slide-leave-active {
+ transition: transform 0.24s ease, opacity 0.24s ease;
+ transform-origin: right center;
+}
+
+.layer-panel-slide-enter-from,
+.layer-panel-slide-leave-to {
+ transform: translateX(24px);
+ opacity: 0;
+}
</style>
--
Gitblit v1.9.3