Cesium（三）图层控制组件结合vue开发

前言

这篇文章给大家介绍一下我是如何实现三维场景的图层控制的，并使用树组件来显示，方便操作。

思路

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;
    },
}

效果