vue2中实现cesium的分屏联动效果

要实现Vue2中的cesium分屏联动效果，可以按照以下步骤进行：

1. 在Vue组件中引入Cesium库并创建Cesium Viewer实例。

import Cesium from 'cesium/Cesium';
import 'cesium/Widgets/widgets.css';

export default {
  data () {
    return {
      viewer1: null, // 第一个Viewer实例
      viewer2: null // 第二个Viewer实例
    }
  },
  mounted () {
    // 创建第一个Viewer实例
    this.viewer1 = new Cesium.Viewer('cesiumContainer1');
    // 创建第二个Viewer实例
    this.viewer2 = new Cesium.Viewer('cesiumContainer2');
  }
}

2. 在组件中创建两个div容器，分别用于显示两个Viewer实例的地图。

<template>
  <div>
    <div id="cesiumContainer1"></div>
    <div id="cesiumContainer2"></div>
  </div>
</template>

3. 在组件的生命周期钩子函数中，监听两个Viewer实例的视图变化事件，实现分屏联动的效果。

mounted () {
  // 创建第一个Viewer实例
  this.viewer1 = new Cesium.Viewer('cesiumContainer1');
  // 创建第二个Viewer实例
  this.viewer2 = new Cesium.Viewer('cesiumContainer2');

  // 监听第一个Viewer实例的视图变化事件
  this.viewer1.camera.moveEnd.addEventListener(() => {
    // 获取第一个Viewer实例的相机位置
    const position1 = this.viewer1.camera.position;
    // 将第二个Viewer实例的相机位置设置为第一个Viewer实例的相机位置
    this.viewer2.camera.flyTo({
      destination: position1
    });
  });

  // 监听第二个Viewer实例的视图变化事件
  this.viewer2.camera.moveEnd.addEventListener(() => {
    // 获取第二个Viewer实例的相机位置
    const position2 = this.viewer2.camera.position;
    // 将第一个Viewer实例的相机位置设置为第二个Viewer实例的相机位置
    this.viewer1.camera.flyTo({
      destination: position2
    });
  });
}

通过以上步骤，就可以在Vue2中实现cesium的分屏联动效果了。