依赖环境

需要安装的软件主要包括以下几种：

方式一：快速起步?

• 下载示例项目

bash

git clone https://gitee.com/hfxtsk/vite-cesium-sandbox.git

• 运行项目

bash

cd vite-cesium-sandbox
npm install
npm run dev

• 打开浏览器访问即可

方式二：手动搭建?

• 使用cmd命令

bash

# 使用NPM方式
npm create vite
# 根据提示输入或选择
? Project name: vite-cesium-sandbox
? Select a framework: Vue
? Select a variant: TypeScript

• 使用vscode打开vite-cesium-sandbox项目
• 安装依赖

bash

# 安装cesium
npm i cesium -S
# 安装vite-plugin-earth插件
npm i vite-plugin-earth -D

• vite.config.ts添加如下配置

js

import { defineConfig } from 'vite';
import { cesiumPlugin } from 'vite-plugin-earth';
export default defineConfig({
  plugins: [cesiumPlugin()]
});

• App.vue页面

html

<script setup lang="ts">
  import { onMounted } from 'vue';
  import { Viewer } from 'cesium';
  onMounted(() => {
    const viewer = new Viewer('cesiumContainer', {});
    console.log(viewer);
  });
</script>

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

<style scoped>
  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
</style>

• 运行程序

bash

npm run dev

• 打开浏览器访问即可