cesium设置星空透明

cesium项目开发过程中，我们需要让星空背景透明，不要星空。

cesium版本

"cesium": "1.93.0",

代码中已经包含了以下设置：

skyBox: false,  // 禁用天空盒
skyAtmosphere: false,  // 禁用大气层
contextOptions: {
  webgl: {
    alpha: true  // 启用alpha通道，使背景透明
  }
}

这些设置已经禁用了天空盒和大气层，并启用了alpha通道，这是实现透明背景的基础。

为了确保背景完全透明，可以在initCesium方法中添加以下代码：

initCesium() {
  // ... 其他代码 ...

  // 设置背景为透明
  this.viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;

  // 移除太阳
  this.viewer.scene.sun.show = false;

  // 移除月亮
  this.viewer.scene.moon.show = false;

  // ... 其他代码 ...
}

如果想要地球本身保持可见，但背景透明，可以调整地球的不透明度：

this.viewer.scene.globe.translucency.enabled = true;
this.viewer.scene.globe.translucency.frontFaceAlpha = 1.0; // 1.0表示完全不透明
this.viewer.scene.globe.translucency.backFaceAlpha = 1.0;

确保Cesium容器的CSS样式没有设置背景色：

#cesiumBody {
  background: transparent;
}

如果您的页面背景是白色的，可能看不出透明效果。您可以在父容器中设置一个渐变或图片背景来测试透明效果：

.parent-container {
  background: linear-gradient(to bottom, #4e54c8, #8f94fb);
}

这些设置将使Cesium的背景完全透明，同时保持地球可见。您将能够看到Cesium容器后面的任何内容或背景。

请注意，完全透明的背景可能会影响性能，特别是在移动设备上。如果您遇到性能问题，可以考虑使用半透明背景或其他优化方法。

完整实例代码

<template>
  <div class="mainBody">
    <div class="cesiumBody" id="cesiumBody" ref="cesiumBody">
    </div>
  </div>
</template>

<script>
import { link } from '@/config/config'
import * as Cesium from 'cesium'
import '@/Widgets/widgets.css'

// 设置cesium的静态资源路径
window.CESIUM_BASE_URL = link + 'cesium'
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5, 20.4, 110.4, 61.2
)

// 设置cesium token
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NDcwNDBjMS03MDg1LTQyMDMtYjNkMi00MjMxMjY1ZWIyODMiLCJpZCI6MTI0MzA0LCJpYXQiOjE2NzYxMjE3MzN9.FzxO4W9AbW8UlsG3_bc8HuuRd-FlZvbNuQS3DrifzxA'

export default {
  name: 'CesiumBody',
  data() {
    return {
      viewer: null,
      tilesLoaded: false,
      tilePercentage: 0
    }
  },
  mounted() {
    this.initCesium()
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('cesiumBody', {
        infoBox: false,
        geocoder: false,
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false,
        navigationHelpButton: false,
        animation: false,
        timeline: false,
        fullscreenButton: false,
        skyBox: false,  // 禁用天空盒
        skyAtmosphere: false,  // 禁用大气层
        contextOptions: {
          webgl: {
            alpha: true  // 启用alpha通道，使背景透明
          }
        }
      })
      this.viewer.cesiumWidget.creditContainer.style.display = 'none'
      // 设置背景为透明
      this.viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
      // 设置初始视图
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.870029,36.679806, 50000000)
      });

      this.viewer.scene.globe.tileLoadProgressEvent.addEventListener(this.onTileLoad);

      // 如果瓦片加载时间过长，可以设置一个超时
      setTimeout(() => {
        if (!this.tilesLoaded) {
          this.tilesLoaded = true;
          this.startAnimation();
        }
      }, 10000); // 10秒后如果还没加载完，就开始动画
    },
    onTileLoad(queuedTileCount) {
      this.tilePercentage = Math.round((1 - queuedTileCount / this.viewer.scene.globe.maximumScreenSpaceError) * 100);
      if (this.tilePercentage === 100 && !this.tilesLoaded) {
        this.tilesLoaded = true;
        this.startAnimation();
      }
    },
    startAnimation() {
      // 先飞到中国上空
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(104.1954, 35.8617, 10000000),
        duration: 2,
        complete: this.flyToBeijing // 飞行完成后，调用飞向北京的函数
      });
    },
    flyToBeijing() {
      this.viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(116.870029,36.679806, 5000),
        duration: 3,
        complete: () => {
          // 飞行完成后，可以在这里做一些操作，比如通知Item4组件
          this.$emit('animationComplete')
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBody {
  width: 100%;
  position: relative;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cesiumBody {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}
</style>