地图图标展示

wujingjing

2025-02-27 f996c7437b0a7d4e7bafeb7c71b7c86b7170c8bd

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

@@ -1,31 +1,22 @@
<template>
   <div class="h-[60vh] relative">
   <div class="h-[60vh] relative" ref="mapContainerRef">
      <!-- 原始地图容器 -->
      <BasicMap
         ref="normalMapRef"
         v-show="!isFullscreen"
         ref="mapRef"
         :isFullscreen="isFullscreen"
         class="h-full"
         :data="data"
         @markerClick="markerClick"
         @closeInfoWindow="closeInfoWindow"
         @toggleFullScreen="toggleFullScreen"
      />
      <!-- 全屏按钮 -->
      <div class="absolute right-2 top-2 cursor-pointer" @click="toggleFullScreen">
         <el-tooltip content="全屏展开" placement="top">
            <div class="ywifont !text-[20px] text-black rounded-lg ywicon-fullscreen"></div>
         </el-tooltip>
      </div>

      <!-- Teleport 全屏地图 -->
      <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 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>
                  </el-tooltip>
               </div>
               <div ref="fullscreenContainer" class="h-full"></div>

               <div class="absolute bottom-0 w-full">
                  <EquipCurve
                     v-model:isShow="chartDlgIsShow"
@@ -36,6 +27,7 @@
                     :tableHeight="240"
                  />
               </div>
               <SmallChat class="absolute bottom-0 right-[50%]" :olMap="olMap" />
            </div>
         </Transition>
      </Teleport>
@@ -44,19 +36,19 @@

<script setup lang="ts">
import 'ol/ol.css';
import { nextTick, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import { computed, nextTick, onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import EquipCurve from '../components/EquipCurve.vue';
import BasicMap from './BasicMap.vue';
import SmallChat from '/@/components/chat/smallChat/index.vue';
import { useCompRef } from '/@/utils/types';
import { GaoDeSourceType } from '/@/model/map/OLMap';
const isRenderFullscreen = ref(false);

const isRenderFullscreen = ref(false);
const isFullscreen = ref(false);
const props = defineProps(['data']);
const normalMapRef = useCompRef(BasicMap);
const fullScreenMapRef = useCompRef(BasicMap);
const mapRef = useCompRef(BasicMap);
const fullscreenContainer = ref<HTMLElement>();
const emit = defineEmits(['equipClick', 'closeInfoWindow']);

const olMap = computed(() => mapRef.value?.olMap);
const markerClick = (row) => {
   if (isFullscreen.value) {
      showCurve(row);
@@ -71,29 +63,30 @@
      emit('closeInfoWindow');
   }
};
const mapContainerRef = ref<HTMLDivElement>(null);


const fullScreenMapConfig = ref({
   sourceType: GaoDeSourceType.Vector,
   markerIsVisible: true,
});
// 切换全屏
const toggleFullScreen = async () => {
   closeInfoWindow();
   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);
         await nextTick();
      }
      // 将地图组件移动到全屏容器
      const mapEl = mapRef.value.$el;
      fullscreenContainer.value.appendChild(mapEl);
      // 更新地图大小
      olMap.value?.updateSize();
      closeInfoWindow();
   } else {
      const config = fullScreenMapRef.value.olMap.getConfig();
      // normalMapRef.value.olMap.setConfig(config);
      // 将地图组件移回原位置
      const mapEl = mapRef.value.$el;
      mapContainerRef.value.appendChild(mapEl);
      // 更新地图大小
      olMap.value?.updateSize();
   }
};

@@ -121,6 +114,7 @@
onMounted(async () => {
   // 添加 ESC 键监听
   document.addEventListener('keydown', handleEscKey);
   // toggleFullScreen();
});

onDeactivated(async () => {