Cesium【卷帘】、图层对比。

最新推荐文章于 2025-03-19 09:29:01 发布

Oxygen_liu

最新推荐文章于 2025-03-19 09:29:01 发布

阅读量2.6k

点赞数 2

分类专栏： Vue3 Cesium TS 文章标签： javascript 前端 typescript

本文链接：https://blog.youkuaiyun.com/qq_41400354/article/details/124631590

版权

TS 同时被 3 个专栏收录

25 篇文章

订阅专栏

21 篇文章

订阅专栏

Cesium

18 篇文章

订阅专栏

本文介绍了如何在Cesium中实现地图卷帘效果，通过添加两个高德地图影像层并设置SplitDirection属性，分别置于左右两侧。同时，详细展示了使用ScreenSpaceEventHandler监听滑动事件来动态调整卷帘位置。此外，还演示了如何加载3D Tileset，并调整其卷帘方向，提供了一种3D场景交互的新方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运用API .splitDirection

在这里插入图片描述

// 添加图层
const { Viewer } = window
const viewer:Cesium.Viewer = Viewer
const layer1 = new Cesium.UrlTemplateImageryProvider({
	url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
	minimumLevel: 1,
	maximumLevel: 18,
});
const layer2 = new Cesium.UrlTemplateImageryProvider({
	url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
	minimumLevel: 1,
	maximumLevel: 18,
 });

两个影像均来自高德地图

const layers = viewer.imageryLayers;
const earthAtRight = layers.addImageryProvider(layer1);
const earthAtLeft = layers.addImageryProvider(layer2);

将影像添加到cesium图层中

earthAtLeft.splitDirection = Cesium.SplitDirection.LEFT;
earthAtRight.splitDirection = Cesium.SplitDirection.RIGHT;

设置影像位于左边或者右边

const init = (viewer: Cesium.Viewer) => {
  if(handler){
    handler.destroy()
    handler = null
  }
  const slider = document.getElementById("slider");
  if (slider) {
    const dom: HTMLCanvasElement = <HTMLCanvasElement>slider;
    if (dom.parentElement) {
      handler = new Cesium.ScreenSpaceEventHandler(dom);
      viewer.scene.splitPosition =
        dom.offsetLeft / dom.parentElement.offsetWidth;
      let moveActive = false;
      function move(movement: any) {
        if (!moveActive) {
          return;
        }
        const relativeOffset = movement.endPosition.x;
        if (dom.parentElement) {
          const splitPosition =
            (dom.offsetLeft + relativeOffset) / dom.parentElement?.offsetWidth;
          dom.style.left = `${100.0 * splitPosition}%`;
          viewer.scene.splitPosition = splitPosition; // 设置卷帘左右分区范围(0-1)之间
        }
      }
      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);
    }
  }
};

3Dtileset卷帘

const { Viewer } = window
  const viewer:Cesium.Viewer = Viewer
 const  tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
      // url: './titles/tileset.json'
      url: "./titles/dyt/tileset.json",
      maximumScreenSpaceError: 0.8, //空间误差
      maximumMemoryUsage: 100, //最大内容
    })
  ) as Cesium.Cesium3DTileset;
  viewer.zoomTo(tileset);
  tileset.readyPromise.then((tile)=> {
     viewer.scene.camera.flyToBoundingSphere(tile.boundingSphere);
  })
  tileset.splitDirection = Cesium.SplitDirection.RIGHT;

初始化在HTML中添加个dom元素id值为slider样式为

#slider {
  position: absolute;
  left: 50%;
  top: 0px;
  background-color: #d3d3d3;
  width: 5px;
  height: 100%;
  z-index: 9999;
}

#slider:hover {
  cursor: ew-resize;
}