在vue2中实现cesium的分屏效果

要在 Vue2 中实现 Cesium 的分屏效果，可以使用 Cesium 的 `Viewer` 对象，并将其放置在 Vue 组件的 `mounted` 钩子中。

具体方法如下：

1. 在 `mounted` 钩子中创建两个 `Viewer` 对象，分别代表左右两个屏幕。

2. 将两个 `Viewer` 对象的 `container` 属性设置为不同的 DOM 元素，以实现分屏效果。

3. 在 `destroyed` 钩子中销毁两个 `Viewer` 对象，释放内存。

示例代码如下：

<template>
  <div class="cesium-container">
    <div class="cesium-left"></div>
    <div class="cesium-right"></div>
  </div>
</template>

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

export default {
  mounted() {
    // 创建左右两个 Viewer 对象
    this.viewerLeft = new Cesium.Viewer("cesium-left");
    this.viewerRight = new Cesium.Viewer("cesium-right");

    // 设置左右两个 Viewer 对象的属性
    this.viewerLeft.scene.globe.enableLighting = false;
    this.viewerRight.scene.globe.enableLighting = false;

    // 设置左右两个 Viewer 对象的 container 属性
    this.viewerLeft.container = "cesium-left";
    this.viewerRight.container = "cesium-right";
  },
  destroyed() {
    // 销毁左右两个 Viewer 对象
    this.viewerLeft.destroy();
    this.viewerRight.destroy();
  },
};
</script>

<style scoped>
.cesium-container {
  display: flex;
  height: 100%;
}
.cesium-left {
  flex: 1;
  height: 100%;
}
.cesium-right {
  flex: 1;
  height: 100%;
}
</style>

注意：在上述示例代码中，代码中的 `cesium-container` 、 `cesium-left` 、 `cesium-right` 分别代表 DOM 元素的 class 名称，需要在 CSS 样式表中定义相应的样式。