原文链接及内容

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

效果实现如下视频所示：

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

示例代码如下：

1
2
3
4
5
6
7
8
9
10
<style>
  @import url(../templates/bucket.css);
  .cesium-performanceDisplay-defaultContainer {
    top: 6px;
    right: 50px;
  }
</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
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: Cesium.IonGeocodeProviderType.GOOGLE,
  // 因为Photorealistic 3D Tiles数据包含地形，因此地球无需显示
  globe: false,
});

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

// 启用渲染天空
viewer.scene.skyAtmosphere.show = true;

viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
  "2020-01-09T23:00:39.018261982600961346Z"
);

// 添加 Photorealistic 3D Tiles
let googleTileset;
try {
  googleTileset = await Cesium.createGooglePhotorealistic3DTileset({
    onlyUsingWithGoogleGeocoder: true,
  });
  viewer.scene.primitives.add(googleTileset);
} catch (error) {
  console.log(`Error loading Photorealistic 3D Tiles tileset.
  ${error}`);
}

// 加载包含定义项目范围坐标的GeoJSON文件
let footprint;
try {
  const resource = await Cesium.IonResource.fromAssetId(2533131);
  const dataSource = await Cesium.GeoJsonDataSource.load(resource, {
    clampToGround: true,
  });

  viewer.dataSources.add(dataSource);

  footprint = dataSource.entities.values.find((entity) =>
    Cesium.defined(entity.polygon)
  );
  footprint.polygon.outline = false;

  // 缩放至数据位置, 并设置 home view
  const cameraOffset = new Cesium.HeadingPitchRange(
    Cesium.Math.toRadians(95.0),
    Cesium.Math.toRadians(-75.0),
    800.0
  );
  viewer.zoomTo(footprint, cameraOffset);
  viewer.homeButton.viewModel.command.beforeExecute.addEventListener((e) => {
    e.cancel = true;
    viewer.zoomTo(footprint, cameraOffset);
  });
} catch (error) {
  console.log(`Error loading geojson. ${error}`);
}

// 基于已加载的项目范围添加裁剪区域
const positions = footprint.polygon.hierarchy.getValue().positions;
const clippingPolygons = new Cesium.ClippingPolygonCollection({
  polygons: [
    new Cesium.ClippingPolygon({
      positions: positions,
    }),
  ],
});
googleTileset.clippingPolygons = clippingPolygons;

// 添加拟建项目设计方案的3D Tileset
let buildingTileset;
try {
  buildingTileset = await Cesium.Cesium3DTileset.fromIonAssetId(2533124);
  viewer.scene.primitives.add(buildingTileset);
} catch (error) {
  console.log(`Error loading design tileset.
  ${error}`);
}

Sandcastle.addToggleButton(
  "显示拟建设计方案的3D模型",
  true,
  function (checked) {
    buildingTileset.show = checked;
  }
);

Sandcastle.addToggleButton("显示范围", true, function (checked) {
  footprint.show = checked;
});

Sandcastle.addToggleButton("裁剪目标区域", true, function (checked) {
  clippingPolygons.enabled = checked;
});

Sandcastle.addToggleButton("反选裁剪区域", false, function (checked) {
  clippingPolygons.inverse = checked;
});