修改地图

wujingjing

2025-02-25 4f33e1e616e2a59112a6265073124abd7f0e81ed

 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
@@ -27,7 +27,11 @@
                  @node-click="handleNodeClick"
               >
                  <template #default="{ node, data }">
                     <span>{{ node.label }}</span>
                     <div class="flex-items-center gap-2">
                        <span :style="[{ 'font-family': `ywifont` }]">{{ getIconText(node, data) }}</span>
                        <!-- e6b4 -->
                        <span>{{ node.label }}</span>
                     </div>
                  </template>
               </el-tree>
            </div>
@@ -39,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>
@@ -64,19 +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 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>>();

@@ -94,11 +131,14 @@
         }
      }
   });

   props.olMap.displayFeatureInfo(null);
};

const handleNodeClick = () => {};
const layerInfo = computed(() => {
   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([
      {
@@ -132,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>