原文链接及内容

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

效果如下图所示：

示例代码如下：

注：关于I3S（Index 3D Scene）请参考文章：https://cesium.com/blog/2023/02/06/cesiumjs-adds-support-for-indexed-3d-scene-layers-i3s/ 。

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
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  navigationHelpButton: 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";

/**
 * depthTestAgainstTerrain:设置为false表示禁用地形深度测试，效果为：
 *  - 场景中的对象（例如点、线、模型、实体等）在渲染时不会被地形遮挡。
 *  - 即使对象位于地形下方（例如低于地形高度），它们仍然会被渲染为可见。
 *  - 这意味着所有对象都会绘制在场景中，忽略地形的高度信息。
 */
viewer.scene.globe.depthTestAgainstTerrain = false;

/**
 * 可以在此处添加更多可供浏览的数据集...
 * 
 * 传递给 I3SDataProvider 的 url，支持从 SceneServer 
 * 加载单个索引 3D 场景(I3S)图层(.<host>/SceneServer/layers/<id>)
 * 或场景图层集合(.<host>/SceneServer)。
 */
const tours = {
  Frankfurt:
    "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/Frankfurt2017_vi3s_18/SceneServer/layers/0",
};
try {
  /**
   * 初始化一个terrain provider，该terrain provider在重力相关的（通常为 I3S 数据集）
   * 和基于椭球面的高度系统（如 Cesium 世界地形）之间提供大地水准面转换。
   * 
   * 如果没有指定或 URL 无效，则不会应用重力模型转换。
   * 
   * 本转码服务使用的源数据来自 https://earth-info.nga.mil/#tab_wgs84-data，基于 EGM2008 重力模型。
   */
  const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl(
    "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer",
  );

  // 创建 i3s 选项以传递用于调试和可视化的可选参数
  const i3sOptions = {
    geoidTiledTerrainProvider: geoidService, // 通过大地水准面(geoid)服务
  };

  /// 创建一个 I3S data provider
  const i3sProvider = await Cesium.I3SDataProvider.fromUrl(
    tours.Frankfurt,
    i3sOptions,
  );

  //将 i3s layer provider作为基本数据类型添加
  viewer.scene.primitives.add(i3sProvider);

  //I3S 加载数据完毕后将相机置于数据范围的中心
  const center = Cesium.Rectangle.center(i3sProvider.extent);
  center.height = 5000.0;
  viewer.camera.setView({
    destination: Cesium.Ellipsoid.WGS84.cartographicToCartesian(center),
  });
} catch (error) {
  console.log(`创建 I3S Data Provider时出错: ${error}`);
}