cesium实现卷帘分屏效果

1.实现效果

2.实现方法

2.1实现思路

参考官方沙盒分屏示例：传送门

为实现卷帘分屏效果，思路是添加两个图层，底图全部显示，而上层图层控制只在左侧显示。

（1）设置图层分区显示
通过ImageryLayer的splitDirection属性可以设置当前图层的显示区域，API：传送门

可以设置当前图层在左侧，右侧还是全图显示。

（2）设置分区位置
通过scene类的imagerySplitPosition属性进行设置，API：传送门

2.2具体代码

（1）创建分屏线div
首先需要创建竖直的分屏线，可以通过设置div的样式实现。

// 创建div
<div id='split'></div>

// 设置样式
<style>
    #split {
        position: absolute;
        left: 50%;
        top: 0;
        background-color: red;
        width: 3px;
        height: 100%;
    }
</style>

（2）创建地图viewer，并添加图层，这里的两个图层使用默认必应底图和OSM在线暗色风格地图。

const viewer = new Cesium.Viewer("cesiumContainer");

// 加载OSM在线地图（黑色风格）
const layerLeft = viewer.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
        url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
        subdomains: ["a", "b", "c", "d"],
    })
);

（3）设置图层分屏显示与分屏位置

通过分屏线与屏幕左侧偏移量和其父div宽度的比值作为图层左右分屏的比值，即左侧地图显示占全图的比例。

// 设置分屏显示
layerLeft.splitDirection = Cesium.ImagerySplitDirection.LEFT;

// 设置分屏位置
const split = document.getElementById("split");
viewer.scene.imagerySplitPosition = split.offsetLeft / split.parentElement.offsetWidth;