<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">
|
<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>
|
</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 { travelTree } from '/@/utils/util';
|
|
const props = defineProps(['olMap']);
|
const emit = defineEmits(['close']);
|
|
const defaultProps = {
|
children: 'children',
|
label: 'title',
|
};
|
const closeClick = () => {
|
emit('close');
|
};
|
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') {
|
const id = layer.id;
|
if (!checkedKeys.includes(id)) {
|
layer.isVisible = false;
|
} else {
|
layer.isVisible = true;
|
}
|
}
|
});
|
};
|
|
const handleNodeClick = () => {};
|
const layerInfo = computed(() => (props.olMap as OLMap).layerInfo.value);
|
|
watch(
|
() => layerInfo.value,
|
(val) => {
|
if (isHumanCheckTrigger) {
|
isHumanCheckTrigger = false;
|
return;
|
}
|
const keys = [];
|
travelTree(val, (item) => {
|
if (item.type === 'layer') {
|
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>
|
