cesium使用（一）

参考网站：
1、https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
2、https://github.com/vitejs/awesome-vite#plugins
3、https://github.com/nshen/vite-plugin-cesium

使用vite构建vue3+cesium项目，可以借助插件vite-plugin-cesium快速配置，解决下面所述问题：

安装
npm i cesium
npm i vite-plugin-cesium vite -D

配置vite.config.js

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [cesium({
      // Default copy min cesium file to dist. 
      // if true will rebuild cesium from source.
      // rebuildCesium: true
    })]
});

示例
CesiumMap.vue

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

<script lang="ts" setup>
import * as Cesium from 'cesium'

onMounted(() => {
  init()
})

async function init() {
  // 注册申请accessToken：https://ion.cesium.com/tokens
  // 使用默认值，图像下方会有这行字：
  // 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 https://cesium.com.
  // Cesium.Ion.defaultAccessToken = 'XXXXXXXXX'
  // 第二个参数可选，配置信息
  const viewer = new Cesium.Viewer('cesiumContainer')
}

</script>
  
<style scoped>
/* @import 'cesium/Build/Cesium/Widgets/widgets.css'; */
/* 
  在此处导入样式，将在页面加载完毕后才被加载。
  这样有个问题，#cesiumContainer设定的宽高，不会作用到canvas元素，
  导致绘制的图形使用的默认尺寸。
  建议在main.ts导入样式文件
 */

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