vue3+vite成功搭建cesium项目

1.npm命令搭建vite+vue3项目

vscode打开文件夹，在终端输入以下命令：

// test-vue3是项目名字
// npm  6.x
npm create vite@latest test-vue3 --template vue

// npm 7+, extra double-dash is needed:
npm create vite@latest test-vue3 -- --template vue

项目创建成功后，输入以下命令：

cd test-vue3
npm install
npm run dev

现在vue3项目已经成功搭建并运行，下一步就是引入Cesium

2.安装与配置Cesium

在终端输入以下命令：

// 安装cesium与vite-plugin-cesium插件
npm i cesium vite-plugin-cesium

在vite.config.js中添加以下配置：

import cesium from 'vite-plugin-cesium'

export default defineConfig({
  plugins: [
    cesium()
  ],
})

完成该配置后，就可以使用Cesium了

3.引入与使用

例如在map.vue中引入并使用Cesium：

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

<script setup>
import { onMounted } from "vue"
import * as Cesium from 'cesium';

onMounted(() => {
  Cesium.Ion.defaultAccessToken = '自己的token'
  let viewer = new Cesium.Viewer("cesiumContainer");
})
</script>

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