尝试合并配置

wujingjing

2025-01-17 4e04b16f7bf497502508101c45ef6ff0209b13e2

尝试合并配置

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue

@@ -46,11 +46,23 @@
import equipSelectPic from './img/equip-select.svg';
import equipPic from './img/equip.svg';
import LayerControl from './LayerControl.vue';
import { OLMap } from '/@/model/map/OLMap';
import { GaoDeSourceType, OLMap } from '/@/model/map/OLMap';

const props = defineProps<{
    data: any;
}>();
const props = withDefaults(
    defineProps<{
        data: any;
        config?: {
            sourceType: GaoDeSourceType;
            markerIsVisible: boolean;
        };
    }>(),
    {
        config: () => ({
            sourceType: GaoDeSourceType.Vector,
            markerIsVisible: true,
        }),
    }
);
const colsArray = computed(() => {
    return props.data.cols ?? [];
});
@@ -72,7 +84,7 @@
const showInfoWindow = (overlay: Overlay) => {
    const position = overlay.getPosition();
    const row = overlay.get('extData')?.value;
    if(!row) return;
    if (!row) return;
    lastOverlay && setMarkerIcon(lastOverlay, equipPic);
    infoWindowIsShow.value = true;
    infoWindowOverlay.setPosition(position);
@@ -99,8 +111,8 @@
            position: [x, y],
            // textColor: item.color,
            extData: {
                value:item,
                recordSetTable:props.data
                value: item,
                recordSetTable: props.data,
            },
        };
    });
@@ -123,12 +135,18 @@
const initMap = () => {
    olMap.value = new OLMap({
        container: containerRef.value,
        sourceType: props.config?.sourceType,
        markerIsVisible: props.config?.markerIsVisible,
    });
    addMarkerLayer();
    infoWindowOverlay = olMap.value.createEleOverlay(infoWindowRef.value);
    olMap.value.map.addOverlay(infoWindowOverlay);
};

defineExpose({
    olMap: olMap,
});

onMounted(() => {
    initMap();
});

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue

@@ -76,11 +76,10 @@
<script setup lang="ts">
import { Close } from '@element-plus/icons-vue';
import { ElTree } from 'element-plus';
import type Overlay from 'ol/Overlay';
import { onMounted, ref, watch } from 'vue';
import { useDrag } from '/@/hooks/useDrag';
import type { GaoDeSourceType, OLMap } from '/@/model/map/OLMap';
import { gaoDeSourceTypeMap, MARKER_OVERLAY_CLASS_NAME, OverlayType } from '/@/model/map/OLMap';
import { gaoDeSourceTypeMap, OverlayType } from '/@/model/map/OLMap';
import { sleep } from '/@/utils/util';
const searchText = ref('');
const activeTab = ref('components');
@@ -110,7 +109,7 @@
    {
        id: ROOT_OVERLAY_TYPE.Marker,
        label: '设备',
        checked: props.olMap.overlayIsVisible.value,
        checked: props.olMap.markerIsVisible.value,
    },
]);
const initTreeChecked = () => {

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue

@@ -1,7 +1,14 @@
<template>
    <div class="h-[60vh] relative">
        <!-- 原始地图容器 -->
        <BasicMap v-show="!isFullscreen" class="h-full" :data="data" @markerClick="markerClick" @closeInfoWindow="closeInfoWindow" />
        <BasicMap
            ref="normalMapRef"
            v-show="!isFullscreen"
            class="h-full"
            :data="data"
            @markerClick="markerClick"
            @closeInfoWindow="closeInfoWindow"
        />
        <!-- 全屏按钮 -->
        <div class="absolute right-2 top-2 cursor-pointer" @click="toggleFullScreen">
            <el-tooltip content="全屏展开" placement="top">
@@ -13,7 +20,7 @@
        <Teleport to=".layout-parent">
            <Transition name="fullscreen">
                <div v-if="isRenderFullscreen" v-show="isFullscreen" class="absolute inset-0 z-50 w-full h-full">
                    <BasicMap class="h-full" :data="data" @markerClick="markerClick" @closeInfoWindow="closeInfoWindow" />
                    <BasicMap ref="fullScreenMapRef" :config="fullScreenMapConfig" class="h-full" :data="data" @markerClick="markerClick" @closeInfoWindow="closeInfoWindow" />
                    <div class="absolute right-2 top-2 cursor-pointer" @click="toggleFullScreen">
                        <el-tooltip content="退出全屏（Esc）" placement="top">
                            <div class="ywifont text-[20px] text-black rounded-lg ywicon-tuichuquanping"></div>
@@ -40,11 +47,14 @@
import { nextTick, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import EquipCurve from '../components/EquipCurve.vue';
import BasicMap from './BasicMap.vue';
import { useCompRef } from '/@/utils/types';
import { GaoDeSourceType } from '/@/model/map/OLMap';
const isRenderFullscreen = ref(false);

const isFullscreen = ref(false);
const props = defineProps(['data']);

const normalMapRef = useCompRef(BasicMap);
const fullScreenMapRef = useCompRef(BasicMap);
const emit = defineEmits(['equipClick', 'closeInfoWindow']);

const markerClick = (row) => {
@@ -62,18 +72,28 @@
    }
};


const fullScreenMapConfig = ref({
    sourceType: GaoDeSourceType.Vector,
    markerIsVisible: true,
});
// 切换全屏
const toggleFullScreen = async () => {
    isFullscreen.value = !isFullscreen.value;

    await nextTick();
    if (isFullscreen.value) {
        const config = normalMapRef.value.olMap.getConfig();
        if (!isRenderFullscreen.value) {
            fullScreenMapConfig.value = config;
            isRenderFullscreen.value = true;
        } else {
            // fullScreenMapRef.value.olMap.setConfig(config);
        }
        closeInfoWindow();
    } else {
        // olMap.map.addOverlay(infoWindowOverlay);
        const config = fullScreenMapRef.value.olMap.getConfig();
        // normalMapRef.value.olMap.setConfig(config);
    }
};


 src/model/map/OLMap.ts

@@ -46,19 +46,23 @@
    };
    return urlMap[type];
};
type MapConfig = {
    sourceType: GaoDeSourceType;
    markerIsVisible: boolean;
};

type OLEventType = 'blackClick';
type OLMapOptions = {
    container: HTMLDivElement;

    view?: ViewOptions;
};
} & MapConfig;
export class OLMap {
    map: OpenLayerMap;
    source: XYZ;
    private eventMap: Map<OLEventType, Function[]>;
    activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector);
    overlayIsVisible: Ref<boolean> = ref(true);
    markerIsVisible: Ref<boolean> = ref(true);
    private emit(eventName: OLEventType, ...args: any[]) {
        const handlers = this.eventMap?.get(eventName);
        if (handlers) {
@@ -89,11 +93,13 @@
    }

    constructor(options: OLMapOptions) {
        const { container, view } = defaultsDeep(options, {
        const { container, view, sourceType, markerIsVisible } = defaultsDeep(options, {
            view: {
                center: [13247019.404399557, 4721671.572580107],
                zoom: 8,
            },
            sourceType: GaoDeSourceType.Vector,
            markerIsVisible: true,
        } as OLMapOptions) as OLMapOptions;
        this.source = new XYZ({
            crossOrigin: 'anonymous',
@@ -112,6 +118,8 @@
            layers: [layer], // 添加图层
            view: new View(view),
        });
        this.activeSourceType.value = sourceType;
        this.markerIsVisible.value = markerIsVisible;
        this.setSourceUrl(this.activeSourceType.value);
        this.listenMapClick();
        this.addBasicControl();
@@ -146,7 +154,7 @@
            stopEvent: false,
            className: 'z-[999]',
        });
        eleOverlay.setVisible(this.overlayIsVisible.value);
        eleOverlay.setVisible(this.markerIsVisible.value);

        return eleOverlay;
    }
@@ -232,7 +240,21 @@
                }
            }
        });
        this.overlayIsVisible.value = visible;
        this.markerIsVisible.value = visible;
    }

    getConfig(): MapConfig {
        return {
            sourceType: this.activeSourceType.value,
            markerIsVisible: this.markerIsVisible.value,
        };
    }

    setConfig(config: MapConfig) {
        this.activeSourceType.value = config.sourceType;
        this.markerIsVisible.value = config.markerIsVisible;
        this.setSourceUrl(this.activeSourceType.value);
        this.toggleMarkerOverlayVisible(this.markerIsVisible.value);
    }

    private addBasicControl() {