cesium实现卷帘分屏效果

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

右弦GISer

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

阅读量5.8k

点赞数 3

分类专栏： cesium 文章标签： gis cesium

本文链接：https://blog.csdn.net/weixin_45782925/article/details/123121883

版权

cesium 专栏收录该内容

122 篇文章

订阅专栏

本文详细介绍了如何使用Cesium实现地图的卷帘分屏效果。通过设置ImageryLayer的splitDirection属性和scene的imagerySplitPosition属性，可以创建一个地图层在左侧显示，另一个全屏显示的效果。首先创建一个垂直分屏线的div，并设置其样式。然后，创建Cesium Viewer，并加载两个图层，分别设置分屏显示和分屏位置。最终，通过调整分屏线的位置来控制图层的显示范围。

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

文章目录

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;