<template>
|
<div class="project_tree" :class="{ left_main_show: !leftMenuOpen }">
|
<div class="tree-container">
|
<el-tree
|
:data="treeData"
|
show-checkbox
|
node-key="id"
|
default-expand-all
|
:props="defaultProps"
|
ref="tree"
|
class="el-tree"
|
@check-change="handleCheckChange"
|
>
|
<div
|
style="display: flex"
|
class="custom-tree-node"
|
slot-scope="{ node, data }"
|
>
|
<div style="margin-left: 0px; padding-left: 15px">
|
<i
|
v-if="data.children && data.children.length > 0"
|
style="color: yellow"
|
class="el-icon-folder-opened"
|
></i>
|
<i v-else style="color: skyblue" class="el-icon-folder-opened"></i>
|
</div>
|
|
<div
|
class="tree-label"
|
:title="node.label || '-'"
|
>
|
{{ node.label }}
|
</div>
|
</div>
|
</el-tree>
|
</div>
|
<div class="changeBaseLayer">
|
<div @click="changeMenulayer" class="CenDiv">
|
<div
|
id="cenBg"
|
v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
|
></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { right_menu, right_list, image_layer } from "@/assets/js/index.js"
|
|
import { perms_selectLayers } from "@/api/api.js"
|
|
export default {
|
data() {
|
return {
|
treeData: [],
|
defaultProps: {
|
children: "children",
|
label: "label",
|
},
|
typeIndex: null,
|
leftMenuOpen: false,
|
rightMenuOpen: false,
|
changeSelectStyle: null,
|
changeSelectli: null,
|
rightMenu: [],
|
rightList: [],
|
treeData: [],
|
centerFlag: false,
|
isActive: false,
|
isMenuLayer: true,
|
openEcharts: false,
|
}
|
},
|
|
mounted() {
|
this.rightList = right_list[0]
|
this.rightMenu = right_menu
|
this.changeSelectli = this.rightList[0].id
|
this.changeSelectStyle = this.rightMenu[0].id
|
this.addImageLayer()
|
},
|
methods: {
|
async addImageLayer() {
|
const data = await perms_selectLayers()
|
if (data.code != 200) {
|
return this.$message.error("图层列表查询失败")
|
}
|
var std = []
|
var layer_list = []
|
var layer_groups = []
|
for (var i in data.result) {
|
if (data.result[i].type == 1) {
|
layer_groups.push({
|
id: data.result[i].id,
|
label: data.result[i].cnName,
|
type: data.result[i].type,
|
isEdit: false,
|
children: [],
|
})
|
} else if (data.result[i].type == 2) {
|
if (data.result[i].url != null) {
|
var layer_entity = {
|
id: data.result[i].id,
|
pid: data.result[i].pid,
|
label: data.result[i].cnName,
|
resource: data.result[i].url,
|
type: data.result[i].type,
|
isEdit: false,
|
}
|
layer_list.push(layer_entity)
|
if (data.result[i].isShow == 1) {
|
std.push(data.result[i].id)
|
this.setAddImageLayer(layer_entity)
|
}
|
}
|
}
|
}
|
for (var i in layer_list) {
|
for (var j in layer_groups) {
|
if (layer_list[i].pid === layer_groups[j].id) {
|
layer_groups[j].children.push(layer_list[i])
|
}
|
}
|
}
|
this.treeData = layer_groups
|
|
this.$refs.tree.setCheckedKeys(std)
|
},
|
handleCheckChange(data, checked, indeterminate) {
|
if (data.children != null) return
|
var std = []
|
for (var i = 0; i < Viewer.imageryLayers._layers.length; i++) {
|
var val_id = Viewer.imageryLayers._layers[i].imageryProvider.name
|
if (val_id == data.label) {
|
std.push(data.label)
|
const img_layer = Viewer.imageryLayers._layers[i]
|
img_layer.show = checked
|
}
|
}
|
if (std.length == 0 && checked == true) {
|
this.setAddImageLayer(data)
|
}
|
},
|
setAddImageLayer(res) {
|
let layerWMS = new Cesium.WebMapServiceImageryProvider({
|
url: geoServerURl,
|
layers: res.resource,
|
parameters: {
|
transparent: true,
|
format: "image/png",
|
},
|
})
|
layerWMS.name = res.label
|
Viewer.imageryLayers.addImageryProvider(layerWMS)
|
},
|
changeMenulayer() {
|
this.isActive = !this.isActive
|
this.isMenuLayer = !this.isMenuLayer
|
this.setLayerVisible()
|
},
|
setLayerVisible() {
|
if (this.isActive == true) {
|
Viewer.imageryLayers._layers[1].show = true
|
Viewer.imageryLayers._layers[2].show = false
|
Viewer.imageryLayers._layers[3].show = false
|
} else {
|
Viewer.imageryLayers._layers[1].show = false
|
Viewer.imageryLayers._layers[2].show = true
|
Viewer.imageryLayers._layers[3].show = true
|
}
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.project_tree {
|
margin: 0;
|
width: 300px;
|
height: 100%;
|
transition: width 2s;
|
background: url("~@/assets/img/themic/左框.png") no-repeat center;
|
background-size: 100% 100%;
|
|
.tree-container {
|
margin: 10px;
|
height: 90%;
|
overflow-y: auto;
|
}
|
.changeBaseLayer {
|
width: 100%;
|
display: flex;
|
justify-content: flex-end;
|
overflow: hidden;
|
}
|
.CenDiv {
|
height: 40px;
|
width: 60px;
|
|
margin-right: 7%;
|
border-radius: 5px;
|
bottom: 3%;
|
}
|
|
// .CenDiv:hover {
|
|
// }
|
.active {
|
height: 40px;
|
width: 60px;
|
background: url("~@/assets/img/themic/默认的影像.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
.menuLayer {
|
height: 40px;
|
width: 60px;
|
background: url("~@/assets/img/themic/默认的底图.png") no-repeat center;
|
position: absolute;
|
background-size: 100% 100%;
|
border-radius: 5px;
|
}
|
}
|
</style>
|
|
<style lang="scss">
|
.leftContainer {
|
.project_tree {
|
.el-tree-node__content > label.el-checkbox {
|
margin-right: -30px;
|
}
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
visibility: hidden;
|
}
|
.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
|
display: block;
|
visibility: visible;
|
}
|
.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
|
display: none;
|
// visibility: hidden;
|
}
|
.tree-label {
|
padding-left: 10px;
|
font-size: 16px;
|
color: #fff;
|
}
|
}
|
}
|
</style>
|
