126:vue+cesium 列出可视化三个坐标轴(X,Y,Z)

作者: 还是大剑师兰特 ,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,优快云知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。

查看本专栏目录 - 本文是第: 126篇源代码示例文章

一、示例效果

二、示例简介

本示例介绍如何在vue+cesium中列出可视化三个坐标轴(X,Y,Z)。Cesium.DebugModelMatrixPrimitive 是 CesiumJS 库中的一个类,主要用于可视化调试目的。它允许开发者以图形化的方式显示一个变换矩阵(model matrix),这对于理解或调试场景中实体的位置、方向和缩放等属性非常有用。

通常来说,这个类会创建一个可视化的表示,如一个坐标轴的三色箭头(红色代表X轴,绿色代表Y轴,蓝色

### Cesium 中 XYZ 轴方向的解释与设置方法 Cesium 是一个基于 WebGL 的开源 JavaScript 库,用于创建 3D 地球和地图。其坐标系遵循右手坐标系,其中 Z 轴指向地心外侧(垂直向上),X 轴指向东向,Y 轴根据右手定则确定[^2]。以下是关于 Cesium 中 XYZ 轴方向的具体解释及设置方法: #### 1. 坐标系类型 Cesium 使用的是右手坐标系,具体轴的方向定义如下: - **X 轴**:指向东向。 - **Y 轴**:指向北向。 - **Z 轴**:从地心指向外,表示高度或海拔。 这种坐标系是基于地球中心固定(ECEF, Earth-Centered, Earth-Fixed)坐标系构建的[^2]。 #### 2. 加载 GLTF 模型时的坐标转换 GLTF 模型通常使用 Y 轴朝上的坐标系,而 Cesium 的默认坐标系中 Z 轴为上方向。当在 Cesium 中加载 GLTF 模型时,模型的坐标系需要进行转换以适配 Cesium 的坐标系。如果仅设置位置矩阵而不进行额外的坐标系转换,模型可能会出现方向错误的情况[^1]。 为了正确显示模型,Cesium 提供了 `orientation` 属性,允许通过四元数指定模型的方向。例如,以下代码展示了如何通过设置 `orientation` 来调整模型的方向,使其适配 Cesium 的坐标系: ```javascript var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(121.52317, 31.11436, 1000), orientation: Cesium.Transforms.headingPitchRollQuaternion( Cesium.Cartesian3.fromDegrees(121.52317, 31.11436, 1000), new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0) ), model : { uri : '../data/model/GroundVehicle/GroundVehicle.glb', scale : 650, minimumPixelSize : 100 } }); ``` 在此示例中,`Cesium.Transforms.headingPitchRollQuaternion` 方法用于生成一个四元数,该四元数定义了模型的姿态(heading、pitch 和 roll)。通过这种方式,可以确保模型的方向与 Cesium 的坐标系一致[^1]。 #### 3. 自定义坐标系转换 如果需要进一步自定义模型的坐标系转换,可以通过矩阵变换实现。例如,可以使用 `Cesium.Matrix4` 类来创建一个变换矩阵,并将其应用于模型的位置或方向。以下是一个简单的矩阵变换示例: ```javascript var transformMatrix = Cesium.Transforms.eastNorthUpToFixedFrame( Cesium.Cartesian3.fromDegrees(121.52317, 31.11436, 1000) ); var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(121.52317, 31.11436, 1000), model : { uri : '../data/model/GroundVehicle/GroundVehicle.glb', scale : 650, minimumPixelSize : 100, modelMatrix : transformMatrix } }); ``` 在此示例中,`Cesium.Transforms.eastNorthUpToFixedFrame` 方法生成了一个从东向、北向和上向到固定帧的变换矩阵,该矩阵可以用于调整模型的坐标系[^2]。 ###
评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值