From 4f33e1e616e2a59112a6265073124abd7f0e81ed Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期二, 25 二月 2025 16:00:27 +0800
Subject: [PATCH] 修改地图
---
src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue | 88 +++++++++++++++++++++++++++++++------------
1 files changed, 63 insertions(+), 25 deletions(-)
diff --git a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
index 332162d..9a9c437 100644
--- a/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
+++ b/src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
@@ -12,7 +12,7 @@
<div class="theme-item">
<div class="theme-item-title h-fit flex-items-center gap-2 mb-1">
<div class="w-1 h-4 bg-[#1677ff]"></div>
- <span class="font-bold">鍥惧眰</span>
+ <span class="font-bold">鍥惧眰鎺у埗</span>
</div>
<div>
<el-tree
@@ -28,11 +28,10 @@
>
<template #default="{ node, data }">
<div class="flex-items-center gap-2">
- <span :style="[{'font-family':`ywifont`}]">{{ getIconText(node,data) }}</span>
+ <span :style="[{ 'font-family': `ywifont` }]">{{ getIconText(node, data) }}</span>
<!-- e6b4 -->
<span>{{ node.label }}</span>
</div>
-
</template>
</el-tree>
</div>
@@ -44,19 +43,22 @@
<span class="font-bold">鑳屾櫙鍦板浘</span>
</div>
<div>
- <el-radio-group v-model="activeSourceType" class="w-full" @change="changeSourceType">
- <div class="flex w-full">
- <el-radio :label="GaoDeSourceType.Vector" class="flex-1">{{ gaoDeSourceTypeMap[GaoDeSourceType.Vector] }}</el-radio>
- <el-radio :label="GaoDeSourceType.Satellite" class="flex-1">{{
- gaoDeSourceTypeMap[GaoDeSourceType.Satellite]
- }}</el-radio>
+ <div class="grid grid-cols-2 gap-1 p-1">
+ <div
+ v-for="item in mapTypes"
+ :key="item.type"
+ class="relative cursor-pointer flex flex-col items-center gap-0.5"
+ :class="{ 'map-type-active': activeSourceType === item.type }"
+ @click="changeSourceType(item.type)"
+ >
+ <img :src="item.img" class="w-full h-[60px] object-cover rounded" />
+ <span>{{ item.label }}</span>
+ <span
+ v-show="activeSourceType === item.type"
+ class="ywifont absolute bottom-[25px] right-1 text-blue-500 text-lg"
+ ></span>
</div>
- <div class="flex w-full">
- <el-radio :label="GaoDeSourceType.SatelliteRoad" class="flex-1">{{
- gaoDeSourceTypeMap[GaoDeSourceType.SatelliteRoad]
- }}</el-radio>
- </div>
- </el-radio-group>
+ </div>
</div>
</div>
</div>
@@ -69,25 +71,49 @@
import type { OLMap } from '/@/model/map/OLMap';
import { GaoDeSourceType, gaoDeSourceTypeMap } from '/@/model/map/OLMap';
import { travelTree } from '/@/utils/util';
+import terrainMap from '/@/assets/images/business/map/road_map.png';
+import satelliteMap from '/@/assets/images/business/map/satellite_map.png';
+import vectorMap from '/@/assets/images/business/map/vector_map.png';
const props = defineProps(['olMap']);
const emit = defineEmits(['close']);
-const activeSourceType = ref(props.olMap.activeSourceType);
+const activeSourceType = computed(() => props.olMap.activeSourceType.value);
const defaultProps = {
children: 'children',
label: 'title',
};
+
const closeClick = () => {
emit('close');
};
-const getIconText = (node,data)=>{
- if(data.type==='equip'){
- return '\ue63f'
- }else{
- return data.icon ?? (node.expanded?'\ue6b4':' \ue671')
+const getIconText = (node, data) => {
+ if (data.type === 'equip') {
+ return '\ue63f';
+ } else {
+ return data.icon ?? (node.expanded ? '\ue6b4' : ' \ue671');
}
-}
+};
+
+// 鍦板浘绫诲瀷
+const mapTypes = [
+ {
+ type: GaoDeSourceType.Vector,
+ label: gaoDeSourceTypeMap[GaoDeSourceType.Vector],
+ img: vectorMap,
+ },
+ {
+ type: GaoDeSourceType.Satellite,
+ label: gaoDeSourceTypeMap[GaoDeSourceType.Satellite],
+ img: satelliteMap,
+ },
+ {
+ type: GaoDeSourceType.SatelliteRoad,
+ label: gaoDeSourceTypeMap[GaoDeSourceType.SatelliteRoad],
+ img: terrainMap,
+ },
+];
const changeSourceType = (val: GaoDeSourceType) => {
- props.olMap.applySourceType(val);
+ props.olMap.setSourceType(val);
+ // props.olMap.applySourceType(val);
};
const checkTreeRef = ref<InstanceType<typeof ElTree>>();
@@ -111,7 +137,7 @@
const handleNodeClick = () => {};
const layerInfo = computed(() => {
- const info = (props.olMap as OLMap).layerInfo.value
+ const info = (props.olMap as OLMap).layerInfo.value;
// const info = (props.olMap as OLMap).layerInfo.value.filter((item) => item.type !== 'equip');
return info;
const result = info.concat([
@@ -146,4 +172,16 @@
}
);
</script>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.map-type-active {
+ img {
+ border: 2px solid #1989fa;
+ border-radius: 4px;
+ }
+
+ span:last-child {
+ color: #1989fa;
+ font-weight: bold;
+ }
+}
+</style>
--
Gitblit v1.9.3