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

在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 运行效果如图所示：