地图图表

wujingjing

2024-07-23 5c8a59c4ed5c5f24f93fa10ada21f3501fea220f

 src/components/chat/chatComponents/mapCom/MapCom.vue

@@ -1,20 +1,69 @@
<template>
   <div ref="containerRef" class="h-[70vh]"></div>
   <div class="h-[70vh] 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="ywicon -rotate-90 text-white !text-[13px]"
               :class="{ 'icon-zuoyoujiantou': chartIsShow, 'icon-zuoyoujiantou1': !chartIsShow }"
            ></div>
         </div>
         <RecordSet v-if="chartIsShow" :data="CHART_DATA" class="h-[23vh] mt-2" />
      </div>
   </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { chatComProps } from '../common';
import RecordSet from '../summaryCom/components/recordSet/RecordSet.vue';
import { CHART_DATA } from './TestData';
import monitorPointPic from './img/monitor-point.svg';
import type { MapData } from './types';
import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
import { GaoDeMap } from '/@/model/map/GaoDeMap';
import monitorPointPic from './img/monitor-point.svg';

let gaoDeMap = new GaoDeMap();
const containerRef = ref<HTMLDivElement>(null);
const props = defineProps(chatComProps) as {
   data: MapData;
};
const createInfoWindow = () => {
   const dom = `<div class="bg-white p-1 flex flex-col border-blue-500 border-solid border">
         <div class="pointer-title bg-[#ca0dab] flex-center py-1 text-white px-5">
				
         </div>
		
      </div>`;

   // const dom = `<div class="w-32 bg-white p-1 flex flex-col border-blue-500 border-solid border">
   //    <div class="bg-[#ca0dab] flex-center py-1 text-white">
   //       水月五
   //    </div>
   //    <div class="flex flex-col mt-2">
   //       <div class="flex w-full text-blue-800">
   //          <div class="overflow-hidden text-nowrap overflow-ellipsis self-end flex-auto text-right">
   //             0.72332
   //          </div>
   //          <div class="flex-0 ml-4">
   //             m
   //          </div>

   //       </div>

   //    </div>
   // </div>`;
   return dom;
};

const updateInfoWindow = (title: string) => {
   const pointerTitle = infoWindow.dom.querySelector('.pointer-title');
   pointerTitle.innerHTML = title;
};

const addMarkerLayer = () => {
   const dataList = (props.data?.values ?? []).map<LabelMarkerData>((item) => ({
      position: [item.posx, item.posy],
@@ -28,21 +77,53 @@
            url: monitorPointPic,
            size: 30,
         },
         click(e, label) {
            if (!bottomBarIsShow.value) {
               bottomBarIsShow.value = true;
            }
            if (!chartIsShow.value) {
               chartIsShow.value = true;
            }
            infoWindow.open(gaoDeMap.map, label.getPosition() as any);
            const extData = label.getExtData();
            updateInfoWindow(extData.title);

         },
      },
      layerOpt: {
         // allowCollision:false
      },
   });
};
const bottomBarIsShow = ref(false);
const chartIsShow = ref(true);
const toggleShowChart = () => {
   chartIsShow.value = !chartIsShow.value;
};

let infoWindow: AMap.InfoWindow;

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();
   infoWindow = new AMap.InfoWindow({
      content: createInfoWindow(),
      offset: new AMap.Pixel(0, -18),
      closeWhenClickMap: true,
   });
});
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
:deep(.amap-info-content) {
   padding: 0;
}
</style>