前言
这篇文章给大家介绍一下我是如何实现三维场景的图层控制的,并使用树组件来显示,方便操作。
思路
1.创建树组件
2.遍历图层信息
3.控制显示隐藏
创建树组件
我用的是antd的组件库,具体的使用方法大家可以参照ant—design官网的文档
<template>
<div id="alllayers" position="top-left" style="display:block;overflow:auto" v-if="isShow==='1'">
<a-tree
v-model="checkedKeys"
checkable
:default-expand-all=true
:auto-expand-parent="autoExpandParent"
:selected-keys="selectedKeys"
:tree-data="treeData"
@expand="onExpand"
@select="onSelect"
@check='onCheck'
/>
</div>
</template>
<script>
export default {
name:'show3D',
data(){
return{
// expandedKeys: [],
//自动展开父节点--
autoExpandParent: true,
checkedKeys: [],
selectedKeys: [],
mylist:undefined,
treeData :[{
title: '图层',
key: '图层',
children: []
},
],
}
</script>
<style>
#alllayers{
margin-left: 8px;
margin-top:8px ;
padding: 16px;
height: 100%;
border-radius: 5px;
position: fixed;
z-index: 999;
background: white;
opacity:0.85;
}
</style>
遍历图层信息
这一块得根据你的图层信息来拿,我们的图层信息肯定是不一样的,我这边返回的是 建筑@XX一楼 类似这样格式,根据自己的格式创建好对应的树。
mounted(){
var promise = viewer.scene.open(this.url);
Cesium.when(promise, (layers)=> {
var listlayers = layers;
window.earth = layers
let layer = scene.layers.find(1)
listlayers.forEach((res,i) => {
var layername = res.name.split("@");
tcObj={
title:layername[1],
key:layername[1],
children:[]
}
// 数组不为空
if(myChildren.length !=0){
// 判断是否重复
var aa = myChildren.findIndex( item => item.title === layername[1] )
if(aa == -1){
myChildren.push(tcObj)
}
}else{
myChildren.push(tcObj)
}
});
listlayers.forEach((res,i) => {
var layername1 = res.name.split("@");
//判断是否存在
var aa = myChildren.findIndex( item => item.title === layername1[1] )
tcObj={
title:layername1[0],
key:layername1[0],
id:res.id
}
myChildren[aa].children.push(tcObj)
})
})
this.treeData[0].children = myChildren
控制显示隐藏
这里的window.earth是前面拿到的layers,思路大概就是将layers遍历,根据图层的名字进行匹配,然后layers里面自带了visible这个属性,最初我找到的办法都是拿取三维数据,其实这个办法就简单很多了,改变自带的属性值就好了。
我只用了check的方法,select没有用到。
methods:{
myunchoosed(){
window.earth.forEach(res=>{
res.visible=true
})
},
//展开
onExpand(expandedKeys) {
this.expandedKeys = expandedKeys;
// this.autoExpandParent = false;
},
//选中
onCheck(checkedKeys,e) {
this.checkedKeys = checkedKeys;
this.myunchoosed()
checkedKeys.forEach(res=>{
window.earth.forEach(res1=>{
if(res1.name.indexOf(res)>-1){
res1.visible=false
}
})
})
},
//点击
onSelect(selectedKeys, info) {
this.selectedKeys = selectedKeys;
},
}