cesium 卷帘对比【SplitDirection】看

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

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

使用自己的地址路径和图层打开下面函数方法

  ByIdsliders()

  // // 定义滑块移动事件的处理函数

  GetSplitDirection();

注释掉 GetSplitDirection3D();

<template>
  <div id="cesiumContatiner">
    <div id="slider"></div>
  </div>
  <!-- <div id="sliders">
    <div>
      <div>2023-01-03</div>
      <div>2024-01-03</div>
    </div>
  </div> -->
</template>
<!-- 绘制面并且编辑 -->
<script setup lang="ts">
import * as Cesium from 'cesium';

import { onMounted, reactive, ref, computed } from 'vue';
import * as turf from '@turf/turf';
import '../src/js/prompt/prompt.css';
import Prompt from './js/prompt/prompt';
// 地图实例
let viewer: any;

let isnoshow = ref(false);

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

  // // 创建自定义图层
  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, // 信息框

    // imageryProvider: esri, //自定义图层，默认是谷歌的影响图层
    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, 10000); // 北京天安门广场的经纬度坐标及高度
  // // 【111.261674,34.88179】
  pointerdefault();
  // viewer.camera.flyTo({
  //   destination: destination,
  //   duration: 2, // 飞行动画持续时间（单位：秒）
  // });

  // ByIdsliders()
  // // 定义滑块移动事件的处理函数
  // GetSplitDirection();

  GetSplitDirection3D();
});

function GetSplitDirection3D() {
  const slider = document.getElementById('slider') as any;

  const left = new Cesium.Cesium3DTileset({
    url: Cesium.IonResource.fromAssetId(69380),
  });
  viewer.scene.primitives.add(left);
  left.splitDirection = Cesium.SplitDirection.LEFT;

  viewer.zoomTo(left);
  // Sync the position of the slider with the split position

  viewer.scene.splitPosition =
    slider.offsetLeft / slider.parentElement.offsetWidth;

  const handler = new Cesium.ScreenSpaceEventHandler(slider);

  let moveActive = false;

  function move(movement) {
    if (!moveActive) {
      return;
    }

    const relativeOffset = movement.endPosition.x;
    const splitPosition =
      (slider.offsetLeft + relativeOffset) / slider.parentElement.offsetWidth;
    slider.style.left = `${100.0 * splitPosition}%`;
    viewer.scene.splitPosition = splitPosition;
  }

  handler.setInputAction(function () {
    moveActive = true;
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  handler.setInputAction(function () {
    moveActive = true;
  }, Cesium.ScreenSpaceEventType.PINCH_START);

  handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

  handler.setInputAction(function () {
    moveActive = false;
  }, Cesium.ScreenSpaceEventType.LEFT_UP);
  handler.setInputAction(function () {
    moveActive = false;
  }, Cesium.ScreenSpaceEventType.PINCH_END);
}

let moveActive = false;
const ByIdsliders = () => {
  // 获取滑块元素
  let sliders = document.getElementById('sliders') as any;
  // 设置分隔线位置与滑块位置同步
  viewer.scene.splitPosition =
    sliders.offsetLeft / sliders.parentElement.offsetWidth;
  // 创建一个新的屏幕空间事件处理对象
  const handler = new Cesium.ScreenSpaceEventHandler(sliders);
  // 设置鼠标按下事件处理函数
  handler.setInputAction(function () {
    moveActive = true; // 设置移动激活标志为true
  }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  handler.setInputAction(function () {
    moveActive = true; // 设置移动激活标志为true
  }, Cesium.ScreenSpaceEventType.PINCH_START);
  // 设置鼠标移动事件处理函数
  handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);
  // 设置鼠标抬起事件处理函数
  handler.setInputAction(function () {
    moveActive = false; // 设置移动激活标志为false
  }, Cesium.ScreenSpaceEventType.LEFT_UP);
  handler.setInputAction(function () {
    moveActive = false; // 设置移动激活标志为false
  }, Cesium.ScreenSpaceEventType.PINCH_END);
  let moveActive = false;

  function move(movement) {
    if (!moveActive) {
      return; // 如果不在移动状态，则返回不执行任何操作
    }
    const relativeOffset = movement.endPosition.x; // 获取滑块移动的相对偏移量
    const splitPosition =
      (sliders.offsetLeft + relativeOffset) / sliders.parentElement.offsetWidth; // 计算新的分割位置
    sliders.style.left = `${100.0 * splitPosition}%`; // 更新滑块的CSS位置
    viewer.scene.splitPosition = splitPosition; // 更新viewer的分隔线位置
  }
};

function GetSplitDirection() {
  const postitionA = Cesium.Cartesian3.fromDegrees(
    115.83172164888285,
    39.00629579223653,
    4000
  );
  viewer.camera.flyTo({
    destination: postitionA,
    // duration:3, //单位秒
    orientation: {
      heading: Cesium.Math.toRadians(0), // 方向 y 左右摇头
      pitch: Cesium.Math.toRadians(-90), // 倾斜角度 x  上下点头  -90看地面  0看前方  90看天上
      roll: 0, //z 歪头看
    },
    durationL: 5,
  });
  let tileMatrixLabels = {
    0: 'EPSG:4326:0',
    1: 'EPSG:4326:1',
    2: 'EPSG:4326:2',
    3: 'EPSG:4326:3',
    4: 'EPSG:4326:4',
    5: 'EPSG:4326:5',
    6: 'EPSG:4326:6',
    7: 'EPSG:4326:7',
    8: 'EPSG:4326:8',
    9: 'EPSG:4326:9',
    10: 'EPSG:4326:10',
    11: 'EPSG:4326:11',
    12: 'EPSG:4326:12',
    13: 'EPSG:4326:13',
    14: 'EPSG:4326:14',
    15: 'EPSG:4326:15',
    16: 'EPSG:4326:16',
    17: 'EPSG:4326:17',
    18: 'EPSG:4326:18',
    19: 'EPSG:4326:19',
    20: 'EPSG:4326:20',
    21: 'EPSG:4326:21',
  } as any;

  let earthAtLEFT = viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
      url: '路径地址',
      // layer: "cia", //xb:DXZ_07_240313
      layer: '返回的图层名称', //xb:DXZ_07_240313
      // style: "default",
      style: '',
      // tileMatrixSetID: "w",
      // format: "tiles",
      tileMatrixSetID: 'EPSG:4326',
      format: 'image/png',
      maximumLevel: 18,
      tileMatrixLabels: tileMatrixLabels,
      rectangle: Cesium.Rectangle.fromDegrees(
        115.82418362809926,
        39.00480774528325,
        115.83925966966642,
        39.007783839189806
      ),
      tilingScheme: new Cesium.GeographicTilingScheme({
        numberOfLevelZeroTilesX: 2,
        numberOfLevelZeroTilesY: 1,
      }),
    })
  );
  earthAtLEFT.splitDirection = Cesium.SplitDirection.LEFT;
}

// 添加小手
function pointerdefault() {
  // 添加小手
  viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
    const pickedObject = viewer.scene.pick(movement.endPosition);
    if (pickedObject && pickedObject.id) {
      viewer.container.style.cursor = 'pointer';
    } else {
      viewer.container.style.cursor = 'default';
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

// 随机数字
const buildUUID = () => {
  const hexList: string[] = [];
  for (let i = 0; i <= 15; i++) {
    hexList[i] = i.toString(16);
  }
  let uuid = '';
  for (let i = 1; i <= 36; i++) {
    if (i === 9 || i === 14 || i === 19 || i === 24) {
      uuid += '-';
    } else if (i === 15) {
      uuid += 4;
    } else if (i === 20) {
      uuid += hexList[(Math.random() * 4) | 8];
    } else {
      uuid += hexList[(Math.random() * 16) | 0];
    }
  }
  return uuid.replace(/-/g, '');
};
</script>

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

#slider {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #ea1b1bd8;
  width: 5px;
  height: 100%;
  z-index: 9999;
  border:1px solid #fff
}
/* #slider::before {
  content: '';
  display: inline-block;
   width: 5px;
  height: 100%;
  margin-left: -1px;
  color: #fff;
  border:1px solid #fff
} */
 
#slider:hover {
  cursor: ew-resize;
}
</style>
<style lang="scss" scoped>
#sliders {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #cccccc7c;
  width: 7px;
  height: 100%;
  margin-left: -10px;
  z-index: 1;

  > div {
    // width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid rgba($color: #00c3e6, $alpha: 1);

    > div {
      width: 100px;
      height: 40px;
      line-height: 40px;
      position: absolute;
      top: 20px;
      border: 1px solid rgba($color: #00c3e6, $alpha: 1);
      padding: 0 10px;
      color: #fff;
      background-color: rgba($color: #000000, $alpha: 0.3);
    }

    > div:nth-child(1) {
      border-radius: 10px 0;
      right: 5px;
    }

    > div:nth-child(2) {
      left: 5px;
      text-align: right;
      border-radius: 0 10px;
    }
  }
}
#sliders:hover {
  cursor: ew-resize;
}
</style>