Cesium 实战 - 调整饱和度、对比度等参数，加载夜晚模式

三维地图夜晚模式一般用于大屏展示以及体现晚上效果。

设置参与跟暗黑模式类似，只是这里加了大气参数。

本文包括渲染美化影像底图核心代码、完整代码以及在线示例。

渲染美化影像底图核心代码

这里放上核心代码：


/**
 * @todo 开启夜晚模式
 * @param {Object} options - 选项参数
 */
function openNightMode(options) {
    options = {
        showGroundAtmosphere: false,
        enableLighting: false,
        atmosphereBrightnessShift: -0.43,
        // 图层亮度
        brightness: 0.3,
        // 大气亮度
        brightnessShift: 0.3,
        ...options
    };

    const scene = viewer.scene;

    // 记录原始值
    origin = {
        showGroundAtmosphere: scene.globe.showGroundAtmosphere,
        enableLighting: scene.globe.enableLighting,
        atmosphereBrightnessShift: scene.globe.atmosphereBrightnessShift,
        brightnessShift: scene.skyAtmosphere.brightnessShift
    };

    // 更新参数配置
    scene.globe.showGroundAtmosphere = options.showGroundAtmosphere;
    scene.globe.enableLighting = options.enableLighting;
    scene.globe.atmosphereBrightnessShift = options.atmosphereBrightnessShift;

    // 获取所有图层
    const imageryLayers = viewer.imageryLayers;

    if (imageryLayers.length > 0) {
        // 这里只设置底图和注记
        const layer = imageryLayers.get(0);
        const layer2 = imageryLayers.length > 1 ? imageryLayers.get(1) : undefined;
        origin.brightnessTile = layer.brightness;
        origin.brightnessLabel = layer2 && layer2.brightness;
        layer.brightness = options.brightness;
        layer2 && (layer2.brightness = options.brightness);
    }
    scene.skyAtmosphere.brightnessShift = options.brightnessShift;

}

完整代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8"/>
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Cesium night mode</title>
    <script src="http://openlayers.vip/examples/csdn/Cesium.js"></script>
    <script src="./cesium_init.js"></script>
    <script src="http://www.openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script>
    <style>
        @import url(./Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>

    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<body>
<button id="openNightMode" onClick="openNightMode()">夜晚模式</button>
<button id="closeNightModeFunc" onClick="closeNightMode()">还原</button>

<div id="cesiumContainer"></div>
<script>


    // 创建三维球
    const viewer = init();

    // 美化影像图层
    const imageLayer = viewer.imageryLayers._layers[0];
    // 原始参数
    let origin;

    /**
     * @todo 开启夜晚模式
     * @param {Object} options - 选项参数
     */
    function openNightMode(options) {
        options = {
            showGroundAtmosphere: false,
            enableLighting: false,
            atmosphereBrightnessShift: -0.43,
            // 图层亮度
            brightness: 0.3,
            // 大气亮度
            brightnessShift: 0.3,
            ...options
        };

        const scene = viewer.scene;

        // 记录原始值
        origin = {
            showGroundAtmosphere: scene.globe.showGroundAtmosphere,
            enableLighting: scene.globe.enableLighting,
            atmosphereBrightnessShift: scene.globe.atmosphereBrightnessShift,
            brightnessShift: scene.skyAtmosphere.brightnessShift
        };

        // 更新参数配置
        scene.globe.showGroundAtmosphere = options.showGroundAtmosphere;
        scene.globe.enableLighting = options.enableLighting;
        scene.globe.atmosphereBrightnessShift = options.atmosphereBrightnessShift;

        // 获取所有图层
        const imageryLayers = viewer.imageryLayers;

        if (imageryLayers.length > 0) {
            // 这里只设置底图和注记
            const layer = imageryLayers.get(0);
            const layer2 = imageryLayers.length > 1 ? imageryLayers.get(1) : undefined;
            origin.brightnessTile = layer.brightness;
            origin.brightnessLabel = layer2 && layer2.brightness;
            layer.brightness = options.brightness;
            layer2 && (layer2.brightness = options.brightness);
        }
        scene.skyAtmosphere.brightnessShift = options.brightnessShift;

    }

    /**
     * @todo 关闭夜晚模式
     */
    function closeNightMode() {
        const scene = viewer.scene;

        scene.globe.showGroundAtmosphere = origin.showGroundAtmosphere;
        scene.globe.enableLighting = origin.enableLighting;
        scene.globe.atmosphereBrightnessShift = origin.atmosphereBrightnessShift;
        
        const imageryLayers = viewer.imageryLayers;
        if (imageryLayers.length > 0) {
            const layer = imageryLayers.get(0);
            const layer2 = imageryLayers.get(1);
            layer.brightness = origin.brightnessTile;
            layer2.brightness = origin.brightnessLabel;
        }
        scene.skyAtmosphere.brightnessShift = origin.brightnessShift;
    }

</script>
</body>
</html>

Cesium 实战 - 调整饱和度、对比度等参数，加载夜晚模式-LMLPHP

在线示例

Cesium 在线示例：Cesium 实战 - 调整饱和度、对比度等参数，加载夜晚模式

非科班Java出身GISer

Cesium 实战 - 调整饱和度、对比度等参数，加载夜晚模式

Cesium 实战 - 调整饱和度、对比度等参数，加载夜晚模式

渲染美化影像底图核心代码

完整代码：

在线示例