【Cesium】实现卷帘对比

一、创建滑块

<style>
    @import url(../Build/CesiumUnminified/Widgets/widgets.css);
    @import url(./Sandcastle/templates/bucket.css);

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

    #slider:hover {
      cursor: ew-resize;
    }
  </style>
<body>
<div id="cesiumContainer" class="fullSize">
    <div id="slider"></div>
</div>
</body>

二、实现卷帘对比

    const viewer = new Cesium.Viewer('cesiumContainer');
    // 加载Cesium3DTileset切片模型
    const left = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(2367681) });
    viewer.scene.primitives.add(left);
    left.splitDirection = Cesium.SplitDirection.LEFT;
    viewer.zoomTo(left);

    // 创建Osm对比模型
    const right = Cesium.createOsmBuildings();
    viewer.scene.primitives.add(right);
    right.splitDirection = Cesium.SplitDirection.RIGHT;

    // 获取滑块和初始化位置
    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(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // 鼠标按下和拖动行为 触发move事件
    handler.setInputAction(function () {
        moveActive = true;
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

    // 鼠标放开释放move事件
    handler.setInputAction(function () {
        moveActive = false;
    }, Cesium.ScreenSpaceEventType.LEFT_UP);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/218421.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！