GroundPolylinePrimitive

GroundPolylinePrimitive 是 CesiumJS 中一种用于绘制基于地面的线条的 Primitive。通过将一组经纬度坐标转换为笛卡尔坐标系的顶点并进行绘制，可以在地球表面上将直线、折线、多段线等几何形状渲染成 2D 或 3D 线条。

创建 GroundPolylinePrimitive

创建 GroundPolylinePrimitive 需要执行以下步骤：

获取 Scene 实例，可以通过 Viewer 或 CesiumWidget 对象的 scene 属性进行访问。
创建 GroundPolylinePrimitive 实例，该实例需要传入 Scene 实例作为参数。
为 GroundPolylinePrimitive 实例设置相关属性，例如颜色、宽度、坐标等。
调用 GroundPolylinePrimitive#update 方法更新渲染。

以下是创建 GroundPolylinePrimitive 的示例代码：

const viewer = new Cesium.Viewer("cesiumContainer");
const scene = viewer.scene;

const startPoint = Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222);
const endPoint = Cesium.Cartesian3.fromDegrees(-77.0366667, 38.8950000);
const positions = [startPoint, endPoint];

const groundLinePrimitive = new Cesium.GroundPolylinePrimitive({
  positions,
  width: 10,
  followSurface: true,
  material: Cesium.Color.RED,
});

scene.primitives.add(groundLinePrimitive);

在上述代码中，我们首先创建了一个包含 Scene 对象的 Viewer 实例。接着，我们分别定义了起点和终点坐标，并将其封装在了一个数组中。最后，我们创建了一个 GroundPolylinePrimitive 实例，设置了相关属性（包括坐标、宽度、颜色等），并将其添加到了 Scene 的渲染列表中。

属性

属性名	类型	描述	默认值
positions	Array.<Cartesian3>	绘制的点集合	无
width	Number	线宽	1
material	MaterialProperty	线条材质	实线
followSurface	Boolean	是否沿着表面绘制	true
granularity	Number	线条精度，单位弧度	0.01
classified	Boolean	是否启用 GPU 深度测试	false
outlineWidth	Number	边线宽度	0
outlineColor	Color	边线颜色	Color.BLACK
depthFailMaterial	MaterialProperty	深度测试失败时使用的材质	Material.NONE

方法

update(time: JulianDate)

更新 Primitive 的状态。在创建了 GroundPolylinePrimitive 后，需要定时调用该方法来更新渲染。

const groundLinePrimitive = new Cesium.GroundPolylinePrimitive({
  // options
});

function animate(time) {
  groundLinePrimitive.update(time);
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

示例

以下示例演示了如何创建基于地面的双向箭头（GroundArrow），并将其添加到 Scene 的渲染列表中：

const viewer = new Cesium.Viewer("cesiumContainer");
const scene = viewer.scene;

const startPoint = Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222);
const endPoint = Cesium.Cartesian3.fromDegrees(-77.0366667, 38.8950000);
const positions = [startPoint, endPoint];

const groundArrow = new Cesium.GroundPrimitive({
  geometryInstances: new Cesium.GeometryInstance({
    geometry: new Cesium.PolylineGeometry({
      positions,
      width: 10,
      vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,
      ellipsoid: Cesium.Ellipsoid.WGS84,
      arcType: Cesium.ArcType.NONE,
      clampToGround: true,
      granularity: Cesium.Math.PI_OVER_THREE,
    }),
    attributes: {
      color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED),
    },
    id: "groundArrow",
    pickPrimitive: null,
  }),
  appearance: new Cesium.PolylineMaterialAppearance({
    material: new Cesium.Material({
      fabric: {
        type: "PolylineArrow",
        uniforms: {
          color: Cesium.Color.RED,
        },
      },
    }),
  }),
});

scene.primitives.add(groundArrow);

参考

GroundPolylinePrimitive - Cesium.js - CesiumJS 官方文档。