原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Sample%20Height%20from%203D%20Tiles.html&label=All

效果如下图所示：

折线在被遮挡时仍可见，这里我们调整一下角度，截图看一下效果：这是因为我们指定了depthFailMaterial属性。

示例代码如下：

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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.creditContainer.style.display = "none";

const scene = viewer.scene;

// 检查当前 WebGL 环境是否支持将点贴合到地形表面的功能（依赖高程查询）
if (!scene.clampToHeightSupported) {
  window.alert("该浏览器不支持clampToHeightMostDetailed.");
}

scene.camera.setView({
  destination: new Cesium.Cartesian3(
    1216411.0748779264,
    -4736313.10747583,
    4081359.5125561724,
  ),
  orientation: new Cesium.HeadingPitchRoll(
    4.239925103568368,//约 242.9°，西南方向
    -0.4911293834802475,//约 -28.1°，向下俯视
    6.279849292088564,//约 360°，几乎水平
  ),
  endTransform: Cesium.Matrix4.IDENTITY,
});

try {
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(40866);
  scene.primitives.add(tileset);
} catch (error) {
  console.log(`tileset加载出错: ${error}`);
}

// 采样高度并绘制线段实体
async function sampleHeights() {
  viewer.entities.removeAll();

  // 定义起点和终点
  const cartesian1 = new Cesium.Cartesian3(
    1216390.063324395,
    -4736314.814479433,
    4081341.9787972216,
  );
  const cartesian2 = new Cesium.Cartesian3(
    1216329.5413318684,
    -4736272.029009798,
    4081407.9342479417,
  );

  const count = 30;//插值点个数为30个
  const cartesians = new Array(count);
  // 使用线性插值（lerp）在 cartesian1 和 cartesian2 之间生成点，offset 从 0 到 1
  for (let i = 0; i < count; ++i) {
    const offset = i / (count - 1);
    cartesians[i] = Cesium.Cartesian3.lerp(
      cartesian1,
      cartesian2,
      offset,
      new Cesium.Cartesian3(),
    );
  }

  // 异步将 30 个点的高度调整到地形表面（考虑地形和瓦片集的高度），返回贴合后的坐标
  const clampedCartesians = await scene.clampToHeightMostDetailed(cartesians);

  // 以上述采样点绘制球体：一个半径 0.2 米的红色球体
  for (let i = 0; i < count; ++i) {
    viewer.entities.add({
      position: clampedCartesians[i],
      ellipsoid: {
        radii: new Cesium.Cartesian3(0.2, 0.2, 0.2),
        material: Cesium.Color.RED,
      },
    });
  }

  // 绘制折线
  viewer.entities.add({
    polyline: {
      positions: clampedCartesians,
      arcType: Cesium.ArcType.NONE,//折线为直线段（无弧形）
      width: 2,
      material: new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.YELLOW,
      }),
      // 折线在被遮挡时仍可见
      depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
        color: Cesium.Color.YELLOW,
      }),
    },
  });
}

sampleHeights();