<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-10-31 10:47:29
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-10-31 18:16:33
|
* @FilePath: \bigScreen\src\views\layout\components\scomponents\layersControl.vue
|
* @Description:
|
*
|
* Copyright (c) 2024 by shuishen, All Rights Reserved.
|
-->
|
<template>
|
<public-box>
|
<template #name>
|
<div class="name"><i class="fa fa-tasks"></i> 图层</div>
|
</template>
|
|
<template #close>
|
<div class="close" @click="$emit('close', 'layers')"><i class="fa fa-close"></i></div>
|
</template>
|
|
<template #content>
|
<div class="tree-content">
|
<el-tree ref="tree" :data="data" draggable="" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
|
:default-checked-keys="[5]" :props="defaultProps" :indent="treeProps['indent']" @check="handleCheckChange">
|
<template v-slot:default="{ node }">
|
<element-tree-line :node="node" :showLabelLine="treeProps['showLabelLine']" :indent="treeProps['indent']">
|
<!-- 自定义label的slot -->
|
<template v-slot:node-label>
|
<span style="font-size: 12px">
|
{{ node.label }}
|
<i class="el-icon-eleme"></i></span>
|
</template>
|
<!-- 在右边追加内容的slot -->
|
<!-- <template v-slot:after-node-label>
|
<span style="padding-right: 10px">
|
<el-button type="primary" size="mini" @click.stop="openDrawer(node)">新增子节点</el-button>
|
<el-button type="primary" size="mini" @click.stop="openDrawer(node)">修改</el-button>
|
<el-button type="danger" size="mini" @click.stop="openDialog">删除</el-button></span>
|
</template> -->
|
</element-tree-line>
|
</template>
|
</el-tree>
|
</div>
|
</template>
|
</public-box>
|
</template>
|
|
<script setup>
|
const { VITE_APP_BASE } = import.meta.env
|
import { getViewer } from 'utils/getViewer'
|
const globalViewer = getViewer()
|
|
const treeProps = {
|
indent: 16,
|
showLabelLine: true,
|
}
|
|
const data = [
|
{
|
id: 1,
|
label: '三维模型',
|
children: [
|
{
|
id: 4,
|
label: '倾斜摄影',
|
children: [
|
{
|
id: 9,
|
label: '化工园区',
|
type: 'layer',
|
subType: '3Dtile',
|
url: VITE_APP_BASE + 'mx/tileset.json'
|
},
|
],
|
},
|
],
|
},
|
]
|
|
const defaultProps = {
|
children: 'children',
|
label: 'label',
|
}
|
|
const checkType = (value) => {
|
if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
|
return 'obj'
|
} else if (Array.isArray(value)) {
|
return 'arr'
|
}
|
}
|
// 用于存储收集到的节点的数组
|
const collectedNodes = reactive([])
|
|
// 递归函数，收集所有 flag 为 true 的子节点
|
const collectNodesWithFlag = (nodes) => {
|
if (checkType(nodes) == 'obj') {
|
if (nodes.type == 'layer') {
|
collectedNodes.value.push(nodes)
|
}
|
if (nodes.children && nodes.children.length > 0) {
|
collectNodesWithFlag(nodes.children)
|
return
|
}
|
}
|
|
if (checkType(nodes) == 'arr') {
|
nodes.forEach(item => {
|
if (item.type == 'layer') {
|
collectedNodes.value.push(item)
|
}
|
|
if (item.children && item.children.length > 0) {
|
collectNodesWithFlag(item.children)
|
}
|
})
|
}
|
}
|
|
let addTileLayers = {}
|
let tileLayers = new DC.TilesetLayer('tileLayers')
|
globalViewer.addLayer(tileLayers)
|
|
const handleCheckChange = (data, options) => {
|
collectedNodes.value = []
|
collectNodesWithFlag(data)
|
|
collectedNodes.value.forEach(item => {
|
if (options.checkedKeys.some(i => i == item.id)) {
|
if (item.subType == '3Dtile') {
|
addTileLayers[item.layerName] = new DC.Tileset(
|
item.url
|
)
|
tileLayers.addOverlay(addTileLayers[item.layerName])
|
globalViewer.flyTo(addTileLayers[item.layerName])
|
}
|
} else {
|
if (item.subType == '3Dtile') {
|
tileLayers.removeOverlay(addTileLayers[item.layerName])
|
|
delete addTileLayers[item.layerName]
|
}
|
}
|
})
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tree-content {
|
min-width: 200px;
|
padding: 10px;
|
|
::v-deep(.el-tree) {
|
color: #fff;
|
background: transparent;
|
|
/* 鼠标浮动过的背景颜色 */
|
.el-tree-node__content:hover {
|
background: #0074b7;
|
}
|
|
/* 鼠标点击时节点的背景颜色 */
|
.el-tree-node:focus>.el-tree-node__content {
|
background-color: #0074b7 !important;
|
color: rgb(255, 255, 255);
|
}
|
|
/* 鼠标失去焦点时节点背景的颜色 */
|
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
background: rgb(0, 129, 204);
|
}
|
}
|
}
|
</style>
|
