From 4e04b16f7bf497502508101c45ef6ff0209b13e2 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期五, 17 一月 2025 11:07:39 +0800
Subject: [PATCH] 尝试合并配置
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 28 ++++++++++++--
src/model/map/OLMap.ts | 32 +++++++++++++--
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue | 5 +-
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue | 32 ++++++++++++---
4 files changed, 78 insertions(+), 19 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
index a84920b..321c5a7 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
+++ b/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();
});
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue
index 0167ede..1534fb5 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue
+++ b/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 = () => {
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
index 67799d2..a7d0384 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/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);
}
};
diff --git a/src/model/map/OLMap.ts b/src/model/map/OLMap.ts
index e6c4630..2385085 100644
--- a/src/model/map/OLMap.ts
+++ b/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() {
--
Gitblit v1.9.3