<template>
|
<div class="layer-control bg-white h-full flex-col" style="display: flex">
|
<div class="bg-white rounded flex-0">
|
<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>
|
</div>
|
</div>
|
</div>
|
<div class="content rounded-lg flex-auto overflow-y-auto">
|
<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 }">
|
<span>{{ node.label }}</span>
|
</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 { 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 changeSourceType = (val: GaoDeSourceType) => {
|
props.olMap.applySourceType(val);
|
};
|
const checkTreeRef = ref<InstanceType<typeof ElTree>>();
|
|
let isHumanCheckTrigger = false;
|
const handleCheck = (data: any, node: any) => {
|
const checkedKeys = node.checkedKeys;
|
isHumanCheckTrigger = true;
|
travelTree(layerInfo.value, (layer) => {
|
if (layer.type === 'layer' || layer.type === 'equip') {
|
const id = layer.id;
|
if (!checkedKeys.includes(id)) {
|
layer.isVisible = false;
|
} else {
|
layer.isVisible = true;
|
}
|
}
|
});
|
};
|
|
const handleNodeClick = () => {};
|
const layerInfo = computed(() => {
|
const info = (props.olMap as OLMap).layerInfo.value;
|
return info;
|
const result = info.concat([
|
{
|
id: 'overlays',
|
title: '监测设备',
|
children: [],
|
|
type: 'equip',
|
},
|
]);
|
return result;
|
});
|
|
watch(
|
() => layerInfo.value,
|
(val) => {
|
if (isHumanCheckTrigger) {
|
isHumanCheckTrigger = false;
|
return;
|
}
|
const keys = [];
|
travelTree(val, (item) => {
|
if (item.type === 'layer' || item.type === 'equip') {
|
if (item.isVisible) {
|
keys.push(item.id);
|
}
|
}
|
});
|
// const keys = val.filter((item) => item.isVisible).map((item) => item.id);
|
checkTreeRef.value?.setCheckedKeys(keys);
|
}
|
);
|
</script>
|
<style scoped lang="scss"></style>
|
