在vue2中cesium怎么让点击按钮的时候出现分屏效果

在 Vue.js 2.x 中使用 Cesium 实现点击按钮时出现分屏效果，你可以使用 Vue.js 的生命周期函数和 Cesium 的 `Scene` 对象和 `Camera` 对象。

以下是一个简单的示例代码：

<template>
  <div>
    <div ref="cesiumContainer" class="cesiumContainer"></div>
    <div class="buttonContainer">
      <button @click="splitScreen">Split Screen</button>
    </div>
  </div>
</template>

<script>
import * as Cesium from "cesium";

export default {
  data() {
    return {
      viewer1: null,
      viewer2: null,
      camera1: null,
      camera2: null,
      scene1: null,
      scene2: null,
      isSplit: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.viewer1 = new Cesium.Viewer(this.$refs.cesiumContainer, {
        animation: false,
        timeline: false
      });
      this.viewer2 = new Cesium.Viewer(this.$refs.cesiumContainer, {
        animation: false,
        timeline: false
      });
      this.viewer2.container.style.position = "absolute";
      this.viewer2.container.style.top = "50%";
      this.viewer2.container.style.height = "50%";

      this.scene1 = this.viewer1.scene;
      this.scene2 = this.viewer2.scene;
      this.camera1 = this.scene1.camera;
      this.camera2 = this.scene2.camera;

      this.scene1.postRender.addEventListener(() => {
        if (this.isSplit) {
          this.camera2.setView({
            destination: this.camera1.position,
            orientation: this.camera1.headingPitchRoll
          });
        }
      });

      this.scene2.postRender.addEventListener(() => {
        if (this.isSplit) {
          this.camera1.setView({
            destination: this.camera2.position,
            orientation: this.camera2.headingPitchRoll
          });
        }
      });
    },
    splitScreen() {
      this.isSplit = !this.isSplit;
      if (this.isSplit) {
        this.viewer1.container.style.width = "50%";
        this.viewer1.container.style.height = "100%";
        this.viewer2.container.style.width = "50%";
        this.viewer2.container.style.height = "50%";
        this.viewer2.container.style.left = "50%";
        this.viewer2.container.style.top = "0";
        this.viewer2.container.style.zIndex = "0";
      } else {
        this.viewer1.container.style.width = "100%";
        this.viewer1.container.style.height = "100%";
        this.viewer2.container.style.width = "0";
        this.viewer2.container.style.height = "0";
        this.viewer2.container.style.left = "100%";
        this.viewer2.container.style.top = "100%";
        this.viewer2.container.style.zIndex = "-1";
      }
    }
  }
};
</script>

<style scoped>
.cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: absolute;
}

.buttonContainer {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}

button {
  padding: 10px;
  font-size: 16px;
}
</style>

在此示例中，我们使用 `ref` 属性将 `div` 元素设置为 Cesium 容器，并在 `mounted` 生命周期函数中初始化 `Viewer` 对象和相应的 `Scene` 对象和 `Camera` 对象。当点击“Split Screen”按钮时，我们使用 `isSplit` 变量来控制分屏状态，然后根据状态设置两个 `Viewer` 对象的样式。

我们还使用 `Scene` 对象的 `postRender` 事件来监听每个 `Viewer` 对象的渲染，然后使用 `Camera` 对象的 `setView` 方法将其视图设置为分屏视图。

需要注意的是，这只是一个简单的示例代码，如果你想要实现更复杂的分屏效果，你需要对代码进行适当的修改。