图层控制

wujingjing

2025-01-19 1113ced19c32c1b9b65571c48491d9435dbaf085

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

@@ -23,16 +23,16 @@
            </div> -->

            <el-tabs v-model="activeTab">
               <el-tab-pane label="底图" name="components"
               <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"
@@ -76,16 +76,15 @@
<script setup lang="ts">
import { Close } from '@element-plus/icons-vue';
import { ElTree } from 'element-plus';
import type Overlay from 'ol/Overlay';
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 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;
}>();
@@ -110,7 +109,7 @@
   {
      id: ROOT_OVERLAY_TYPE.Marker,
      label: '设备',
      checked: props.olMap.overlayIsVisible.value,
      checked: props.olMap.markerIsVisible.value,
   },
]);
const initTreeChecked = () => {
@@ -124,7 +123,12 @@
const handleNodeClick = (data: any, node: any) => {
   if (data.id === ROOT_OVERLAY_TYPE.Marker) {
      const overlays = props.olMap.map.getOverlays().getArray();
      props.olMap.adjustViewToOverlays(overlays);

      const filteredOverlays = overlays.filter((overlay) => {
         const type = overlay.get('type');
         return type === OverlayType.Marker;
      });
      props.olMap.adjustViewToOverlays(filteredOverlays);
   }
};