原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=3D%20Tiles%20Point%20Cloud%20Classification.html&label=All

注： 由于个人的Cesium Ion中没有官方示例中的数据，因此仅在官方提供的在线编辑器中进行了学习、修改。

实现效果如下图：

示例代码如下：

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
/**
 * 此实例展示了按几何瓦片数据集分类的点云瓦片数据集
 */
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

viewer.cesiumWidget.creditContainer.style.display = "none";//隐藏版权信息
viewer.scene.debugShowFramesPerSecond = true;//添加帧速显示

try {
  /**
   * 点云数据由哥伦比亚大学机器人实验室的 Peter Allen 教授提供,
   * 扫描由 Alejandro Troccoli 和 Matei Ciocarlie 完成。
   */
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(16421);
  viewer.scene.primitives.add(tileset);

  /**
   * Geometry Tiles 是实验性的，其格式在将来可能会发生变化。
   * 有关更多详细信息，请参阅：https://github.com/CesiumGS/3d-tiles/tree/vctr/TileFormats/Geometry
   */
  const classificationTileset = await Cesium.Cesium3DTileset.fromUrl(
    "../SampleData/Cesium3DTiles/Classification/PointCloud/tileset.json",
    {
      classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
    },
  );
  viewer.scene.primitives.add(classificationTileset);

  classificationTileset.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        ["${id} === 'roof1'", "color('#004FFF', 0.5)"],
        ["${id} === 'towerBottom1'", "color('#33BB66', 0.5)"],
        ["${id} === 'towerTop1'", "color('#0099AA', 0.5)"],
        ["${id} === 'roof2'", "color('#004FFF', 0.5)"],
        ["${id} === 'tower3'", "color('#FF8833', 0.5)"],
        ["${id} === 'tower4'", "color('#FFAA22', 0.5)"],
        ["true", "color('#FFFF00', 0.5)"],
      ],
    },
  });
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

viewer.scene.camera.setView({
  destination: new Cesium.Cartesian3(
    4401744.644145314,
    225051.41078911052,
    4595420.374784433,
  ),
  orientation: new Cesium.HeadingPitchRoll(
    5.646733805039757,
    -0.276607153839886,
    6.281110875400085,
  ),
});

// 定义高亮要素信息
const highlighted = {
  feature: undefined,
  originalColor: new Cesium.Color(),
};

// 在鼠标在要素上悬浮显示黄色
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
  if (Cesium.defined(highlighted.feature)) {
    highlighted.feature.color = highlighted.originalColor;
    highlighted.feature = undefined;
  }

  const pickedFeature = viewer.scene.pick(movement.endPosition);
  if (!Cesium.defined(pickedFeature)) {
    return;
  }

  highlighted.feature = pickedFeature;
  Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
  pickedFeature.color = Cesium.Color.YELLOW.withAlpha(0.5);
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
1
2
3
4
5
6
7
8
9
<style>
  @import url(../templates/bucket.css);
  .cesium-performanceDisplay-defaultContainer {
    top: 10px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>