<template>
|
<div>
|
<Popup
|
ref="layer"
|
:closeHidePage="true"
|
:title="title"
|
:left="left"
|
:top="top"
|
:maxHeight="maxHeight"
|
>
|
<div class="treeContainer">
|
<el-tree
|
ref="tree"
|
:data="treeData"
|
show-checkbox
|
node-key="id"
|
draggable
|
:expand-on-click-node="false"
|
:auto-expand-parent="false"
|
:default-expanded-keys="defaultExpanded"
|
:default-checked-keys="defaultCheck"
|
@check="check"
|
>
|
<span
|
class="custom-tree-node"
|
slot-scope="{ data }"
|
@dblclick="flyTo(data)"
|
>
|
<span>
|
<i v-if="data.children" class="el-icon-folder"></i>
|
<i
|
v-else
|
:class="
|
data.sourceType === 'location'
|
? 'el-icon-location-outline'
|
: ''
|
"
|
></i>
|
<span>{{ data.name }}</span>
|
</span>
|
</span>
|
</el-tree>
|
</div>
|
</Popup>
|
</div>
|
</template>
|
|
<script>
|
import Popup from "@tools/Popup";
|
import axios from "axios";
|
// 工程树工具
|
let _treeTool;
|
export default {
|
name: "Layer",
|
components: {
|
Popup,
|
},
|
data() {
|
return {
|
title: "图层管理",
|
left: "10px",
|
top: "10px",
|
maxHeight: "500px",
|
defaultCheck: [],
|
defaultExpanded: [],
|
treeData: [],
|
viewCenter: [],
|
};
|
},
|
mounted() {
|
// 获取本地配置文件
|
axios.get(`./layer/layer.json`).then((data) => {
|
this.initData(data.data);
|
});
|
|
// 打开弹窗
|
this.$refs.layer.open();
|
},
|
destroyed() {
|
_treeTool = undefined;
|
},
|
methods: {
|
// 初始化数据
|
initData(data) {
|
if (this.treeData.length) {
|
this.removeChildData(this.treeData);
|
}
|
|
// 设置工程树数据
|
this.treeData = data.children;
|
// 初始定位
|
if (data.flyTo) {
|
this.viewCenter = data.flyTo;
|
}
|
// 加载场景数据
|
this.loadDataToScene();
|
},
|
// 加载数据到场景
|
loadDataToScene() {
|
if (window.sgworld) {
|
// 工程树工具
|
_treeTool = new window.TreeTool(window.sgworld);
|
window.sgworld._treeTool = _treeTool;
|
if (this.$refs.tree) {
|
this.defaultCheck = [];
|
this.defaultExpanded = [];
|
// 遍历节点
|
this.ergodicNode({ children: this.treeData });
|
}
|
// 初始定位
|
if (this.viewCenter.length) {
|
this.flyTo({
|
flyTo: this.viewCenter,
|
});
|
}
|
} else {
|
setTimeout(() => {
|
this.loadDataToScene();
|
}, 500);
|
}
|
},
|
// 遍历节点
|
ergodicNode(node, addData = true) {
|
node.rename = false;
|
if (node.expanded) {
|
this.defaultExpanded.push(node.id);
|
}
|
if (
|
node.checked &&
|
(!node.children || (node.children && !node.children.length))
|
) {
|
this.defaultCheck.push(node.id);
|
if (addData && node._children) {
|
node._children.forEach((item) => {
|
_treeTool.addData(item);
|
});
|
} else {
|
addData && _treeTool.addData(node);
|
}
|
}
|
if (node.children && node.children.length) {
|
node.children.forEach((item) => {
|
this.ergodicNode(item, addData);
|
});
|
}
|
},
|
// 勾选
|
check(treeNode, data) {
|
let isCheck = data.checkedKeys.indexOf(treeNode.id) > -1;
|
// 更新场景数据
|
_treeTool.checkNode(treeNode, isCheck);
|
|
// 只能同时加载一个地形
|
if (
|
isCheck &&
|
treeNode.sourceType &&
|
treeNode.sourceType.indexOf("terrain") > -1
|
) {
|
let index = data.checkedNodes.findIndex((item) => {
|
return (
|
item.sourceType &&
|
item.sourceType.indexOf("terrain") > -1 &&
|
item.id !== treeNode.id
|
);
|
});
|
if (index > -1) {
|
// 取消勾选
|
this.$refs.tree.setChecked(data.checkedNodes[index].id, false);
|
}
|
}
|
},
|
// 定位
|
flyTo(treeNode) {
|
_treeTool.flyTo(treeNode);
|
},
|
removeChildData(nodes) {
|
nodes.forEach((item) => {
|
if (item.children) {
|
this.removeChildData(item.children);
|
} else {
|
// 移除场景数据
|
_treeTool.deleteData(item.id);
|
}
|
});
|
},
|
},
|
};
|
</script>
|
|
<style scoped lang="less" scoped>
|
.treeContainer {
|
width: 100%;
|
height: 100%;
|
|
.treeTitle {
|
text-align: center;
|
margin: 10px 0;
|
|
/deep/ .el-upload {
|
margin-right: 10px;
|
}
|
}
|
|
.el-tree {
|
background: transparent;
|
color: #fff;
|
}
|
|
/deep/ .el-tree-node__content:hover {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .el-tree-node:focus > .el-tree-node__content {
|
background-color: rgba(245, 247, 250, 0.2);
|
}
|
|
/deep/ .custom-tree-node {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
font-size: 14px;
|
padding-right: 10px;
|
|
i {
|
margin-right: 5px;
|
}
|
}
|
|
/deep/ .el-checkbox > .is-disabled {
|
display: none;
|
}
|
}
|
.rightClickMenu {
|
position: fixed;
|
display: block;
|
z-index: 10000;
|
background-color: #fff;
|
padding: 5px 0;
|
border: 1px solid #ebeef5;
|
border-radius: 4px;
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
}
|
.rightClickMenu ul {
|
margin: 0;
|
padding: 0;
|
}
|
.rightClickMenu ul li {
|
list-style: none;
|
margin: 0;
|
padding: 0 15px;
|
font-size: 14px;
|
line-height: 30px;
|
cursor: pointer;
|
color: black;
|
}
|
.rightClickMenu ul li:hover {
|
background-color: #ebeef5;
|
}
|
</style>
|
