Vue-Cli 5.0.0搭建Cesium环境

1、创建vue-cli项目

1、查看vue版本

使用指令：vue -V

2、创建Vue项目

1、在需要创建文件的目录，输入cmd

2、在命令行，输入 vue create <project-name>，并选择最后一项

3、选择插件

4、选择Vue版本3.0

5、根据图示选择

2、cesium环境

1、引入Cesium

yarn add cesium

2、引入node扩展包

yarn add browserify-zlib

yarn add https-browserify

yarn add path-browserify

yarn add stream-browserify

yarn add stream-http

3、配置vue.conf.js

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      symlinks: false,
      fallback: {
        http: require.resolve("stream-http"),
        https: require.resolve("https-browserify"),
        url: false,
        assert: false,
        util: false,
        zlib: require.resolve("browserify-zlib"),
        path: require.resolve("path-browserify"),
        stream: require.resolve("stream-browserify"),
      },
    },
  },
});

4、拷贝cesium包至public下

5、在代码中设置全局变量

6、编写cesium加载代码

<template>
  <div class="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import { ref, defineOptions, defineProps, onMounted } from "vue";
import { Ion, Viewer } from "cesium";
defineOptions({
  name: "EarthView",
});
const props = defineProps(["globalName", "ionToken"]);
const cesiumContainer = ref(null);
let viewer = undefined;
onMounted(() => {
  Ion.defaultAccessToken =
    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyOTQ0YTExZS02N2Y4LTQ2OTMtOWQ4NS1mNzE3ZWMwYTNmNmEiLCJpZCI6NDM1OCwiaWF0IjoxNjI4MTQzMjE1fQ.csECCT352LHVhak2sJlWYXw_gr7U-AqdQ9UMvtfOeg8";
  if (props.ionToken) {
    Ion.defaultAccessToken = props.ionToken;
  }
  viewer = new Viewer(cesiumContainer.value, {
    baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
    fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
    vrButton: false, // 如果设置为false，将不会创建VR应用场景
    geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
    homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮。
    infoBox: false, // 是否显示点击要素之后显示的信息,cesium中的沙盒开关
    sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
    selectionIndicator: false, // 获取当选定实体更改时引发的事件。
    navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
    navigationInstructionsInitiallyVisible: false, // 如果帮助说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
    timeline: false, // 如果设置为false，则不会创建正下方时间轴小部件。
    scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
    animation: false, // 如果设置为false，将不会创建左下角动画小部件。
    shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
    // ps. Viewer＃clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟，就把shouldAnimate设为false
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源吧
    fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处，虽然我关闭了全屏按钮，但是键盘按F11 浏览器也还是会进入全屏
    shadows: true,
    contextOptions: {
      webgl: {
        alpha: false,
        depth: true,
        stencil: false,
        antialias: true,
        premultipliedAlpha: true,
        preserveDrawingBuffer: false,
        failIfMajorPerformanceCaveat: false,
      },
      allowTextureFilterAnisotropic: true,
      requestWebgl1: false,
    },
  });
  viewer.scene.postProcessStages.fxaa.enabled = true;
  viewer.resolutionScale = window.devicePixelRatio;
  viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;
  window[props.globalName] = viewer;
});
</script>

<style scoped lang="scss">
.cesiumContainer {
  height: 100%;
  overflow: hidden;
}
</style>

 7、展示，高德地图，自行搜索后进行加载