使用Vite+Vue3创建Cesium项目

Vite Vue3 Cesium项目模版

Cesium是AGI公司计算机图形开发小组与2011年研发的三维地球和地图可视化开源JavaScript库，Cesium一词来源于化学元素铯，铯是制造原子钟的关键元素，研发小组通过命名强调Cesium产品精益求精，专注时间数据可视化。Cesium为三维GIS提供了一个高效的数据可视化平台

使用viet创建vue3项目

创建vue3项目 这里使用的是vue的模版。如果选择其他框架，则不用加--template vue pnpm create vite vite vue3 cesium --template vue

进入项目 cd vite-app

安装依赖 pnpm install

运行项目 pnpm run dev

看到这个页面就说明vite vue3的项目初始化成功了，下面就是安装和初始化cesium框架和cesium的vite插件了 在vite项目中要正常使用cesium我目前知道的有两种方法。

下面先讲第一种，也就是使用vite-plugin-cesium这个插件 首先找到这个插件的git仓库 github.com/nshen/vite-…

第一种方法

install

代码语言：javascript复制

npm i cesium vite-plugin-cesium vite -D

yarn add cesium vite-plugin-cesium vite -D

Usage

在vite.config.js文件中添加cesium的插件

代码语言：javascript复制

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

下面去页面中初始化cesium

代码语言：javascript复制

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

//cesium初始化必须写在mounted生命周期里面，否则会报错"Element with id "cesiumContainer" does not exist in the document."
onMounted(() => {
  const viewer = new Cesium.Viewer('cesiumContainer', {
    //这里是配置项
  })
})
</script>

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


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

发现样式有些问题。我一看，哦，原来是style.css中有模版的默认样式的影响。 把style.css中的默认样式删除就好了

这才是正确的姿势嘛！