原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Polyline.html&label=Geometries

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
const viewer = new Cesium.Viewer("cesiumContainer");

const redLine = viewer.entities.add({
  name: "贴合地面红色多线段(折线)",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    material: Cesium.Color.RED,
    clampToGround: true,
  },
});

/**
 * arcType属性默认值为：ArcType.GEODESIC
 * - NONE: 一条不贴合椭球表面的直线。
 * - GEODESIC: 测地线(大圆)路径
 * - RHUMB: 沿着经线或罗盘(北向)路径。
 */
const greenRhumbLine = viewer.entities.add({
  name: "绿色沿着经线路径的多线段",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
    width: 5,
    arcType: Cesium.ArcType.RHUMB,
    material: Cesium.Color.GREEN,
  },
});

const glowingLine = viewer.entities.add({
  name: "地表蓝色的发光线段",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArray([-75, 37, -125, 37]),
    width: 10,
    material: new Cesium.PolylineGlowMaterialProperty({
      glowPower: 0.2,
      taperPower: 0.5,
      color: Cesium.Color.CORNFLOWERBLUE,
    }),
  },
});

const orangeOutlined = viewer.entities.add({
  name: "沿着地球表面有一定高度的褐色轮廓的橙色线段",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 39, 250000, -125, 39, 250000,
    ]),
    width: 5,
    material: new Cesium.PolylineOutlineMaterialProperty({
      color: Cesium.Color.ORANGE,
      outlineWidth: 2,
      outlineColor: Cesium.Color.BLACK,
    }),
  },
});

const purpleArrow = viewer.entities.add({
  name: "有一定高度的紫色直线",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 43, 500000, -125, 43, 500000,
    ]),
    width: 10,
    arcType: Cesium.ArcType.NONE,
    material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE),
  },
});

const dashedLine = viewer.entities.add({
  name: "蓝色虚线",
  polyline: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
      -75, 45, 500000, -125, 45, 500000,
    ]),
    width: 4,
    material: new Cesium.PolylineDashMaterialProperty({
      color: Cesium.Color.CYAN,
    }),
  },
});

viewer.zoomTo(viewer.entities);

结果如下：