美化界面

wujingjing

2025-01-17 fca23e806bb6d4d7c6bdc4b318d8ea559ae1d391

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

@@ -1,5 +1,5 @@
<template>
   <div class="relative">
   <div class="relative bg-white">
      <div ref="containerRef" class="h-full"></div>
      <div ref="infoWindowRef" v-show="infoWindowIsShow">
         <div
@@ -34,7 +34,7 @@
            </div>
         </div>
      </div>
      <LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-10 z-10" />
      <LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-3 z-10" />
   </div>
</template>

@@ -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 ?? [];
});
@@ -71,7 +83,8 @@
};
const showInfoWindow = (overlay: Overlay) => {
   const position = overlay.getPosition();
   const row = overlay.get('extData');
   const row = overlay.get('extData')?.value;
   if (!row) return;
   lastOverlay && setMarkerIcon(lastOverlay, equipPic);
   infoWindowIsShow.value = true;
   infoWindowOverlay.setPosition(position);
@@ -90,7 +103,6 @@
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];
@@ -98,8 +110,10 @@
      return {
         position: [x, y],
         // textColor: item.color,
         extData: item,
         title: item.title,
         extData: {
            value: item,
            recordSetTable: props.data,
         },
      };
   });
   olMap.value.addMarkerLayer(dataList, {
@@ -109,7 +123,7 @@
            size: 30,
            selectUrl: equipSelectPic,
         },
         click(e, label, item, position) {
         click(e, label, extData, position) {
            showInfoWindow(label);
         },
      },
@@ -121,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();
});