Axis

CesiumJS中的Axis模块用于创建轴线和轴标签，以便在场景中显示相应的坐标轴。

使用方法

要使用Axis模块，请先导入它：

import { Axis } from 'cesium';

创建轴线

使用以下代码创建一条轴线：

const axis = new Axis({
  container: document.getElementById('axisContainer'), // 要在其中创建轴线的容器元素
  scene: viewer.scene, // Cesium.Scene对象，轴线将在其中显示
  x: AxisOrientation.X, // 轴线方向，可选值为 AxisOrientation.X、AxisOrientation.Y 和 AxisOrientation.Z
  color: Color.RED, // 轴线颜色
  thickness: 2 // 轴线粗细程度
});

创建轴标签

使用以下代码创建一组轴标签：

const axisLabels = new Axis({
  container: document.getElementById('axisLabelContainer'), // 要在其中创建轴标签的容器元素
  scene: viewer.scene, // Cesium.Scene对象，轴标签将在其中显示
  x: AxisOrientation.X, // 轴标签所对应的轴线方向，可选值为 AxisOrientation.X、AxisOrientation.Y 和 AxisOrientation.Z
  font: '16px sans-serif', // 轴标签文本样式
  labelOffset: 5, // 轴标签距离轴线的偏移量
  minValue: 0, // 轴的最小值
  maxValue: 100, // 轴的最大值
  step: 10, // 轴标签之间的间隔
  prefix: 'X:', // 轴标签前缀（可选）
  suffix: ' m', // 轴标签后缀（可选）
  decimalPlaces: 2 // 轴标签数值保留的小数位数
});

一旦创建了轴标签，您可以使用setLabels方法更改它们的值：

axisLabels.setLabels([0, 20, 40, 60, 80, 100]);

API文档

Axis

创建轴线或轴标签。

构造函数

• new Axis(options:Object)
  • options.container:HTMLElement 要在其中创建轴线或轴标签的容器元素。
  • options.scene:Cesium.Scene 轴线或轴标签所在的场景。
  • options.x:AxisOrientation 轴线或轴标签所对应的轴线方向。可选值为AxisOrientation.X、AxisOrientation.Y、AxisOrientation.Z。
  • options.color:Cesium.Color 轴线的颜色。
  • options.thickness:Number 轴线的粗细程度。
  • options.font:String 轴标签的文本样式。默认为"16px sans-serif"。
  • options.labelOffset:Number 轴标签距离轴线的偏移量。默认为0。
  • options.minValue:Number 轴的最小值。默认为0。
  • options.maxValue:Number 轴的最大值。默认为100。
  • options.step:Number 轴上的刻度之间的间隔。默认为10。
  • options.prefix:String 轴标签前缀。可选。
  • options.suffix:String 轴标签后缀。可选。
  • options.decimalPlaces:Number 轴标签中数值保留的小数位数。默认为2。

方法

• setLabels(labels:Array.<Number>|Array.<String>) 设置轴标签的值。

示例

// 创建一条X轴线
const axis = new Axis({
  container: document.getElementById('axisContainer'),
  scene: viewer.scene,
  x: AxisOrientation.X,
  color: Color.RED,
  thickness: 2
});

// 创建一组X轴标签
const axisLabels = new Axis({
  container: document.getElementById('axisLabelContainer'),
  scene: viewer.scene,
  x: AxisOrientation.X,
  font: '16px sans-serif',
  labelOffset: 5,
  minValue: 0,
  maxValue: 100,
  step: 10,
  prefix: 'X:',
  suffix: ' m',
  decimalPlaces: 2
});

// 设置X轴标签的值
axisLabels.setLabels([0, 20, 40, 60, 80, 100]);

AxisOrientation

枚举类型，表示轴线或轴标签的方向。

• AxisOrientation.X X轴方向。
• AxisOrientation.Y Y轴方向。
• AxisOrientation.Z Z轴方向。

参考链接

• Cesium Axis