Vue项目初次加载cesium | 配置

1. 首先配置CESIUM_BASE_URL全局变量

window.CESIUM_BASE_URL = import.meta.env.BASE_URL + "Cesium/";

3. 把node_modules\cesium\Build\Cesium这个文件夹复制到public目录下



4. 使用

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

<script setup>
import * as Cesium from "Cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
onMounted(() => {
  const viwer = window.map = new Cesium.Viewer("cesiumContainer", {
    animation: false,//是否创建动画小器件，左下角仪表
    baseLayerPicker: false,//是否显示图层选择器
    fullscreenButton: false,//是否显示全屏按钮
    geocoder: false,//是否显示geocoder小器件，右上角查询按钮
    homeButton: false,//是否显示Home按钮
    infoBox: false,//是否显示信息框
    sceneModePicker: false,//是否显示3D/2D选择器
    scene3DOnly: false,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    selectionIndicator: false,//是否显示选取指示器组件
    timeline: false,//是否显示时间轴
    navigationHelpButton: false,//是否显示右上角的帮助按钮
    baselLayerPicker: false,// 将图层选择的控件关掉，才能添加其他影像数据
    shadows: true,//是否显示背影
  });
  //去除版权信息
  viewer._cesiumWidget._creditContainer.style.display = "none";
});
</script>

<style lang="scss" scoped>
#cesiumContainer {
  height: 100%;
  width: 100%;
}
</style>

或者参考以下方式
Webpack看这Vite看这

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。