原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=3D%20Tiles%20Photogrammetry%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
/**
 * 一个使用 b3dm 瓦片集对另一个 b3dm 瓦片集进行分类的示例。
 */

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 {
  // 一个包含摄影测量的常规 b3dm 瓦片集
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(40866);
  viewer.scene.primitives.add(tileset);
  viewer.zoomTo(tileset);

  const classificationTilesetUrl =
    "../SampleData/Cesium3DTiles/Classification/Photogrammetry/tileset.json";
  // 用于对摄影测量瓦片集进行分类的 b3dm 瓦片集
  const classificationTileset = await Cesium.Cesium3DTileset.fromUrl(
    classificationTilesetUrl,
    {
      classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
    },
  );
  classificationTileset.style = new Cesium.Cesium3DTileStyle({
    color: "rgba(255, 0, 0, 0.5)",
  });
  viewer.scene.primitives.add(classificationTileset);

  // 用于分类的相同 b3dm 瓦片集，但正常渲染以供比较。
  const nonClassificationTileset = await Cesium.Cesium3DTileset.fromUrl(
    classificationTilesetUrl,
    {
      show: false,
    },
  );
  nonClassificationTileset.style = new Cesium.Cesium3DTileStyle({
    color: "rgba(255, 0, 0, 0.5)",
  });
  viewer.scene.primitives.add(nonClassificationTileset);

  Sandcastle.addToggleButton("显示分类", true, function (checked) {
    classificationTileset.show = checked;
    nonClassificationTileset.show = !checked;
  });
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

界面布局文件index.html代码如下：

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>