【Cesium】七、设置Cesium 加载时的初始视角

文章目录

一、前言
二、实现方法
- 2.1 获取点位、视角
- 2.2 设置
三、App.vue

一、前言

在前面的文章【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>