126：vue+cesium 列出可视化三个坐标轴（X,Y,Z）

于 2025-05-19 11:16:33 发布
阅读量349 收藏 25
点赞数 34
CC 4.0 BY-SA版权
分类专栏： # cesium综合教程200+ 文章标签： 大剑师 cesium教程 cesium示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/148059209

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

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

文章目录

一、示例效果

二、示例简介

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

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Cesium高级开发教程之二十五：参考坐标轴#Entity
Cesium开发工程师
12-21 219
教程示例网站：https://thomaz529.github.io。
基于Vue实现的魔方矩阵排列效果
C201008的专栏
02-01 2156
基于Vue实现的魔方矩阵排列效果 有赞里面店铺装修的魔方效果如图所示： 经过简化的代码示下： <template> <div> <div style="margin-bottom: 20px;"> 魔方密度: <select v-model="density" @change="onChangeDensity"> <option..
cesium学习——cesium中的坐标
weixin_30251587的博客
08-03 387
一、坐标展现形式 　　在cesium中，对于坐标数值单位有三种：角度、弧度和坐标值 　　1.角度 　　　　角度就是我们所熟悉的经纬度，对于地球的坐标建立如下： 　　　　　 　　　　图中以本初子午线作为x和z的面，建立了一个空间坐标系。可知在纬度方向上，角1的范围为-90~90，即南纬90°~北纬90°，角2的范围是-180~180，即东经180°~西经180°。 　　2.弧...
Cesium坐标系介绍
纸飞机的旅行的博客
03-03 4054
Cesium坐标系介绍
Cesium 自定义箭头坐标轴 圆坐标轴（一）
weixin_44056901的博客
12-15 5981
Cesium 自定义箭头坐标轴 圆坐标轴箭头坐标轴和圆坐标轴 为了实现Cesium 对模型的拖拽平移和旋转，需要以模型为中心建立箭头坐标轴（沿坐标轴方向移动）和圆坐标轴（沿坐标轴方向旋转），简述二者的实现过程。
Cesium实践（3）——坐标系与相机系统
qq_37987033的博客
04-17 2697
本文介绍Cesium世界中的坐标系统，Cesium的坐标系分三种：屏幕坐标、笛卡尔空间直角坐标、地理坐标，在得知目标的坐标后，即可使用相机系统对目标进行定位或进行相机交互。
071：vue+cesium 实现下雨效果
大剑师兰特的GIS世界
03-01 1697
第071个本示例的目的是介绍如何在vue+cesium中实现下雨效果，这里使用着色器来实现实例特效。
073：vue+cesium 实现大雾效果
大剑师兰特的GIS世界
03-06 876
本示例的目的是介绍如何在vue+cesium中实现大雾效果，这里使用着色器来实现实例特效。直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果
008：vue+cesium 绘制线段示例
大剑师兰特的GIS世界
02-27 673
第008个本示例的目的是介绍如何在vue+cesium中绘制线段，左键点击开始绘制，右键点击取消绘制。
010：vue+cesium 绘制矩形
大剑师兰特的GIS世界
02-27 624
第010个本示例的目的是介绍如何在vue+cesium中绘制矩形。
vue实现在图片中画矩形框,并得到对角坐标，设置map中area的样式.zip
05-28
vue实现在图片中画矩形框（JS图片画方块定位坐标）,并得到对角坐标，并拿到对应坐标制作图片热区并设置map中area的样式（图片热区map area的用法）
cesium根据相应区域坐标和对应x轴，y轴数据着色
m0_69112199的博客
07-30 542
2.计算当前数据的经纬度是否在区域内 booleanPointInPolygon （temp）1.获取区域坐标，x轴数，y轴数（westSouthEastNorth，xNum，yNum）3.在区域内为红色，不在则为无色。/**区域着色 */4.cesium添加图元。欢迎补充，一起进步。
Cesium从入门放弃8：模型编辑Demo
不去想结果，一直在路上
04-02 5658
就是这个东西 1.添加模型 const url = "Apps/model/leida.glb"; const pos = Cesium.Cartesian3.fromDegrees(110, 40, 150); const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(pos); const model = viewer.scene.pr...
099：vue+cesium 点击显示屏幕位置、笛卡尔坐标、地理坐标
大剑师兰特的GIS世界
03-04 391
本示例在 Vue + cesium 项目中展示点击球体的某点，显示屏幕位置、笛卡尔坐标、地理坐标。屏幕位置是指物体在二维屏幕上的位置，通常用像素单位表示，格式为 (x, y)。笛卡尔坐标是三维空间中的坐标，通常表示为 (x, y, z)，它是以地球中心为原点的直角坐标系（Earth-Centered Earth-Fixed, ECEF）。地理坐标是基于地球表面的经纬度和高度表示的位置，通常表示为 (longitude, latitude, height)。
Cesium坐标系
纸飞机的旅行的博客
09-07 1841
Cesium坐标系（小白理解）
Cesium.js基础使用（vue）
Alone_Endeavor的博客
07-04 9842
之后就可以访问高清页面；通过以下官网地址申请。
canvas----绘制坐标轴
scwMason的博客
10-13 798
&lt;body&gt; &lt;canvas width="600" height="400" style="border-color: #eee"&gt;&lt;/canvas&gt; &lt;/body&gt; &lt;script&gt; /* 默认的线条宽度1px 默认的颜色是黑色 产生的原因是 */
Cesium 展示——点+线+面+坐标+自定义绘制
虎康的博客
08-23 420
floodPloygonData: []//最终获得到的面的数据。
cesium xyz轴方向
最新发布
06-18
### 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、付费专栏及课程。

余额充值