Cesium1：使用Vite快速创建Cesium场景

1、初始化Vite项目

参考Vite官网，有多种项目搭建方式；

我使用npm create vite@latest;

根据步骤设置项目名、包名、选择打包项、开发语言等；

具体步骤不详细阐述；

2、引入Cesium

安装Cesium依赖

npm i vite-plugin-cesium -D
npm i cesium

在vite.config.js中添加以下代码

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

3、创建Cesium账号，注册Token

参考Cesium quickstart 注册Cesium账号，添加token，在程序中对应地方需要用到，否则场景呈现会报无token的提示:

This application is using Cesium's default ion access token. Please assign Cesium.Ion.defaultAccessToken with an access token from your ion account before making any Cesium API calls. You can sign up for a free ion account at cesium.com.

4、创建BaseCesium.Vue文件

    <script setup>
    import { Viewer, Ion } from 'cesium'
    import { onMounted } from 'vue'

    Ion.defaultAccessToken="上一步注册的token"
    onMounted(() => {
        const viewer = new Viewer('cesiumContainer',{})
        viewer.scene.debugShowFramesPerSecond = true
    })
    </script>

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

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

该文件可以放在views，添加Vue Router配置后进行访问即可，配置路由内容此处不详细描述。

5、效果呈现