feat:图层管理调整

shuishen

2026-02-25 4b37c1cb3ed6bc9659a347c4d6445b23cd6187b5

feat:图层管理调整

 applications/drone-command/src/components/map-container/device-map-container.vue

@@ -10,28 +10,30 @@
                <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>

@@ -1524,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>