对接地图指标

wujingjing

2024-11-28 340d40b4d4243c0f3bf82d40b8f570246e39119d

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

@@ -1,7 +1,7 @@
<template>
   <div class="h-[70vh] relative bg-red-200">
   <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 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"
@@ -11,34 +11,63 @@
               :class="{ 'ywicon-zuoyoujiantou': chartIsShow, 'ywicon-zuoyoujiantou1': !chartIsShow }"
            ></div>
         </div>
      </div>
      </div> -->
   </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import monitorPointPic from './img/monitor-point.svg';
import equipPic from './img/equip.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 props = defineProps(['data']);
const createInfoWindow = () => {
   const dom = `<div class="w-48 bg-white p-1 flex flex-col border-blue-500 border-solid border">
         <div class="bg-[#ca0dab] flex py-1 text-white px-5">
            <div class="pointer-title  text-nowrap overflow-hidden text-ellipsis mx-auto"></div>
         </div>

const emit = defineEmits(['equipClick'])
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 text-blue-600" style="padding: 12px">
			
         <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 updateInfoWindow = (title: string) => {
   const pointerTitle = infoWindow.dom.querySelector('.pointer-title');
   pointerTitle.innerHTML = title + '';
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" style="height:${cellHeight}">${col.title??''}</span>`;
      })
      .join('');

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

   keyListDom.innerHTML = keyItemHtml;
   valueListDom.innerHTML = valueItemHtml;
};

const addMarkerLayer = () => {
@@ -59,26 +88,26 @@
   gaoDeMap.addMarkerLayer(dataList, {
      markerOpt: {
         icon: {
            url: monitorPointPic,
            url: equipPic,
            size: 30,
         },
         click(e, label) {
            if (!bottomBarIsShow.value) {
               bottomBarIsShow.value = true;
            }
            if (!chartIsShow.value) {
               chartIsShow.value = true;
            }
            // 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[1]);
            emit('equipClick',extData);
            updateInfoWindow(extData);
         },
      },
      layerOpt: {
         // allowCollision:false
      },
   });

};

const bottomBarIsShow = ref(false);
@@ -100,12 +129,14 @@
   // 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],
      // offset: [3, -34],
      anchor: 'top-left',
      closeWhenClickMap: true,
   });
});