<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2024-10-31 10:47:29
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2024-11-05 18:36:54
|
* @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="treeRef" :data="data" draggable="" show-checkbox node-key="id" default-expand-all
|
:default-checked-keys="['1']" :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>
|
import { getPage } from '@/api/indParkInfo'
|
import { getList } from "@/api/space/space"
|
import { getList as getRiskList } from "@/api/riskSource/riskSource"
|
|
const { VITE_APP_BASE } = import.meta.env
|
import { getViewer } from 'utils/getViewer'
|
const globalViewer = getViewer()
|
|
const treeRef = ref(null)
|
|
const treeProps = {
|
indent: 16,
|
showLabelLine: true,
|
}
|
|
const data = [
|
{
|
id: '1',
|
label: '化工园区',
|
type: 'layer',
|
subType: '3Dtile',
|
url: VITE_APP_BASE + 'mx/tileset.json',
|
layerName: 'hgyq'
|
},
|
|
{
|
id: '2',
|
label: '企业分布',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getPage,
|
params: {
|
size: 1000
|
},
|
layerName: 'qyfb'
|
},
|
|
{
|
id: '3',
|
label: '应急空间',
|
children: [
|
{
|
id: '3-1',
|
label: '应急池',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 1,
|
size: 1000
|
},
|
layerName: 'yjc'
|
},
|
{
|
id: '3-2',
|
label: '阀门',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 2,
|
size: 1000
|
},
|
layerName: 'fm'
|
},
|
|
{
|
id: '3-3',
|
label: '公共管网',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 3,
|
size: 1000
|
},
|
layerName: 'gggw'
|
},
|
|
{
|
id: '3-4',
|
label: '污水提升泵站',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 4,
|
size: 1000
|
},
|
layerName: 'wstsbz'
|
},
|
|
{
|
id: '3-5',
|
label: '水库',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 5,
|
size: 1000
|
},
|
layerName: 'sk'
|
},
|
|
{
|
id: '3-6',
|
label: '应急泵',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 6,
|
size: 1000
|
},
|
layerName: 'yjb'
|
},
|
|
{
|
id: '3-7',
|
label: '消防沙',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getList,
|
params: {
|
type: 7,
|
size: 1000
|
},
|
layerName: 'xfs'
|
}
|
]
|
},
|
|
{
|
id: '4',
|
label: '风险源',
|
type: 'layer',
|
subType: 'labelPoint',
|
method: getRiskList,
|
params: {
|
size: 1000
|
},
|
showParams: 'category',
|
layerName: 'fxy'
|
},
|
]
|
|
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') {
|
if (!addTileLayers[item.layerName]) {
|
addTileLayers[item.layerName] = new DC.Tileset(
|
item.url,
|
{
|
cullWithChildrenBounds: false,
|
maximumScreenSpaceError: 256,
|
maximumMemoryUsage: 1024,
|
skipLevelOfDetail: true,
|
preferLeaves: true
|
})
|
|
tileLayers.addOverlay(addTileLayers[item.layerName])
|
} else {
|
addTileLayers[item.layerName].show = true
|
}
|
|
console.log(addTileLayers[item.layerName], 11111111)
|
|
globalViewer.flyTo(addTileLayers[item.layerName])
|
} else if (item.subType == 'labelPoint') {
|
if (!addTileLayers[item.layerName]) {
|
addTileLayers[item.layerName] = new DC.HtmlLayer(addTileLayers[item.layerName])
|
globalViewer.addLayer(addTileLayers[item.layerName])
|
}
|
|
item.method(item.params).then(res => {
|
let data = res.data.data.records
|
|
data.filter(i => i.lng && i.lng != '' && i.lat && i.lat != '').forEach(i => {
|
let divIcon = new DC.DivIcon(
|
new DC.Position(i.lng, i.lat, 0),
|
`<div class="public-map-popup">
|
<div class="marsBlueGradientPnl">
|
<div>${i[item.showParams] || i.name}</div>
|
</div>
|
</div>`
|
)
|
|
addTileLayers[item.layerName].addOverlay(divIcon)
|
})
|
})
|
}
|
} else {
|
if (addTileLayers[item.layerName]) {
|
if (item.subType == '3Dtile') {
|
addTileLayers[item.layerName].show = false
|
} else if (item.subType == 'labelPoint') {
|
globalViewer.removeLayer(addTileLayers[item.layerName])
|
}
|
|
delete addTileLayers[item.layerName]
|
}
|
}
|
})
|
}
|
|
onMounted(() => {
|
handleCheckChange(data.filter(i => i.id == '1'), {
|
checkedKeys: ['1']
|
})
|
})
|
</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>
|
