AEC Metadata Styling【译】

原文链接及内容

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

效果实现如下视频所示：

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

示例代码如下：

<style>
  @import url(../templates/bucket.css);

  #toolbar {
    background: rgba(42, 42, 42, 0.8);
    padding: 4px;
    border-radius: 4px;
  }

  .slider {
    width: 100%;
  }

  .label {
    display: block;
    margin-bottom: 5px;
  }

  .cesium-performanceDisplay-defaultContainer {
    top: 10px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>数据加载中...</h1></div>
<div id="toolbar">
  <div class="slider-container">
    <label for="minSlider" class="label">
      最小值:
      <span id="minValue">5</span>
    </label>
    <input
      type="range"
      id="minSlider"
      class="slider"
      min="0"
      max="39"
      value="5"
    />
  </div>
  <div class="slider-container">
    <label for="maxSlider" class="label">
      最大值:
      <span id="maxValue">10</span>
    </label>
    <input
      type="range"
      id="maxSlider"
      class="slider"
      min="1"
      max="40"
      value="10"
    />
  </div>
</div>

/**
 * 示例介绍：该演示展示了如何根据嵌入的元数据和 UI 输入动态地设置建筑设计元素的样式。
 * Snowdon Towers 示例数据由 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;

//将建筑tileset以半透明幽灵(semi-transparent ghost)效果添加
try {
  const tileset = await Cesium.Cesium3DTileset.fromIonAssetId(2887123);
  viewer.scene.primitives.add(tileset);
  tileset.style = new Cesium.Cesium3DTileStyle({
    color: "color('lightblue', 0.05)",
  });
} 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}`);
}

/**
 * 添加HVAC瓦片集，其样式将根据元数据设置
 * HVAC是“Heating, Ventilation, and Air Conditioning”的缩写，即供暖、通风和空调系统。
 */
let pipeTileset;
try {
  pipeTileset = await Cesium.Cesium3DTileset.fromIonAssetId(2887126);
  pipeTileset.maximumScreenSpaceError = 4;
  viewer.scene.primitives.add(pipeTileset);
} catch (error) {
  console.log(`Error loading tileset: ${error}`);
}

// 配置UI
const minSlider = document.getElementById("minSlider");
const maxSlider = document.getElementById("maxSlider");
const minValueDisplay = document.getElementById("minValue");
const maxValueDisplay = document.getElementById("maxValue");

minSlider.oninput = function () {
  //如果最小值超过最大值，则调整最大值，使其与最小值相同
  if (parseInt(minSlider.value) > parseInt(maxSlider.value)) {
    maxSlider.value = minSlider.value;
  }
  minValueDisplay.textContent = minSlider.value;
  maxValueDisplay.textContent = maxSlider.value;
  updateHighlighting();
};

maxSlider.oninput = function () {
  //如果最大值小于最小值,调整最小值，使其与最大值相同
  if (parseInt(maxSlider.value) < parseInt(minSlider.value)) {
    minSlider.value = maxSlider.value;
  }
  maxValueDisplay.textContent = maxSlider.value;
  minValueDisplay.textContent = minSlider.value;
  updateHighlighting();
};

//更新基于元数据和 UI 元素的管道瓦片集的高亮显示
function updateHighlighting() {
  const min = minSlider.value;
  const max = maxSlider.value;
  pipeTileset.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        [
          `(\${length} !== undefined && \${length} >= ${min}) && (\${length} <= ${max})`,
          'color("red")',
        ],
      ],
    },
  });
}

updateHighlighting();