cesium实现昼夜交替效果

Cesium实战系列文章总目录： 传送门

1.实现效果

2.实现方法

2.1实现思路

（1）加载两个图层
为模拟昼夜更替效果，首先需要添加两个地图图层，即白天和夜晚图层，这里使用OSM标准风格地图和暗色系地图来模拟白天和夜晚图层效果。
（2）开启场景光照
使用scene类的enableLighting属性开启场景光照，API：传送门

（3）设置透明度
通过imageryLayer类的dayAlpha或者nightAlpha属性设置透明度，API：传送门
（4）开启动画
为更好体现昼夜动态更替效果，需要开启动画，并加快时间变化速度，这里设置为5000倍。

通过clock类的shouldAnimate开启动画，API：传送门

使用clock类的multipliter属性，设置时间变化速度，API：传送门

2.2具体代码

具体实现代码如下：

// 昼夜交替
updateLighting(viewer);

/**
 * @description: 昼夜交替效果
 * @param {*} _viewer
 * @return {*}
 */
function updateLighting(_viewer) {
    // OSM标准风格地图
    const dayLayer = _viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: 'https://tile-{s}.openstreetmap.fr/hot/{z}/{x}/{y}.png',
            subdomains: ["a", "b", "c", "d"],
        })
    );

    // OSM暗色系地图
    const nightLayer = _viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
            url: "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png",
            subdomains: ["a", "b", "c", "d"],
        })
    );
    // 启用光照
    _viewer.scene.globe.enableLighting = true;
    _viewer.clock.shouldAnimate = true;
    _viewer.clock.multiplier = 5000;
    nightLayer.dayAlpha = 0.0;
}