cesium 分屏对比

 

token记得换成您自己的！！！ 

申请cesium的token 官网【Cesium: The Platform for 3D Geospatial】

<template>
  <!-- <div id="cesiumContatiner">
    <div id="slider"></div>
  </div> -->
  <div class="container">
    <!-- <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div> -->
    <div id="mapContainer1"></div>
    <div id="mapContainer2"></div>
    <div id="mapContainer3"></div>
    <div id="mapContainer4"></div>
  </div>
</template>
<!-- 绘制面并且编辑 -->
<script setup lang="ts">
import * as Cesium from 'cesium';
import { ref, watch, reactive, toRefs, onMounted } from 'vue';
import * as turf from '@turf/turf';
let viewer1: any;
let viewer2,viewer3,viewer4;
// 地图实例
let viewer: any;

onMounted(() => {
  // 设置cesium token
  Cesium.Ion.defaultAccessToken =
    '换成您自己的token';

  viewer1 = GetCesiumViewer('mapContainer1');
  viewer2 = GetCesiumViewer('mapContainer2');
  viewer3 = GetCesiumViewer('mapContainer3');
  viewer4 = GetCesiumViewer('mapContainer4');

  //   //循环监听每一屏变化
  setManyView(viewer1, viewer2, viewer3, viewer4);
  setManyView(viewer2, viewer3,viewer4,viewer1);
  setManyView(viewer3, viewer4,viewer1,viewer2);
  setManyView(viewer4, viewer3,viewer2,viewer1);
});

function GetCesiumViewer(cesiumContatiner: string) {
  // // 创建自定义图层
  const esri = new Cesium.ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    // enablePickFeatures: false,
  });

  // 【控件】
  viewer = new Cesium.Viewer(cesiumContatiner, {
    timeline: false, // 时间轴
    animation: false, // 动画小组件
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    sceneModePicker: false, // 投影方式，切换2D、3D 和 Columbus View (CV) 模式。
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    navigationHelpButton: false, // 帮助按钮
    fullscreenButton: false, // 全屏按钮

    // vrButton: false, // VR模式
    selectionIndicator: false, //是否显示选取指示器组件
    // shouldAnimate: true, // 自动播放动画控件
    // shadows: true, // 是否显示光照投射的阴影
    // terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, // 地质接收阴影`
    infoBox: false, // 信息框
    //
    terrainProvider:
      cesiumContatiner == ('mapContainer2'||'mapContainer3')
        ? new Cesium.CesiumTerrainProvider({
            url: 'http://data.marsgis.cn/terrain',
          })
        : undefined,
    imageryProvider: cesiumContatiner == 'mapContainer2'   ? esri :cesiumContatiner == 'mapContainer3'   ?esri: undefined, //自定义图层，默认是谷歌的影响图层
    scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
  });

  // 隐藏logo
  viewer._cesiumWidget._creditContainer.style.display = 'none';

  let destination = Cesium.Cartesian3.fromDegrees(116.3974, 39.9087, 1000); // 北京天安门广场的经纬度坐标及高度
  viewer.camera.flyTo({
    destination: destination,
    duration: 2, // 飞行动画持续时间（单位：秒）
  });
  return viewer;
}

function setManyView(viewer1:any, viewer2:any, viewer3?:any,viewer4?:any) {
  const syncView = () => {
    // 获取第一个viewer的相机视角数据
    const { positionWC, heading, pitch, roll, up, _direction } =
      viewer1.scene.camera;

    // 设置另外两屏/多屏视角
    viewer2.camera.setView({
      destination: positionWC,
      orientation: {
        heading: heading,
        pitch: pitch,
        roll: roll,
        up: up,
        direction: _direction,
      },
    });
    viewer3.camera.setView({
        destination: positionWC,
        orientation: {
            heading: heading,
            pitch: pitch,
            roll: roll,
            up: up,
            direction: _direction
        }
    });
    viewer4.camera.setView({
        destination: positionWC,
        orientation: {
            heading: heading,
            pitch: pitch,
            roll: roll,
            up: up,
            direction: _direction
        }
    });
  };

  //camera监听函数
  viewer1.camera.changed.addEventListener(syncView);
  //设置触发监听函数的时间
  viewer1.camera.percentageChanged = 0.01;
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
   width: 100%;
   height: 100%;
  justify-content: space-between;
   flex-wrap: wrap;
} 
div {
width: 49.9%;
height: 50%;
background: rgb(0, 247, 255);
  }

/* #mapContainer1 {
  width: 50%;
  position: absolute;
  padding: 0;
  margin: 0;
  height: 100%;
}

#mapContainer2 {
  width: 50%;
  left: 50%;
  position: absolute;
  padding: 0;
  margin: 0;
  height: 100%;
} */

/* /deep/.cesium-widget{
  height: 911px
}
  */
</style>