在vite创建的vue3项目中使用Cesium加载立体地形信息并调整初始化角度

1. 使用vite创建vue3项目

   npm create vite@latest
   

   cd到创建的项目文件夹中

   npm install
   

   安装Cesium

   npm i cesium vite-plugin-cesium vite -D
   

2. 配置

   （1）在项目的vite.config.js文件中添加：

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

   （2）App.vue

   <template><div id="cesiumContainer"></div>
   </template><script setup>
   import * as Cesium from 'cesium';
   import { onMounted } from 'vue';
   onMounted(async () => {// 需要你自己注册Cesium账号，https://ion.cesium.com/，获取自己的token数据Cesium.Ion.defaultAccessToken = "你的token值"let viewer = new Cesium.Viewer('cesiumContainer', {// 避免 报错infoBox: false,// 注意和前边的async搭配terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1, {// 山 沟 立体效果requestVertexNormals: true,// 水流动效果requestWaterMask: true})})viewer.camera.setView({// 初始的相机的定位destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),// 方向 俯仰orientation: {heading: 0.6,pitch: -0.66}})})
   </script><style>
   html,
   body,
   #app,
   #cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
   }
   </style>

   注意：加载立体效果的时候用async和await配合；token值需要自己注册获取，

   onMounted(async () => {Cesium.Ion.defaultAccessToken = '你的token值'let viewer = new Cesium.Viewer('cesiumContainer', {// 避免 报错infoBox: false,// 注意和前边的async搭配terrainProvider: await Cesium.CesiumTerrainProvider.fromIonAssetId(1, {// 山 沟 立体效果requestVertexNormals: true,// 水流动效果requestWaterMask: true})})viewer.camera.setView({// 初始的相机的定位destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),// 方向 俯仰orientation: {heading: 0.6,pitch: -0.66}})})
   

npm run dev 运行效果如图所示：