From a32fc7bdf0ae1fccecfee1228e7348b8f2c478a6 Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期三, 27 十一月 2024 10:59:07 +0800
Subject: [PATCH] 地图优化
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue | 52 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 41 insertions(+), 11 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
index a1e06e5..5cc45fe 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -1,5 +1,5 @@
<template>
- <div class="h-[70vh] relative bg-red-200">
+ <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
@@ -26,19 +26,46 @@
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>
+ // 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 = () => {
@@ -69,16 +96,17 @@
if (!chartIsShow.value) {
chartIsShow.value = true;
}
+ const cols = props.data.cols;
infoWindow.open(gaoDeMap.map, label.getPosition() as any);
const extData = label.getExtData();
- updateInfoWindow(extData[1]);
+
+ updateInfoWindow(extData);
},
},
layerOpt: {
// allowCollision:false
},
});
-
};
const bottomBarIsShow = ref(false);
@@ -100,12 +128,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,
});
});
--
Gitblit v1.9.3