Cesium 自定义箭头坐标轴圆坐标轴（一）

最新推荐文章于 2025-06-12 17:00:12 发布

原创

最新推荐文章于 2025-06-12 17:00:12 发布 · 5.9k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了在Cesium中实现自定义箭头坐标轴和圆坐标轴的方法，包括利用矩阵运算创建primitive，通过调整材质、宽度和长度来绘制箭头坐标，以及通过获取坐标点并进行矩阵转换来绘制圆坐标。文章还提供了代码示例，并强调了坐标轴转换矩阵的重要性，为后续模型的平移和旋转操作奠定了基础。

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

Cesium 自定义箭头坐标轴圆坐标轴（一）

箭头坐标轴和圆坐标轴

箭头坐标轴和圆坐标轴

为了实现Cesium 对模型的拖拽平移和旋转，需要以模型为中心建立箭头坐标轴（沿坐标轴方向移动）和圆坐标轴（沿圆弧方向旋转）。
效果展示

实现思路

利用Cesium的矩阵运算，创建primitive，操作矩阵实现各种坐标轴。箭头坐标轴比圆坐标轴简单很多，Cesium内置了箭头材质，更改材质即可。

绘制箭头坐标

Cesium中添加图形的两种方法，一种是entities，一种是primitives。后者更适合开发，主要用到modelmatrix属性。添加箭头可以理解为添加同一个坐标起点的本地沿坐标轴方向的三条箭头线。
宽度和长度可根据需求自己调节。主要更改material即可。

// 创建x方向的箭头
  var arrowx = viewer.entities.add({
   
   
    name:"arrowx",
    polyline:{
   
   
      positions:Cesium.Cartesian3.fromDegreesArrayHeights([
        lon,lat,hei,lon+0.00003,lat,hei]),
      width:25,
      arcType:Cesium.ArcType.NONE,
      material:new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED),
    },
  });

依次画出y、z坐标。

绘制圆坐标

绘制圆坐标的话，用primitive来画，要用到modelmatrix。用线画圆可以调节圆的宽度。可以创建圆后，拿到圆的坐标，再用线绘制。
绘制圆，granularity越小，密度越大。

  var circle = new Cesium.CircleOutlineGeometry({
   
   
    center:Cesium.Cartesian3.fromDegrees(lan,lat,height),
    radius:3.0,
    granularity:0.001
  });