环境搭建

• 创建项目：npm create vite@latest 选择Vue和JavaScript

• 下载依赖：

  • npm install
  • npm install cesium
  • npm install vite-plugin-cesium

• 修改vite.config.js 导入下载好的插件cesium()

  import { defineConfig } from "vite";
  import vue from "@vitejs/plugin-vue";
  import cesium from "vite-plugin-cesium";
  
  export default defineConfig({
    plugins: [vue(), cesium()],
  });

• 在main.js中全局导入Cesium样式

  import { createApp } from 'vue'
  import './style.css'
  import App from './App.vue'
  import "cesium/Build/Cesium/Widgets/widgets.css";
  import "@cesium/engine/Source/Widget/CesiumWidget.css";
  
  createApp(App).mount('#app')

• 创建一个.vue文件：搭建最简单的cesium地球效果

  <template>
    <div id="cesiumContainer" style="width: 100%; height: 100vh;"></div>
  </template>
  
  <script setup>
  import { onMounted, ref } from 'vue'
  import * as Cesium from 'Cesium'
  
  Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
  
  const viewer = ref()
  
  function init(){
    viewer.value = new Cesium.Viewer('cesiumContainer', {
      infoBox: false, // 禁用沙箱，解决控制台报错
      timeline: false, // 禁用底部的时间线控件
      navigationHelpButton: false,
    })
  }
  
  onMounted(() => {
    init()
  })
  </script>

注册Cesiumjs的token：引入到项目中去除相关的logo，在官网进行注册和获取token

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE