1. cesium简介

CesiumJS是一个开源JavaScript库，用于创建具有最佳性能、精度、视觉质量和易用性的世界级3D地球仪和地图。从航空航天到智能城市再到无人机，各行各业的开发人员都使用CesiumJS创建交互式Web应用程序来共享动态地理空间数据。

cesium官网链接

2. vue3.3中使用cesium

使用vite创建vue3项目

pnpm create vite cesium_learn --template vue
cd cesium_learn
pnpm install
pnpm run dev

安装cesium库

pnpm install cesium 
pnpm install -D vite-plugin-cesium

修改vite.config.js

// vite.config.js
import { defineConfig } from 'vite';
import { resolve } from 'path';
import vue from '@vitejs/plugin-vue';
import cesium from 'vite-plugin-cesium';

export default defineConfig({
  plugins: [vue(), cesium()],
  resolve: {
    alias: {
      '@': resolve(__dirname, './src')
    }
  }
});

修改App.vue和style.css

// App.vue
<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { CesiumToken } from '@/utils/CesiumToken'
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'

onMounted(() => {
  // 这里的CesiumToken需要自己去cesium官网申请
  Cesium.Ion.defaultAccessToken = CesiumToken;
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 这里是配置项
  })
})
</script>

<style scoped>
#cesiumContainer {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>

// style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

1.cesium初始化

1. cesium简介

2. vue3.3中使用cesium