WI水务智能助理

wujingjing

2025-01-17 7fbce1ecd95b4e12ceda0a5b874ec8f3951625f7

 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,20 +34,35 @@
            </div>
         </div>
      </div>
      <LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-3 z-10" />
   </div>
</template>

<script setup lang="ts" name="BasicMap">
import type { Overlay } from 'ol';
import 'ol/ol.css';
import { computed, onMounted, ref } from 'vue';

import { computed, onMounted, ref, shallowRef } from 'vue';
import equipSelectPic from './img/equip-select.svg';
import equipPic from './img/equip.svg';
import { OLMap } from '/@/model/map/OLMap';
import LayerControl from './LayerControl.vue';
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 ?? [];
});
@@ -57,7 +72,7 @@
const infoWindowRef = ref<HTMLDivElement>(null);
const infoWindowIsShow = ref(false);
const infoWindowMapRow = ref(null);
let olMap: OLMap;
const olMap = shallowRef<OLMap>();
let infoWindowOverlay: Overlay;
let lastOverlay: Overlay;
const setMarkerIcon = (overlay: Overlay, icon: string) => {
@@ -68,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);
@@ -87,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];
@@ -95,18 +110,20 @@
      return {
         position: [x, y],
         // textColor: item.color,
         extData: item,
         title: item.title,
         extData: {
            value: item,
            recordSetTable: props.data,
         },
      };
   });
   olMap.addMarkerLayer(dataList, {
   olMap.value.addMarkerLayer(dataList, {
      markerOpt: {
         icon: {
            url: equipPic,
            size: 30,
            selectUrl: equipSelectPic,
         },
         click(e, label, item, position) {
         click(e, label, extData, position) {
            showInfoWindow(label);
         },
      },
@@ -116,16 +133,24 @@
   });
};
const initMap = () => {
   olMap = new OLMap({
   olMap.value = new OLMap({
      container: containerRef.value,
      sourceType: props.config?.sourceType,
      markerIsVisible: props.config?.markerIsVisible,
   });
   addMarkerLayer();
   infoWindowOverlay = olMap.createEleOverlay(infoWindowRef.value);
   olMap.map.addOverlay(infoWindowOverlay);
   infoWindowOverlay = olMap.value.createEleOverlay(infoWindowRef.value);
   olMap.value.map.addOverlay(infoWindowOverlay);
};

defineExpose({
   olMap: olMap,
});

onMounted(() => {
   initMap();
   // window.olMap = olMap.value;
   // window.map = olMap.value.map;
});
</script>
<style scoped lang="scss"></style>