Cesium 三维空间坐标点绘制指南：自由掌控位置、方位与间距

2023-01-14 11:13:30

在 CesiumJS 中灵活绘制点位：掌握位置、方位和间距

在三维场景构建中，点位绘制是不可或缺的一部分。CesiumJS 作为一款强大的三维地球可视化库，提供了灵活的方式来绘制点位，不仅仅局限于直接指定点坐标。通过指定位置、方位和间距，我们能够实现点位的精准布局，大幅提升场景绘制的自由度。本文将深入探讨这一操作，助你轻松掌握在 CesiumJS 中绘制点位的技巧。

前置条件

在开始之前，请确保满足以下前置条件：

对 CesiumJS 库有一定了解
熟悉三维坐标系的表示方式，如经纬度、笛卡尔坐标

步骤指南

1. 获取 CesiumJS 库

从官方网站下载 CesiumJS 库，或直接使用 CDN 引用。在 HTML 文件中添加以下代码：

<script src="Cesium.js"></script>

2. 定义视口

创建 div 元素作为 Cesium 视口的容器：

<div id="cesiumContainer"></div>

3. 初始化 Cesium 视图

使用 Cesium 提供的 Viewer 对象来创建 3D 视图：

var viewer = new Cesium.Viewer('cesiumContainer');

4. 指定原点位置

设置原点的位置，这里以经纬度坐标为例：

var origin = Cesium.Cartographic.fromDegrees(-122.4194, 37.7749, 0);

5. 绘制点位

接下来，我们将通过示例演示如何根据位置、方位和间距绘制点位。

位置绘制：

var redPoint = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, -300),
  point: {
    color: Cesium.Color.RED,
    pixelSize: 10
  }
});

此代码绘制了一个向下 300 米的红色点位。

方位绘制：

var bluePoint = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 0),
  offset: new Cesium.HeadingPitchRange(0, 0, 1000),
  point: {
    color: Cesium.Color.BLUE,
    pixelSize: 10
  }
});

此代码绘制了一个沿 Y 轴向上偏移 1000 米的蓝色点位。

间距和方位组合绘制：

var greenPoint = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-122.4194, 37.7749, 0),
  offset: new Cesium.HeadingPitchRange(Cesium.Math.toRadians(180), 0, 1000),
  orientation: new Cesium.HeadingPitchRoll(0, 0, Cesium.Math.toRadians(-90)),
  point: {
    color: Cesium.Color.GREEN,
    pixelSize: 10
  }
});

此代码绘制了一个沿 X 轴向后偏移 1600 米、沿 Y 轴向上偏移 1000 米、朝向与 X 轴相反的绿色点位。

6. 保存并查看效果

运行 HTML 文件，即可在 Cesium 视口中看到绘制好的点位。