一、前言

在前面的文章 【Cesium】三、实现开场动画效果 中有提到过 虽然也能回到初始点位但是有一个明显的动画过程。下面方法加载时就是在初始点位 没有动画效果，根据需求选择。

本文参考文章：
Cesium：设置加载时的初始视角
cesium设置相机的初始位置

二、实现方法

2.1 获取点位、视角

运行项目 调整好视角 打开控制台，分别输入下：

viewer.camera.position
viewer.camera.heading
viewer.camera.pitch
viewer.camera.roll

网上查找了几篇相关文章，发现其他博主都没有提到将viewer 挂载到全局，直接在控制输入会提示 viewer is not defined，如果提示同样错误可以先挂载

  // 将 viewer 暴露到全局window.viewer = viewer;

2.2 设置

在2.1 中获取到了点位等信息，然后利用viewer.camera.setView 进行设置

第一种：

viewer.camera.setView({// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州// fromDegrees()方法，将经纬度和高程转换为世界坐标destination: Cesium.Cartesian3.fromDegrees(112.962475, 28.195802, 1500),orientation: {// 指向heading: 6.283185307179581,// 视角pitch: -1.5688168484696687,roll: 0.0}
});

第二种：

viewer.camera.setView({destination: { x: -2195017.3883226076, y: 5180529.602231502, z: 2996108.378261628 },orientation: {heading: 6.283185307179581,pitch: -1.5688168484696687,roll: 0.0}
});

三、App.vue

App.vue实现效果全部代码，仅供参考：

<template><div id="cesiumContainer"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from "vue";
import * as Cesium from "cesium";
const initFn = async () => {const viewer = new Cesium.Viewer("cesiumContainer", {infoBox: false,geocoder: false,homeButton: false,sceneModePicker: false,baseLayerPicker: true,navigationHelpButton: false,animation: false,timeline: false,fullscreenButton: false,vrButton: false,});// 将 viewer 暴露到全局window.viewer = viewer;viewer._cesiumWidget._creditContainer.style.display = "none"; //取消版权信息const imageLayers = viewer.scene.imageryLayers;imageLayers.remove(imageLayers.get(0)); //移除默认影像图层const TDTTK = "337bc7a038fe9d239af76ab013ff4594"; //填入你自己的天地图Key// 天地图影像const tdtLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdt",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});viewer.imageryLayers.addImageryProvider(tdtLayer);// 天地图注记const tdtAnnotionLayer = new Cesium.WebMapTileServiceImageryProvider({url: `http://t0.tianditu.com/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={TileMatrix}&TILEROW={TileRow}&TILECOL={TileCol}&tk=${TDTTK}`,layer: "tdtAnno",style: "default",format: "image/jpeg",tileMatrixSetID: "w",maximumLevel: 18,show: false,});viewer.imageryLayers.addImageryProvider(tdtAnnotionLayer);// 第一种// viewer.camera.setView({//   // Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州//   // fromDegrees()方法，将经纬度和高程转换为世界坐标//   destination: Cesium.Cartesian3.fromDegrees(112.962475, 28.195802, 1500),//   orientation: {//     // 指向//     heading: 6.283185307179581,//     // 视角//     pitch: -1.5688168484696687,//     roll: 0.0//   }// });// 第二种viewer.camera.setView({destination: { x: -2195017.3883226076, y: 5180529.602231502, z: 2996108.378261628 },orientation: {heading: 6.283185307179581,pitch: -1.5688168484696687,roll: 0.0}});
};onMounted(() => {// Cesium 初始化initFn();
});
</script>
<style>
#app {width: 100%;height: 100%;font-family: sans-serif;text-align: center;
}html,
body,
#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;
}
</style>

后面我还会更新更多关于cesium知识，敬请关注。