Cesium实现地球自转明暗分割，类似官网封面效果

本文链接：https://blog.youkuaiyun.com/Tonque/article/details/117086490

本文介绍了如何使用Cesium创建一个地球自转并展示昼夜交替效果的场景。通过结合Cesium的WebMapTileServiceImageryProvider加载天地图服务，以及调整图层透明度和光照设置，实现了地球的自转和昼夜转换。作者分享了代码实现过程，并展示了最终效果，但指出目前存在背景转动导致的不适感，暗示还有改进空间。

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

这几天博主没事看Cesium官网的时候，觉得首页的地球自转效果就很炫酷，想着自己也做一个，奈何想不到思路，在优快云和stackoverflow上也没有找到类似的功能，所以就只能自己造轮子了，这个效果在大屏展示上的效果很不错，希望感兴趣的老哥们和我一起想想办法。
在这里插入图片描述
这个就是首页的地球，它是可以转动的。
目前的思路，采用Cesium自带的卷帘分析，一面是谷歌影像，一面是夜景ION，然后实现一个自转的功能。

卷帘分析代码

 var viewer = new Cesium.Viewer("cesiumContainer", {
            animation: false,  //是否显示动画控件
            timeline: false, //是否显示时间线控件
            imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                    "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                    "&style=default&format=tiles&tk=你的天地图Key", //矢量地图
                // url: TDTURL_CONFIG.TDT_IMG_C,
                layer: "tdtImg_c",
                style: "default",
                format: "tiles",
                tileMatrixSetID: "c",
                subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                tilingScheme: new Cesium.GeographicTilingScheme(),
                tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
                maximumLevel: 18,
                show: false
            }),
            baseLayerPicker: false,
            infoBox: false,
        });
 
        //天地图影像中文标记服务（经纬度）
        var layer = viewer.imageryLayers.addImageryProvider(
            new Cesium.IonImageryProvider({ assetId: 3812 })
        );
        var layers = viewer.imageryLayers;
        // layers.addImageryProvider(tdtCva)
        var tdtVec = new Cesium.WebMapTileServiceImageryProvider({
          url: "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
                    "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                    "&style=default&format=tiles&tk=你的天地图Key", //矢量地图
                layer: "tdtCva",
          style: "default",
          format: "tiles",
          tileMatrixSetID: "c",
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          tilingScheme: new Cesium.GeographicTilingScheme(),
          tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
          maximumLevel: 18,
          show: false
      });
        var earthAtNight = layers.addImageryProvider(
            tdtVec
        );
        earthAtNight.splitDirection = Cesium.ImagerySplitDirection.LEFT; // Only show to the left of the slider.

        // Sync the position of the slider with the split position
        var slider = document.getElementById("slider");
        viewer.scene.imagerySplitPosition =
            slider.offsetLeft / slider.parentElement.offsetWidth;

        var handler = new Cesium.ScreenSpaceEventHandler(slider);

        var moveActive = false;

        function move(movement) {
            if (!moveActive) {
                return;
            }

            var relativeOffset = movement.endPosition.x;
            var splitPosition =
                (slider.offsetLeft + relativeOffset) /
                slider.parentElement.offsetWidth;
            slider.style.left = 100.0 * splitPosition + "%";
            viewer.scene.imagerySplitPosition = splitPosition;
        }

        handler.setInputAction(function () {
            moveActive = true;
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
        handler.setInputAction(function () {
            moveActive = true;
        }, Cesium.ScreenSpaceEventType.PINCH_START);

        handler.setInputAction(move, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        handler.setInputAction(move, Cesium.ScreenSpaceEventType.PINCH_MOVE);

        handler.setInputAction(function () {
            moveActive = false;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
        handler.setInputAction(function () {
            moveActive = false;
        }, Cesium.ScreenSpaceEventType.PINCH_END);

地球自转实现

        // var viewer = new Cesium.Viewer("cesiumContainer");
        viewer._cesiumWidget._creditContainer.style.display = "none";
        viewer.clock.multiplier = 60;//速度
        viewer.clock.shouldAnimate = true;
        var previousTime = viewer.clock.currentTime.secondsOfDay;

        //地租自转事件
        function onTickCallback() {
            var spinRate = 1;
            var currentTime = viewer.clock.currentTime.secondsOfDay;
            var delta = (currentTime - previousTime) / 1000;
            previousTime = currentTime;
            viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -spinRate * delta);
        }
        viewer.clock.onTick.addEventListener(onTickCallback);

在这里插入图片描述

更新了伙计们

今天有时间就又研究了一波，在网上看到了一个原理，也就是明暗分割的新思路，其实就是用cesium自带的光照系统，打开这个配置之后，就会有给图层一个部分有光，部分无光照的效果，其中里面的参数就是有让图层的白天区域或者黑夜区域的透明度调节发生变化。
综上这些思路，就可以利用这个白天黑夜的透明度变化以及时间变化来完成明暗交接。
摒弃上面的代码，在加入天地图代码后，直接加入以下代码

    updateLighting(viewer);

    function updateLighting(_viewer) {
      viewer.scene.globe.enableLighting = true//必须开启光照效果，
      var layer = viewer.scene.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          url: '../../data/img/night.jpg'
        })
      )
      layer.dayAlpha = 0.0 //白天图层透明值
      layer.nightAlpha = 1.0 //夜晚图层透明值
      layer.brightness = 3.5 //图层发光亮度

      _viewer.scene.globe.enableLighting = true;//打开光照
      _viewer.clock.shouldAnimate = true;//时间轴动画
      _viewer.clock.multiplier = 2000;//时间轴速度
      // nightLayer.dayAlpha = 0.0;
    }