运行起来第一个Cesium

1、vite新建vue工程
2、安装cesium npm install cesium
3、引入cesium
'''
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()]
})
'''
4、第一个hellword
'''
<div id="cesiumContainer"></div>
import { defineProps, reactive,onMounted } from 'vue'
import * as Cesium from 'cesium';

onMounted(() => {
const viewer = new Cesium.Viewer('cesiumContainer',{
});
viewer.scene.debugShowFramesPerSecond = true; //添加帧速率
})
'''
5、绘制小方格

  //绘制小方格
  var redBox = viewer.entities.add({
    name: "Red box with black outline",
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),
    box: {
      dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.BLACK,
    },
  });
  //viewer.zoomTo(viewer.entities);
  var czml = [
    {
      id: "document",
      name: "box",
      version: "1.0",
    },
    {
      id: "shape2",
      name: "Red box with black outline",
      position: {
        cartographicDegrees: [-107.0, 40.0, 300000.0],
      },
      box: {
        dimensions: {
          cartesian: [400000.0, 300000.0, 500000.0],
        },
        material: {
          solidColor: {
            color: {
              rgba: [255, 0, 0, 28],
            },
          },
        },
        outline: true,
        outlineColor: {
          rgba: [0, 0, 0, 255],
        },
      },
    },
  ];
  var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
  viewer.dataSources.add(dataSourcePromise);
  viewer.zoomTo(dataSourcePromise);