显示label

wujingjing

2025-02-19 382631e067c6c402d86e163cbd8e7d50a4c17933

 src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue

@@ -4,45 +4,90 @@
         <div class="header flex-items-center pb-1.5" style="border-bottom: 1px solid black">
            <div class="flex-items-center">
               <span class="ywifont ywicon-guanbi cursor-pointer mr-1.5" @click="closeClick"></span>
               <span class="text-lg font-bold">图层</span>
               <span class="text-lg font-bold">图层及背景地图</span>
            </div>
         </div>
      </div>
      <div class="content rounded-lg flex-auto overflow-y-auto">
         <el-tree
            class="w-full"
            :data="layerInfo"
            :props="defaultProps"
            show-checkbox
            node-key="id"
            default-expand-all
            ref="checkTreeRef"
            @check="handleCheck"
            @node-click="handleNodeClick"
         >
            <template #default="{ node, data }">
               <span>{{ node.label }}</span>
            </template>
         </el-tree>
         <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>
            </div>
            <div>
               <el-tree
                  class="w-full"
                  :data="layerInfo"
                  :props="defaultProps"
                  show-checkbox
                  node-key="id"
                  default-expand-all
                  ref="checkTreeRef"
                  @check="handleCheck"
                  @node-click="handleNodeClick"
               >
                  <template #default="{ node, data }">
                     <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>
         </div>

         <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>
            </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>
                  <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>
</template>

<script setup lang="ts" name="LayerControl">
import { computed, ref, watch, watchEffect } from 'vue';
import type { OLMap } from '/@/model/map/OLMap';
import { ElTree } from 'element-plus';
import { computed, ref, watch } from 'vue';
import type { OLMap } from '/@/model/map/OLMap';
import { GaoDeSourceType, gaoDeSourceTypeMap } from '/@/model/map/OLMap';
import { travelTree } from '/@/utils/util';

const props = defineProps(['olMap']);
const emit = defineEmits(['close']);

const activeSourceType = ref(props.olMap.activeSourceType);
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 changeSourceType = (val: GaoDeSourceType) => {
   props.olMap.applySourceType(val);
};
const checkTreeRef = ref<InstanceType<typeof ElTree>>();

@@ -51,7 +96,7 @@
   const checkedKeys = node.checkedKeys;
   isHumanCheckTrigger = true;
   travelTree(layerInfo.value, (layer) => {
      if (layer.type === 'layer') {
      if (layer.type === 'layer' || layer.type === 'equip') {
         const id = layer.id;
         if (!checkedKeys.includes(id)) {
            layer.isVisible = false;
@@ -60,13 +105,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
   // const info = (props.olMap as OLMap).layerInfo.value.filter((item) => item.type !== 'equip');
   return info;
   const result = info.concat([
      {
@@ -76,9 +122,8 @@

         type: 'equip',
      },
   ])
   ]);
   return result;

});

watch(
@@ -90,7 +135,7 @@
      }
      const keys = [];
      travelTree(val, (item) => {
         if (item.type === 'layer') {
         if (item.type === 'layer' || item.type === 'equip') {
            if (item.isVisible) {
               keys.push(item.id);
            }