I3S 3D Object Layer【译】

原文链接及内容

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

效果如下图所示： 通过鼠标左键单击拾取要素，并在infobox中展示元数据信息。

示例代码如下：

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

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";

/**
 * 可以在此处添加更多可供浏览的数据集...
 * 
 * 传递给 I3SDataProvider 的 url，支持从 SceneServer 
 * 加载单个索引 3D 场景(I3S)图层(.<host>/SceneServer/layers/<id>)
 * 或场景图层集合(.<host>/SceneServer)。
 */
const tours = {
  "San Francisco":
    "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/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["San Francisco"],
    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}`);
}

//一个实体对象，它将保存有关当前选定要素的信息，以便在信息框(cesium自带的infobox组件)中显示
const selectedEntity = new Cesium.Entity();
//在InfoBox中展示元数据信息
viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
  //(鼠标)拾取一个新的要素
  const pickedFeature = viewer.scene.pick(movement.position);
  if (!Cesium.defined(pickedFeature)) {
    return;
  }

  const pickedPosition = viewer.scene.pickPosition(movement.position);

  if (
    Cesium.defined(pickedFeature.content) &&
    Cesium.defined(pickedFeature.content.tile.i3sNode)
  ) {
    const i3sNode = pickedFeature.content.tile.i3sNode;
    if (pickedPosition) {
      i3sNode.loadFields().then(function () {
        let description = "No attributes";
        let name;

        const fields = i3sNode.getFieldsForPickedPosition(pickedPosition);
        if (Object.keys(fields).length > 0) {
          description = '<table class="cesium-infoBox-defaultTable"><tbody>';
          for (const fieldName in fields) {
            if (i3sNode.fields.hasOwnProperty(fieldName)) {
              description += `<tr><th>${fieldName}</th><td>`;
              description += `${fields[fieldName]}</td></tr>`;
              if (!Cesium.defined(name) && isNameProperty(fieldName)) {
                name = fields[fieldName];
              }
            }
          }
          description += `</tbody></table>`;
        }
        if (!Cesium.defined(name)) {
          name = "unknown";
        }
        selectedEntity.name = name;
        selectedEntity.description = description;
        viewer.selectedEntity = selectedEntity;
      });
    }
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

function isNameProperty(propertyName) {
  const name = propertyName.toLowerCase();
  if (name.localeCompare("name") === 0 || name.localeCompare("objname") === 0) {
    return true;
  }
  return false;
}