一、前言

在前面的文章 【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知识，敬请关注。