Cesium 卷帘分析

发布时间 2023-05-05 15:45:06作者: 邢韬

仓库里更新了卷帘功能,简单记录一下。

卷帘功能如下图所示,将地球分为左右两块,通过中间的卷帘进行滑动,可以有效地进行左右对比,针对序列数据有良好的展示效果。

如下接口,Cesium 本身就支持我们针对地球左右两侧显示不同的图层。

 故我们只需要对加载的图层设置 SplitDirection 属性就可以了。

// 左侧
let baseLayerL = viewer.imageryLayers.addImageryProvider(layer1);
baseLayerL.splitDirection = Cesium.ImagerySplitDirection.LEFT;
// 右侧
let baseLayerR = viewer.imageryLayers.addImageryProvider(layer2);
baseLayerR.splitDirection = Cesium.ImagerySplitDirection.RIGHT;

此时卷帘还并未出现,因为未设置卷帘位置,需要设置场景 scene 中的 splitPosition 属性,取值范围为 0.0 - 1.0,根据需要进行设置即可。

viewer.scene.splitPosition = 0.5;

若要设置分割线的滑动效果,只需根据需求配置鼠标事件即可,此处不多赘述。

完整版请移步LiZzhi/cesium-plugin (github.com),如果对您有帮助,请给我一颗star,谢谢。