<template>
|
<div>
|
<div class="closeBtn">
|
<span>资源目录</span><span class="closeSpan" @click="closeJm">×</span>
|
</div>
|
<hr />
|
<div class="layerTreeContainer">
|
<div class="layerTree">
|
<el-tree ref="tree" :data="treeData" show-checkbox node-key="id" :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>{{ data.name }}</span>
|
</span>
|
</el-tree>
|
</div>
|
<!-- <img class="left-close" src="@/assets/img/ssan.png" @click="close" /> -->
|
</div>
|
</div>
|
</template>
|
|
|
<script>
|
import axios from "axios";
|
import common from "@/components/common";
|
|
// 工程树工具
|
let _treeTool;
|
export default {
|
name: "layertree",
|
data() {
|
return {
|
title: "图层管理",
|
left: "10px",
|
top: "10px",
|
maxHeight: "500px",
|
defaultCheck: [],
|
defaultExpanded: [],
|
selectNode: undefined,
|
rightClickMenuDisplay: false,
|
rightClickMenuStyle: {},
|
isClickParent: false,
|
isNewFold: false,
|
newFoldName: undefined,
|
treeData: []
|
};
|
},
|
mounted() {
|
axios.get(`./static/layers.json`).then((data) => {
|
|
// 工程树工具
|
_treeTool = new window.TreeTool(window.sgworld);
|
|
// 初始定位
|
if (data.data.flyTo) {
|
this.flyTo(data.data.flyTo)
|
}
|
|
this.treeData = data.data.children;
|
this.loadDataToScene()
|
});
|
},
|
methods: {
|
// yhadd
|
closeJm() {
|
this.$parent.$parent.$parent.isShowResMenu = false;
|
},
|
|
// 加载数据到场景
|
loadDataToScene() {
|
window.sgworld._treeTool = _treeTool;
|
if (this.$refs.tree) {
|
this.defaultCheck = [];
|
this.defaultExpanded = [];
|
// 遍历节点
|
this.ergodicNode({ children: this.treeData });
|
}
|
},
|
// 遍历节点
|
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;
|
// // 勾选节点
|
// this.checkTreeNode({ id: treeNode.id, checked: isCheck });
|
// 更新场景数据
|
_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);
|
this.checkTreeNode({
|
id: data.checkedNodes[index].id,
|
checked: false,
|
});
|
}
|
}
|
},
|
// 定位
|
flyTo(treeNode) {
|
_treeTool.flyTo(treeNode);
|
},
|
|
},
|
};
|
</script>
|
|
<style scoped>
|
/* yhadd */
|
.el-tree {
|
background: transparent;
|
color: white;
|
}
|
|
.el-tree /deep/ .el-tree-node__content {
|
background-color: transparent !important;
|
}
|
|
.el-tree /deep/ .el-tree-node__content:hover {
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
}
|
|
.el-tree /deep/ .is-current>.el-tree-node__content {
|
background-color: rgba(255, 255, 255, 0.4) !important;
|
font-size: 14px;
|
}
|
|
.closeBtn {
|
color: white;
|
position: relative;
|
height: 42px;
|
line-height: 42px;
|
font-size: 17px;
|
padding-left: 10px;
|
}
|
|
.closeSpan {
|
position: absolute;
|
font-size: 30px;
|
right: 0;
|
/* color: gray; */
|
color: white;
|
transition: 1s;
|
}
|
|
hr {
|
width: 114%;
|
margin: 11px 0;
|
margin-left: -14px;
|
}
|
|
.closeSpan:hover {
|
cursor: pointer;
|
transform: rotateZ(90deg);
|
}
|
|
/* yhadd */
|
.layerTreeContainer {
|
color: white;
|
width: 320px;
|
height: 360px;
|
/* margin: 20px 0; */
|
}
|
|
.layerTree {
|
color: white;
|
max-height: 355px;
|
margin-bottom: 2px;
|
overflow-y: auto;
|
overflow-x: auto;
|
}
|
|
.layerTree::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px;
|
/*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
scrollbar-arrow-color: red;
|
}
|
|
.layerTree::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
|
box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.5);
|
scrollbar-arrow-color: red;
|
}
|
|
.layerTree::-webkit-scrollbar-track {
|
-webkit-box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
box-shadow: inset 0 0 5px rgba(218, 218, 218, 0.2);
|
border-radius: 0;
|
background: rgba(218, 218, 218, 0.1);
|
}
|
|
.left-close {
|
position: absolute;
|
bottom: 0;
|
right: 0;
|
cursor: pointer;
|
}
|
</style>
|