安装

npm install cesium 

const viewer = new Cesium.Viewer('cesiumContainer', {
      infoBox: false,   // 禁用沙箱，解决控制台报错
      timeline:false,    // 时间轴
      animation:false,    //动画播放按钮
      navigationHelpButton: false,  //导航帮助
      geocoder: false, // 搜索框
      homeButton: false, // 家按钮
      sceneModePicker: false, // 球形 二维模式切换按钮
      baseLayerPicker: false,  // 地图切换器
      // fullscreenButton: false
      selectionIndicator: true // 实体选择指示器
    })
    viewer._cesiumWidget._creditContainer.style.display = "none"//取消版权信息

插件vite-plugin-cesium

由于 Cesium 不是一个普通的 npm 包，需要依赖一些 css ，图片，json 啥的。我们要参考 Cesium 官方的 webpack 教程 来做一堆额外的工作。 值得庆幸的是现在 Vite 有了 vite-plugin-cesium 插件，来帮我们完成这些配置。

组件封装

底图

天地图

http://lbs.tianditu.gov.cn/server/MapService.html

导航组件

cesium-navigation-es6

背景设置

// 设置渲染
  contextOptions: {
    webgl: {
      alpha: true
}
// 屏蔽天空盒
    this.viewer.scene.skyBox.show = false;
    // 设置背景透明
    this.viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);

<style lang="scss">
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  /* background-color: red; */
  background-image: url('../../../assets/bg.jpg');
  background-size: 100% 100%;
}
</style>