From eb0460fbc34fda7906f2949d7dce0f08542e3c8c Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 18 七月 2024 16:52:20 +0800
Subject: [PATCH] 地图展示
---
src/components/chat/chatComponents/mapCom/MapCom.vue | 35 +++++++++++++++++++++++++++++++----
1 files changed, 31 insertions(+), 4 deletions(-)
diff --git a/src/components/chat/chatComponents/mapCom/MapCom.vue b/src/components/chat/chatComponents/mapCom/MapCom.vue
index 01ae60d..5db16e9 100644
--- a/src/components/chat/chatComponents/mapCom/MapCom.vue
+++ b/src/components/chat/chatComponents/mapCom/MapCom.vue
@@ -4,18 +4,45 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
-import { GaoDeMap } from '/@/model/map/GaoDeMap';
import { chatComProps } from '../common';
+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);
-
+const props = defineProps(chatComProps) as {
+ data: MapData;
+};
+const addMarkerLayer = () => {
+ const dataList = (props.data?.values ?? []).map<LabelMarkerData>((item) => ({
+ position: [item.posx, item.posy],
+ textColor: item.color,
+ extData: item,
+ title: item.title,
+ }));
+ gaoDeMap.addMarkerLayer(dataList, {
+ markerOpt: {
+ icon: {
+ url: monitorPointPic,
+ size: 30,
+ },
+ },
+ layerOpt: {
+ // allowCollision:false
+ },
+ });
+};
onMounted(async () => {
await gaoDeMap.init({
container: containerRef.value,
});
- gaoDeMap.zoomToRect([116.319665, 39.855919], [116.468324, 39.9756]);
+ 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();
});
</script>
<style scoped lang="scss"></style>
--
Gitblit v1.9.3