原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=AEC%20Isolate%20by%20Category.html&label=All

效果实现如下视频所示：

AEC通常指Architecture, Engineering, and Construction，即建筑、工程和施工。Architectural Design：建筑设计

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
  @import url(../templates/bucket.css);

  #toolbar .cesium-button {
    display: block;
    width: 100%;
    text-align: left;
  }

  .cesium-performanceDisplay-defaultContainer {
    top: 10px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>数据加载中...</h1></div>
<div id="toolbar"></div>
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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/**
 * 基于CategoryID隔离建筑设计元素的演示，使用的样例数据由Autodesk Revit提供。
 */
const viewer = new Cesium.Viewer("cesiumContainer", {
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  shouldAnimate: true,
  geocoder: false,
  globe: false,
});

viewer.cesiumWidget.creditContainer.style.display = "none"; //隐藏版权信息
viewer.scene.debugShowFramesPerSecond = true; //添加帧速显示
viewer.scene.skyAtmosphere.show = true; // 启用渲染天空

// 配置环境光遮蔽(Ambient Occlusion)
if (Cesium.PostProcessStageLibrary.isAmbientOcclusionSupported(viewer.scene)) {
  const ambientOcclusion = viewer.scene.postProcessStages.ambientOcclusion;
  ambientOcclusion.enabled = true;
  ambientOcclusion.uniforms.intensity = 2.0;
  ambientOcclusion.uniforms.bias = 0.1;
  ambientOcclusion.uniforms.lengthCap = 0.5;
  ambientOcclusion.uniforms.directionCount = 16;
  ambientOcclusion.uniforms.stepCount = 32;
}

// 设置为 UTC 费城时间下午 1 点
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
  "2024-11-22T18:00:00Z"
);

// 设置相机的初始视角
viewer.camera.setView({
  destination: Cesium.Cartesian3.fromDegrees(-79.886626, 40.021649, 235.65),
  orientation: {
    heading: 0,
    pitch: Cesium.Math.toRadians(-20),
    roll: 0,
  },
});

// 添加 Photorealistic 3D tiles
let googleTileset;
try {
  googleTileset = await Cesium.Cesium3DTileset.fromIonAssetId(2275207);
  viewer.scene.primitives.add(googleTileset);
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

// 为当前场地添加裁剪多边形
const positions = Cesium.Cartesian3.fromDegreesArray([
  -79.887735, 40.022564, -79.886341, 40.023087, -79.886161, 40.023087,
  -79.885493, 40.022032, -79.88703, 40.021456, -79.887735, 40.022564,
]);

const polygon = new Cesium.ClippingPolygon({
  positions: positions,
});

const polygons = new Cesium.ClippingPolygonCollection({
  polygons: [polygon],
});

googleTileset.clippingPolygons = polygons;

// Add the architectural tileset
let archTileset;
try {
  archTileset = await Cesium.Cesium3DTileset.fromIonAssetId(2887123);
  viewer.scene.primitives.add(archTileset);
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

// 添加场地tileset
try {
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2887129);
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

// 添加按类别隔离的UI按钮
Sandcastle.addToolbarButton("显示所有", function () {
  showAll();
});

Sandcastle.addToolbarButton("仅显示墙体", function () {
  showByCategory(-2000011);
});

Sandcastle.addToolbarButton("仅显示地板", function () {
  showByCategory(-2000032);
});

Sandcastle.addToolbarButton("仅显示楼梯", function () {
  showByCategory(-2000120);
});

Sandcastle.addToolbarButton("仅显示门", function () {
  showByCategory(-2000023);
});

Sandcastle.addToolbarButton("仅显示照明设备", function () {
  showByCategory(-2001120);
});

// 控制样式的函数
function showAll() {
  archTileset.style = new Cesium.Cesium3DTileStyle();
}

function showByCategory(category) {
  archTileset.style = new Cesium.Cesium3DTileStyle({
    show: `\${feature['category']} === '${category}'`,
  });
}