地图图标展示

wujingjing

2025-02-27 f996c7437b0a7d4e7bafeb7c71b7c86b7170c8bd

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

@@ -1,175 +1,148 @@
<template>
   <div class="h-[60vh] relative">
      <div ref="containerRef" class="h-full"></div>
      <!-- <div v-if="bottomBarIsShow" class="absolute w-full bottom-0 bg-white border-gray-300 border border-solid">
         <div
            class="w-28 h-5 absolute left-1/2 -translate-x-1/2 -translate-y-[100%] cursor-pointer bg-[#4974f3] rounded-t-lg flex-center"
            @click="toggleShowChart"
         >
            <div
               class="ywifont -rotate-90 text-white !text-[13px]"
               :class="{ 'ywicon-zuoyoujiantou': chartIsShow, 'ywicon-zuoyoujiantou1': !chartIsShow }"
            ></div>
         </div>
      </div> -->
   <div class="h-[60vh] relative" ref="mapContainerRef">
      <!-- 原始地图容器 -->
      <BasicMap
         ref="mapRef"
         :isFullscreen="isFullscreen"
         class="h-full"
         :data="data"
         @markerClick="markerClick"
         @closeInfoWindow="closeInfoWindow"
         @toggleFullScreen="toggleFullScreen"
      />

      <!-- 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">
               <div ref="fullscreenContainer" class="h-full"></div>

               <div class="absolute bottom-0 w-full">
                  <EquipCurve
                     v-model:isShow="chartDlgIsShow"
                     class="opacity-90"
                     :data="equipCurveMapRow"
                     :quotaChartCol="data?.quota_chart?.col"
                     height="15rem"
                     :tableHeight="240"
                  />
               </div>
               <SmallChat class="absolute bottom-0 right-[50%]" :olMap="olMap" />
            </div>
         </Transition>
      </Teleport>
   </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import 'ol/ol.css';
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 equipPic from './img/equip.svg';
import equipSelectPic from './img/equip-select.svg';

import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
import { GaoDeMap } from '/@/model/map/GaoDeMap';

let gaoDeMap = new GaoDeMap();
const containerRef = ref<HTMLDivElement>(null);
const isRenderFullscreen = ref(false);
const isFullscreen = ref(false);
const props = defineProps(['data']);

const mapRef = useCompRef(BasicMap);
const fullscreenContainer = ref<HTMLElement>();
const emit = defineEmits(['equipClick', 'closeInfoWindow']);
const createInfoWindow = () => {
   // title
   // <div class="title flex-center bg-[#ca0dab] text-white py-0.5 mb-2 w-full over-ellipsis">
   //          罗汉鱼
   //       </div>
   const dom = `<div class="rounded-md text-nowrap flex flex-col  w-fit border border-solid border-blue-600 relative" style="padding: 12px">
         <span class="guanbi absolute ywifont ywicon-guanbi right-[4px] top-[-2px] font-bold text-[#c3c3c3] cursor-pointer" ></span>
			
         <div class="space-x-4 flex w-full">
            <div class="flex flex-col w-1/2 key-list">
					
            </div>

            <div class="flex flex-col w-1/2 value-list">
					
            </div>
         </div>
      </div>`;

   return dom;
const olMap = computed(() => mapRef.value?.olMap);
const markerClick = (row) => {
   if (isFullscreen.value) {
      showCurve(row);
   } else {
      emit('equipClick', row);
   }
};

const updateInfoWindow = (item) => {
   const cellHeight = '20px';
   const keyListDom = infoWindow.dom.querySelector('.key-list');
   const valueListDom = infoWindow.dom.querySelector('.value-list');

   const colsArray = props.data.cols ?? [];
   const keyItemHtml = colsArray
      .map((col) => {
         return `<span class="flex-items-center justify-start text-gray-600" style="height:${cellHeight}">${col.title ?? ''}</span>`;
      })
      .join('');

   const valueItemHtml = colsArray
      .map((col, index) => {
         return `<span class="flex-items-center justify-end text-black" style="height:${cellHeight}">${item[index] ?? ''}</span>`;
      })
      .join('');

   keyListDom.innerHTML = keyItemHtml;
   valueListDom.innerHTML = valueItemHtml;
};
let curMarkerLabel: AMap.LabelMarker;
const addMarkerLayer = () => {
   const map = props.data.map;
   if (map.pos_x == null && map.pos_y == null) return;

   const dataList = (props.data?.values ?? []).map((item) => {
      const x = item[map.pos_x];
      const y = item[map.pos_y];

      return {
         position: [x, y],
         // textColor: item.color,
         extData: item,
         title: item.title,
      };
   });
   gaoDeMap.addMarkerLayer(dataList, {
      markerOpt: {
         icon: {
            url: equipPic,
            size: 30,
            selectUrl: equipSelectPic,
         },
         click(e, label) {
            // if (!bottomBarIsShow.value) {
            //    bottomBarIsShow.value = true;
            // }
            // if (!chartIsShow.value) {
            //    chartIsShow.value = true;
            // }

            curMarkerLabel && curMarkerLabel !== label && restoreLabel();
            curMarkerLabel = label;
            infoWindow.open(gaoDeMap.map, label.getPosition() as any);
            const extData = label.getExtData();
            emit('equipClick', extData);
            updateInfoWindow(extData);
         },
      },
      layerOpt: {
         // allowCollision:false
      },
   });
};

const bottomBarIsShow = ref(false);
const chartIsShow = ref(true);
const toggleShowChart = () => {
   chartIsShow.value = !chartIsShow.value;
};

let infoWindow: AMap.InfoWindow;
const restoreLabel = () => {
   // 关闭恢复图片
   curMarkerLabel?.setIcon({
      image: equipPic,
   });
};
onMounted(async () => {
   await gaoDeMap.init({
      container: containerRef.value,
      aMapOption: {
         resizeEnable: true,
      },
   });
   // const southWest: GaoDePosition = [props.data.minx, props.data.miny];
   // const northEast: GaoDePosition = [props.data.maxx, props.data.maxy];
   // gaoDeMap.zoomToRect(southWest, northEast);
   gaoDeMap.applyBasicPlugins();

   addMarkerLayer();
   gaoDeMap.map.setFitView();

   infoWindow = new AMap.InfoWindow({
      content: createInfoWindow(),
      // offset: [3, -34],
      anchor: 'top-left',
      closeWhenClickMap: true,
   });
   (infoWindow as any).on('close', (...a) => {
      restoreLabel();
      curMarkerLabel = null;

const closeInfoWindow = () => {
   if (isFullscreen.value) {
      closeChartDlg();
   } else {
      emit('closeInfoWindow');
   });
   }
};
const mapContainerRef = ref<HTMLDivElement>(null);

   // 自带关闭去掉，自带关闭监听 close 会多次触发 close 事件
   const closeBtnDom = infoWindow.dom.querySelector('.amap-info-close');
   closeBtnDom.remove();
   const myCloseBtn = infoWindow.dom.querySelector('.guanbi');
   myCloseBtn.addEventListener('click', () => {
      infoWindow.close();
   });
	
// 切换全屏
const toggleFullScreen = async () => {
   closeInfoWindow();
   isFullscreen.value = !isFullscreen.value;
   await nextTick();
   if (isFullscreen.value) {
      if (!isRenderFullscreen.value) {
         isRenderFullscreen.value = true;
         await nextTick();
      }
      // 将地图组件移动到全屏容器
      const mapEl = mapRef.value.$el;
      fullscreenContainer.value.appendChild(mapEl);
      // 更新地图大小
      olMap.value?.updateSize();
      closeInfoWindow();
   } else {
      // 将地图组件移回原位置
      const mapEl = mapRef.value.$el;
      mapContainerRef.value.appendChild(mapEl);
      // 更新地图大小
      olMap.value?.updateSize();
   }
};

//#region ====================== 设备曲线 ======================
const chartDlgIsShow = ref(false);
const equipCurveMapRow = ref(null);
const showCurve = (row) => {
   equipCurveMapRow.value = row;
   chartDlgIsShow.value = true;
};

const closeChartDlg = () => {
   chartDlgIsShow.value = false;
   equipCurveMapRow.value = null;
};
//#endregion

// 添加 ESC 键监听函数
const handleEscKey = (event: KeyboardEvent) => {
   if (event.key === 'Escape' && isFullscreen.value) {
      toggleFullScreen();
   }
};

onMounted(async () => {
   // 添加 ESC 键监听
   document.addEventListener('keydown', handleEscKey);
   // toggleFullScreen();
});

onDeactivated(async () => {
   if (isFullscreen.value) {
      await toggleFullScreen();
   }
});

// 在组件卸载时移除监听
onUnmounted(() => {
   // 移除 ESC 键监听
   document.removeEventListener('keydown', handleEscKey);
});
</script>
<style scoped lang="scss">
:deep(.amap-info-content) {
   padding: 0;
}

// 全屏过渡动画
.fullscreen-enter-active,
.fullscreen-leave-active {
   transition: all 0.3s ease;
}

.fullscreen-enter-from,
.fullscreen-leave-to {
   opacity: 0;
   transform: scale(0.95);
}
</style>