【Vue中使用Cesium】Vue里跨组件（兄弟组件）之间控制Cesium中3dTiles模型的显示和隐藏

---

前言

这是刚接触cesium前端开发时的小问题，记录一下

一、先创建一个cesium.vue，并加载3DTiles模型

const fw_tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: "/static/data/fw1/tileset.json", //数据路径
          maximumScreenSpaceError: 2, //最大的屏幕空间误差
          maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
        })
      );
      viewer.flyTo(fw_tileset);

二、添加显示与隐藏

fw_tileset.show = false;//默认为false

三、创建一个bus.js文件，用于组件之间传值

import Vue from 'vue';
export default new Vue();

四、在创建另一个组件Leftside.vue用来控制cesium.vue里面的模型显示与隐藏，在实际项目中，这里通常作为目录

1、定义一个变量为fw_show:false

fw_show: false

2、引入之前创建的bus.js文件

import bus from "@/common/bus";

3、开始传值，在leftside.vue里添加一个checkbox选中框，当状态为选中时，其value为true,传过去的值就是true,否则相反。这里使用bus.$emit传值，事件名为checkshow，先将该变量进行取反，toshowtiles为事件名。

<div class="checkbox">
        <input
          type="checkbox"
          :value="fw_show"
          id="check"
          @change="checkshow"
        />

 
 methods:{
 checkshow() {
      this.fw_show = !this.fw_show;
      bus.$emit("toshowtiles", this.fw_show);
    }
    }

五、在Cesium.vue中接收传的fw_show变量

1、同样定义一个fw_show,也可以定义其他名字

fw_show:false

2、引入之前的bus.js

import bus from "@/common/bus";

3、接收传的值，这里使用bus.$on接收，接收过数据后定义一个变量fw_tileset,令它的.show等于传过来的值。

mounted(){
bus.$on("toshowtiles", (data) => {
      this.fw_show = data;
      this.fw_tileset.show = this.fw_show;
    });
    }

4、最关键的一步，就是如何将cesium中的模型显示变量与传输过来的值进行互通。控制模型显示与隐藏的是fw_tileset（模型实例名），上一步已经操作了，现在只需要让this.fw_tileset=fw_tileset

this.fw_tileset = fw_tileset;

---

六、不说了，上代码

cesium.vue

<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
#cesiumContainer {
  height: 100%;
}
</style>
<script>
import bus from "@/common/bus";
var Cesium = require("cesium/Cesium");
export default {
  name: "cesiumPage",
  data() {
    return {
        fw_show: false,
        fw_tileset: null,
    };
  },
  methods: {
    addcesium() {
      var cesiumContainer = document.getElementById("cesiumContainer");
      var viewer = new Cesium.Viewer("cesiumContainer", {
        geocoder: true,
        timeline: false,
        sceneModePicker: true,
        navigationHelpButton: false,
        infoBox: true,
        homeButton: true,
        animation: false,
      });
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80,22,130,50); //home定位到中国范围

      viewer.scene.debugShowFramesPerSecond = true;
      viewer._cesiumWidget._creditContainer.style.display = "none";
      const fw_tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
          url: "/static/data/fw1/tileset.json", //数据路径
          maximumScreenSpaceError: 2, //最大的屏幕空间误差
          maximumNumberOfLoadedTiles: 1000, //最大加载瓦片个数
        })
      );
      viewer.flyTo(fw_tileset);
      fw_tileset.show = false;
      this.fw_tileset = fw_tileset;
    },
  },
  mounted() {
    this.addcesium();
    bus.$on("toshowtiles", (data) => {
      this.show = data;
      console.log(this.show.fw_show, "sdkssj");
      this.fw_tileset.show = this.show.fw_show;
    });
  },
};
</script>

Leftside.vue

<template>
  <el-menu
    class="el-menu-vertical-demo"
    :collapse="isCollapse"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
     <div id="datatree" class="tree">
        <p>目录</p>
         <div class="checkbox">
        <input
          type="checkbox"
          :value="fw_show"
          id="check"
          @change="checkshow"
        />
        <label for="showtiles">fw</label></br>
      </div></div></div>
   </el-menu>
</template>

<script>
import bus from "@/common/bus";
export default {
  data() {
    return {
      isCollapse: false,
      show: {
        fw_show: false,
      },
    };
  },
  methods: {
    checkshow() {
      this.show.fw_show = !this.show.fw_show;
      bus.$emit("toshowtiles", this.show);
    },
  },
};
</script>
<style>
h3 {
  color: #ffffff;
  text-align: center;
  line-height: 48px;
}
.el-menu {
  height: 100%;
  border: none;
  width: 100px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  min-height: 400px;
}
</style>

bus.js

import Vue from 'vue';
export default new Vue();

七、效果图

隐藏

显示

总结

作为一名开发小白，今天就讲这么多，主要是讲了cesium加载3dtiles模型并如何控制显示和隐藏的方法，额外还讲了组件之间传值的其中一种方法（兄弟传值），请各位大佬批评指正，后续我会加强学习，还会有更多的内容分享给大家。