修改地图

wujingjing

2025-02-25 4f33e1e616e2a59112a6265073124abd7f0e81ed

修改地图

 src/assets/images/business/map/road_map.png

 src/assets/images/business/map/satellite_map.png

 src/assets/images/business/map/vector_map.png

 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>