Cesium中的Heading/Pitch/Roll详解

本文详细解读了Cesium中的HeadingPitchRoll概念,介绍了如何通过这三个角度在GIS坐标系中表示实体方向,并用生活实例说明roll(左右歪头)、heading(转向)和pitch(抬头低头)。适合理解三维数据旋转的初学者。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

很多不熟悉三维数据模式的人对方位角、俯仰角、倾斜角的概念不是很熟悉,今天简单讲解一下:

        Cesium官方文档对HeadingPitchRoll的说明:A rotation expressed as a heading, pitch, and roll. Heading is the rotation about thenegative z axis. Pitch is the rotation about the negative y axis. Roll is the rotation aboutthe positive x axis.
        翻译过来的意思就是,一个用heading、pitch、roll三个方向的旋转角度来表达的旋转信息。换句话说,就是在三维空间中,通过实体与笛卡儿坐标系三个坐标轴的的夹角来确定实体在三维空间中的方向。heading是实体与z轴的旋转角,pitch是实体与y轴的旋转角,roll是实体与x轴的旋转角。为了更加形象的说明三者关系,下面结合具体的图示来说明。不过需要说明的是由于GIS中坐标系的不同(大家都知道GIS中的高斯坐标系x轴是纵轴,y轴是横轴),可能会与其他领域的坐标系有所差别。
        三维空间的右手笛卡尔坐标如图

通俗的讲:

roll是左右歪头,脖子往肩膀靠。
heading是左右转向,头部是水平旋转
pitch是抬头低头

 

runtime-core.esm-bundler.js:51 [Vue warn]: Unhandled error during execution of mounted hook at <Map> at <App> warn$1 @ runtime-core.esm-bundler.js:51 Map.vue:33 Uncaught TypeError: Cesium.createWorldTerrain is not a function at Map.vue:33:29 at runtime-core.esm-bundler.js:2836:40 at callWithErrorHandling (runtime-core.esm-bundler.js:199:19) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:206:17) at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2816:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:385:28) at render2 (runtime-core.esm-bundler.js:6048:7) at mount (runtime-core.esm-bundler.js:3962:13) at app.mount (runtime-dom.esm-bundler.js:1775:19) at main.ts:9:5 如上所示报错修改下面代码: <template> <div id="cesium-container" ref="cesiumContainer"></div> </template> <script setup lang="ts"> import { ref, onMounted, onUnmounted } from 'vue'; import * as Cesium from 'cesium'; import 'cesium/Build/Cesium/Widgets/widgets.css'; // Cesium访问令牌 - 请替换成自己的有效令牌 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZTdiZDBhZS0xNzBhLTRjZGUtOTY4NC1kYzA5ZDEyNGEyNjUiLCJpZCI6MzE2OTI5LCJpYXQiOjE3NTEzMzg2Mzh9.9QHGIwaWkUOX0NOSre5369rrf1k6bGhZu7xUQia4JmE'; const cesiumContainer = ref<HTMLDivElement | null>(null); let viewer: Cesium.Viewer | null = null; onMounted(() => { if (!cesiumContainer.value) return; // 初始化Cesium地球 viewer = new Cesium.Viewer(cesiumContainer.value, { animation: false, baseLayerPicker: false, fullscreenButton: false, vrButton: false, geocoder: false, homeButton: false, infoBox: false, sceneModePicker: false, selectionIndicator: false, timeline: false, navigationHelpButton: false, navigationInstructionsInitiallyVisible: false, terrainProvider: Cesium.createWorldTerrain(), imageryProvider: new Cesium.ArcGisMapServerImageryProvider({ url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer' }) }); // 设置初始视图位置(株洲市) viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(113.13, 27.83, 10000000), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-90), roll: 0.0 }, duration: 2 }); }); onUnmounted(() => { if (viewer) { viewer.destroy(); viewer = null; } }); </script> <style scoped> #cesium-container { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } /* 覆盖Cesium默认的logo */ :deep(.cesium-viewer-bottom) { display: none !important; } </style> 注意我的cesium是最新版的
最新发布
07-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值