Cesium实现卷帘分屏效果

最新推荐文章于 2024-12-02 17:14:19 发布

原创最新推荐文章于 2024-12-02 17:14:19 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

Cesium 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一个基于Cesium的WebGIS分屏显示示例，通过简单的代码实现了地图的左右分屏显示，并同步滑块位置与分屏位置。该示例使用了OpenStreetMap作为底图，并提供了详细的代码实现。

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

项目地址

https://github.com/zhengjie9510/webgis-demo

实现效果

请添加图片描述

实现方法

参考官方分屏示例：传送门
具体代码

/**
* @param {Cesium.Viewer} viewer 控制点
*/
split: function (viewer) {
  const earthAtNight = viewer.imageryLayers.addImageryProvider(
    new Cesium.OpenStreetMapImageryProvider({
      url: 'https://a.tile.openstreetmap.org/'
    })
  );
  earthAtNight.splitDirection = Cesium.SplitDirection.RIGHT; // Only show to the left of the slider.

  // Sync the position of the slider with the split position
  const slider = document.getElementById("slider");
  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);
}