切换主题，自身设置颜色、大小

wujingjing

2025-02-07 4c20089472b20319746649decbce3a11f16cb6a0

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

@@ -14,7 +14,6 @@
            :style="layerControlCardStyle"
            @mousedown="startDrag"
         >

            <el-icon class="absolute top-2 right-2 cursor-pointer z-10" @click="closePanel">
               <Close />
            </el-icon>
@@ -27,13 +26,31 @@
               <el-tab-pane label="底图" name="components"
                  ><div class="flex flex-col gap-2">
                     <el-radio-group v-model="activeSourceType" class="flex flex-col gap-2" @change="changeSourceType">
                        <el-radio class="w-full mr-0" v-for="item in Object.keys(gaoDeSourceTypeMap)" :key="item" :label="parseInt(item)">
                        <el-radio class="w-full mr-0" v-for="item in layerList" :key="item" :label="item">
                           <span>{{ gaoDeSourceTypeMap[item] }}</span>
                        </el-radio>
                     </el-radio-group>
                  </div></el-tab-pane
               >
               <el-tab-pane label="覆盖层" name="overlays">
               <el-tab-pane label="覆盖物" name="overlays">
                  <el-tree
                     class="w-full"
                     :data="treeData"
                     :props="defaultProps"
                     show-checkbox
                     node-key="id"
                     default-expand-all
                     :filter-node-method="filterNode"
                     ref="overlayTreeRef"
                     @check="handleCheck"
                     @node-click="handleNodeClick"
                  >
                     <template #default="{ node, data }">
                        <span>{{ node.label }}</span>
                     </template>
                  </el-tree>
               </el-tab-pane>
               <!-- <el-tab-pane label="覆盖层" name="overlays">
                  <el-tree
                     class="w-full"
                     :data="treeData"
@@ -49,7 +66,7 @@
                        <span>{{ node.label }}</span>
                     </template>
                  </el-tree>
               </el-tab-pane>
               </el-tab-pane> -->
            </el-tabs>
         </el-card>
      </div>
@@ -57,48 +74,104 @@
</template>

<script setup lang="ts">
import { Close, Folder, FolderOpened, Search } from '@element-plus/icons-vue';
import { onMounted, ref, watch } from 'vue';
import { useDrag } from '/@/hooks/useDrag';
import type { GaoDeSourceType, OLMap } from '/@/model/map/OLMap';
import { gaoDeSourceTypeMap } from '/@/model/map/OLMap';
import { Close } from '@element-plus/icons-vue';
import { ElTree } from 'element-plus';
import { computed, onMounted, ref, watch } from 'vue';
import { useDrag } from '/@/hooks/useDrag';
import type { OLMap } from '/@/model/map/OLMap';
import { GaoDeSourceType, gaoDeSourceTypeMap, OverlayType } from '/@/model/map/OLMap';
import { sleep } from '/@/utils/util';
const searchText = ref('');
const activeTab = ref('components');
const treeRef = ref();

const layerList = [GaoDeSourceType.Vector, GaoDeSourceType.Satellite, GaoDeSourceType.SatelliteRoad];
const props = defineProps<{
   olMap: OLMap;
}>();

enum ROOT_OVERLAY_TYPE {
   Marker = 'marker',
}
type TreeData = {
   id: string;
   label: string;
   checked?: boolean;
   children?: TreeData[];
};
const activeSourceType = ref(props.olMap.activeSourceType);

const changeSourceType = (val: GaoDeSourceType) => {
   props.olMap.setSourceUrl(val);
   props.olMap.applySourceType(val);
};

const overlayTreeRef = ref<InstanceType<typeof ElTree>>();

const treeData = [
const treeData = ref<TreeData[]>([
   {
      id: 1,
      id: ROOT_OVERLAY_TYPE.Marker,
      label: '设备',
      checked: props.olMap.overlayIsVisible.value,
      checked: props.olMap.markerIsVisible.value,
   },
];
]);
const initTreeChecked = () => {
   treeData.forEach((item) => {
   treeData.value.forEach((item) => {
      if (item.checked) {
         overlayTreeRef.value?.setCheckedKeys([item.id]);
      }
   });
};
const handleCheck = (data: any, node: any) => {
   const checkedKeys = node.checkedKeys;
   const isVisible = checkedKeys.includes(1);
   props.olMap.toggleMarkerOverlayVisible(isVisible);

const setTreeChecked = (checked: boolean) => {
   treeData.value.forEach((item) => {
      if (checked) {
         overlayTreeRef.value?.setCheckedKeys([ROOT_OVERLAY_TYPE.Marker]);
      } else {
         overlayTreeRef.value?.setCheckedKeys([]);
      }
   });
};

let isHumanCheckTrigger = false;
watch(
   () => props.olMap.markerIsVisible.value,
   (val) => {
      if (isHumanCheckTrigger) {
         isHumanCheckTrigger = false;
         return;
      }
      setTreeChecked(val);
   }
);

const handleNodeClick = (data: any, node: any) => {
   if (data.id === ROOT_OVERLAY_TYPE.Marker) {
      props.olMap.adjustViewToMarkers();
   }
};

const iniTreeData = async () => {
   await sleep(0.4);
   const foundMarker = treeData.value.find((item) => item.id === ROOT_OVERLAY_TYPE.Marker);
   if (!foundMarker) {
      return;
   }
   foundMarker.children = props.olMap.map
      .getOverlays()
      .getArray()
      .map((item) => {
         const extData = item.get('extData');
         return {
            id: item.getId() as string,
            label: extData?.name,
            // checked: item.getVisible(),
         };
      });
};
const handleCheck = (data: any, node: any) => {
   const checkedKeys = node.checkedKeys;
   isHumanCheckTrigger = true;
   const isVisible = checkedKeys.includes(ROOT_OVERLAY_TYPE.Marker);
   props.olMap.toggleMarkerOverlayVisible(isVisible);
};

const layerControlCard = ref<HTMLDivElement>(null);

@@ -126,8 +199,10 @@
   treeRef.value?.filter(val);
});
onMounted(() => {

   initTreeChecked();
   // iniTreeData();
   // window.olMap = props.olMap;
   // window.map = props.olMap.map;
});
defineEmits(['close']);
</script>
@@ -163,4 +238,8 @@
:deep(.el-card) {
   cursor: inherit;
}

:deep(.el-tree-node__expand-icon.is-leaf) {
   display: none;
}
</style>