在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.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhODlhYmRjNi1jOWRiLTQ2NGYtYjdjNy0yNDZhZTA0NTk5MjUiLCJpZCI6MTUyNzQ4LCJpYXQiOjE2ODg5NzI1MDF9.cyrc9KRpIQlMHMJcbTvff8368HR-cg0XqPr8r-btRNQ'
   
     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配合

   onMounted(async () => {
     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhODlhYmRjNi1jOWRiLTQ2NGYtYjdjNy0yNDZhZTA0NTk5MjUiLCJpZCI6MTUyNzQ4LCJpYXQiOjE2ODg5NzI1MDF9.cyrc9KRpIQlMHMJcbTvff8368HR-cg0XqPr8r-btRNQ'
   
     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 运行效果如图所示：