目标

1、vite项目配置Cesium。

2、使用Cesium实现如下简单效果。

vite项目配置Cesium

1、引入Cesium的css文件

在main.ts中导入Cesium所需要的css文件，如下所示：

这里和导入其它组件库类似，比如导入ant-design的时候，同样需要导入css文件。

2、引入Cesium的静态文件

这四个文件是在项目打包的时候，需要导入到打包后的文件。

node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets

为了实现复制文件的目的，在vite中需要使用vite-plugin-static-copy插件。

2.1 按照vite-plugin-static-copy插件

pnpm add vite-plugin-static-copy -D

2.2 在vite.config.ts里边配置

Ion配置（可选）

当项目中需要使用Ion的实现，需要配置accesstoken， accesstoken可以在Cesium官网申请。

申请完accesstoken以后，可以在src/main.ts里边安装如下配置。

至此开发环境配置全部完成。

项目打包报错

开发环境下没有问题，但是在执行打包的时候，会报如下错误：Unable to determine Cesium base URL automatically。

这个问题网上很多解决办法，很多说在vite中配置define，或者在index.html里边配置window.CESIUM_BASE_URL = '/cesiumStatic'，但是都无法解决该问题。

最后发现是vite的版本问题，只要把vite的版本从4升级到5就可以了。

开发

js 复制代码

<template>
  <div class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted } from "vue";
  const cameraPositions = [
    { lon: 116.29421699792147, lat: 40.04092779976567, height: 20},
    { lon: 116.29431669792257, lat: 40.04092879976477, height: 20},
    { lon: 116.29411609792367, lat: 40.04082979976387, height: 20}
    // 添加更多摄像头位置...
  ];
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    infoBox: false,
    shouldAnimate: true,
    sceneMode: Cesium.SceneMode.SCENE3D,
    timeline: false,
    animation: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    sceneModePicker: false,
    scene3DOnly: false,
    selectionIndicator: false,
    navigationHelpButton: false,
    shadows: false,
  });

  viewer._cesiumWidget._creditContainer.style.display = "none";
  viewer.scene.fxaa = false;
  viewer.scene.postProcessStages.fxaa.enabled = true;

  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    viewer.resolutionScale = window.devicePixelRatio;
  }

  viewer.scene.globe.show = true;
  // viewer.scene.screenSpaceCameraController.enableInputs = false; // 禁用鼠标控制

  // 将三维球定位到中国
    viewer.camera.setView({
      // fromDegrees()方法，将经纬度和高程转换为世界坐标
      destination: Cesium.Cartesian3.fromDegrees(116.29967988095092, 40.0401389753888, 1000.0),
      orientation: {
        heading: 6.283185307179586,
        // 视角
        pitch: -1.5686521559334161,
        roll: 0,
      }
    });
    // 将相机视角定位到指定位置
  viewer.scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(
      116.29421699792147,
      40.04092779976567,
      100
    ),
    orientation: {
      heading : Cesium.Math.toRadians(0),
      pitch : Cesium.Math.toRadians(-90),
      roll : 0.0
    }
  });
  // let entity = null;
  cameraPositions.forEach((position, index) => {
    const entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(position.lon, position.lat, position.height),
    viewFrom: new Cesium.Cartesian3(0, 0, 0),
    point: {
      pixelSize: 10,
      color: Cesium.Color.BLUE,
    },
  });
});
  // console.log(12211,entity)
  // viewer.trackedEntity = entity;

});

</script>

<style scoped>
.box {
  width: 8rem;
  height: 8rem;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>

End;

Vite项目如何配置CesiumJS

目标

vite项目配置Cesium

开发