3D Tiles 1.1 CDB Yemen【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=3D%20Tiles%201.1%20CDB%20Yemen.html&label=All

注： 由于个人的Cesium Ion中没有官方示例中的数据，因此仅在官方提供的在线编辑器中进行了学习、修改。

实现效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);
  table,
  th,
  td {
    border: 1px solid white;
    border-collapse: collapse;
  }
  tt {
    padding: 8px;
  }
  .cesium-performanceDisplay-defaultContainer {
    top: 10px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>拼命加载数据中...</h1></div>
<div id="toolbar"></div>

/**
 * 本文加载的是也门的数据：关于也门这个国家的介绍请参考：https://zh.wikipedia.org/wiki/%E4%B9%9F%E9%97%A8
 * 1. 3D Tiles是Cesium用于高效流式传输和渲染大规模3D地理空间数据的格式。1.1是规范版本。
 * 关于3D Tiles请参考Cesium官方介绍：https://cesium.com/why-cesium/3d-tiles/
 * 2. CDB为Common Database，是一种用于地理空间数据的标准格式，主要用于军事和仿真领域。
 * 它支持多分辨率、多源数据的集成，适用于大规模3D地理空间数据的存储和管理。
 * Cesium官方有提到，具体参考：https://cesium.com/platform/cesium-ion/3d-tiling-pipeline/cdb/
 */
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,
});

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

viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
  "2021-11-09T07:27:37.016064475348684937Z"
);

const scene = viewer.scene;
/**
 * Cesium.Light：光源，其有color和intensity两个属性，分别标识光的颜色和光的强度。
 * intensity最小值为0.0，没有最大值，默认值为1.0，其值设置为大于1则使得光源更亮。
 */
scene.light.intensity = 7.0;

//根据地点设置不同的相机变换
const cameraTransforms = {
  tileset: {
    destination: new Cesium.Cartesian3(
      4397999.822774582,
      4404502.67774069,
      1397782.4709840622
    ),
    direction: new Cesium.Cartesian3(
      -0.29335588497705106,
      -0.6066709587467911,
      0.7388454997917905
    ),
    up: new Cesium.Cartesian3(
      0.6240972421637774,
      0.46391380837591956,
      0.6287182283994301
    ),
  },
  airport: {
    destination: new Cesium.Cartesian3(
      4394719.151490939,
      4402317.401942875,
      1406608.6602404779
    ),
    direction: new Cesium.Cartesian3(
      0.4146699515908668,
      -0.8887814163588482,
      0.1952342828060377
    ),
    up: new Cesium.Cartesian3(
      0.8415067525520951,
      0.4561872920946922,
      0.28941240460723
    ),
  },
  crater: {
    destination: new Cesium.Cartesian3(
      4398179.160380196,
      4402518.469409466,
      1399161.7612076725
    ),
    direction: new Cesium.Cartesian3(
      -0.2800903637088597,
      -0.6348021519070498,
      0.7201219452923355
    ),
    up: new Cesium.Cartesian3(
      0.6319189548885261,
      0.4427783126727723,
      0.6361020360596605
    ),
  },
  port: {
    destination: new Cesium.Cartesian3(
      4399698.85724341,
      4399019.639078034,
      1405153.7766045567
    ),
    direction: new Cesium.Cartesian3(
      -0.5651458936543287,
      0.17696574231117793,
      -0.8057873447342694
    ),
    up: new Cesium.Cartesian3(
      0.4886488937394081,
      0.8587605935024302,
      -0.15411846642958343
    ),
  },
};

function flyCameraTo(cameraTransform, duration) {
  viewer.camera.flyTo({
    duration: duration,
    destination: cameraTransform.destination,
    orientation: {
      direction: cameraTransform.direction,
      up: cameraTransform.up,
    },
    //https://cesium.com/learn/cesiumjs/ref-doc/EasingFunction.html?classFilter=EasingFunction#.QUARTIC_IN_OUT
    //缓动函数来自 Tween.js，具体请参考页面：https://sole.github.io/tween.js/examples/03_graphs.html
    easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
  });
}

// --- Style ---
/**
 * 关于下述样式采用的是3D Tiles Styling language来书写的，具体参考：
 * 1. https://cesium.com/learn/cesiumjs/ref-doc/Cesium3DTileStyle.html?classFilter=Cesium3DTileStyle
 * 2. https://github.com/CesiumGS/3d-tiles/tree/main/specification/Styling
 */

/**
 * 建筑物样式：按高度分配颜色
 */
const buildingStyle = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ["${HGT} !== undefined && ${HGT} < 5", "color('#f5fd2d')"],
      [
        "${HGT} !== undefined && ${HGT} >= 5 && ${HGT} < 10",
        "color('#d3a34a')",
      ],
      [
        "${HGT} !== undefined && ${HGT} >= 10 && ${HGT} < 15",
        "color('#947e75')",
      ],
      [
        "${HGT} !== undefined && ${HGT} >= 15 && ${HGT} < 20",
        "color('#565a9f')",
      ],
      ["${HGT} !== undefined && ${HGT} > 20", "color('#223bc3')"],
      ["true", "color('white')"],
    ],
  },
});

/**
 * 地形样式，按地物类型来分配颜色
 */
const terrainStyle = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ["${name} === 'OCEAN'", "color('#436d9d')"],
      ["${name} === 'LAKE'", "color('#3987c9')"],
      ["${name} === 'CALCAREOUS'", "color('#BBB6B1')"],
      ["${name} === 'GRASS'", "color('#567d46')"],
      ["${name} === 'FOREST'", "color('green')"],
      ["${name} === 'CITY'", "color('lightgray')"],
      ["${name} === 'ASPHALTROAD'", "color('#434343')"],
      ["${name} === 'ASPHALT'", "color('#463d39')"],
      ["${name} === 'CONCRETE'", "color('#b9b4ab')"],
      ["${name} === 'DRYGROUND'", "color('#9B7653')"],
      ["${name} === 'WETGROUND'", "color('#5a4332')"],
      ["${name} === 'SAND'", "color('gold')"],
      ["true", "color('#9B7653')"],
    ],
  },
});

// --- Picking ---

let enablePicking = true;
const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

const metadataOverlay = document.createElement("div");
viewer.container.appendChild(metadataOverlay);
metadataOverlay.className = "backdrop";
metadataOverlay.style.display = "none";
metadataOverlay.style.position = "absolute";
metadataOverlay.style.bottom = "0";
metadataOverlay.style.left = "0";
metadataOverlay.style["pointer-events"] = "none";
metadataOverlay.style.padding = "4px";
metadataOverlay.style.backgroundColor = "#303030";
metadataOverlay.style.whiteSpace = "pre-line";
metadataOverlay.style.fontSize = "16px";
metadataOverlay.style.borderRadius = "4px";

let tableHtmlScratch;
let materialsScratch;
let weightsScratch;
let i;

const highlighted = {
  feature: undefined,
  originalColor: new Cesium.Color(),
};

const selected = {
  feature: undefined,
  originalColor: new Cesium.Color(),
};

handler.setInputAction(function (movement) {
  if (enablePicking) {
    if (Cesium.defined(highlighted.feature)) {
      highlighted.feature.color = highlighted.originalColor;
      highlighted.feature = undefined;
    }

    const feature = scene.pick(movement.endPosition);
    const featurePicked = feature instanceof Cesium.Cesium3DTileFeature;

    const isTerrainFeature = featurePicked && feature.hasProperty("substrates");
    const isBuildingFeature = featurePicked && feature.hasProperty("HGT");

    if (isTerrainFeature) {
      metadataOverlay.style.display = "block";
      metadataOverlay.style.bottom = `${
        viewer.canvas.clientHeight - movement.endPosition.y
      }px`;
      metadataOverlay.style.left = `${movement.endPosition.x}px`;

      tableHtmlScratch = `<table><thead><tr><td>材质:</td><th><tt>${feature.getProperty(
        "name"
      )}</tt></tr></thead><tbody>`;

      materialsScratch = feature.getProperty("substrates");
      weightsScratch = feature.getProperty("weights");
      tableHtmlScratch +=
        "<tr><td colspan='2' style='text-align: center;'><b>基质</b></td></tr>";

      for (i = 0; i < materialsScratch.length; i++) {
        tableHtmlScratch += `<tr><td><tt>${materialsScratch[i].slice(
          3
        )}</tt></td><td style='text-align: right;'><tt>${
          weightsScratch[i]
        }%</tt></td></tr>`;
      }
      tableHtmlScratch += "</tbody></table>";
      metadataOverlay.innerHTML = tableHtmlScratch;
    } else {
      metadataOverlay.style.display = "none";
    }

    if (isBuildingFeature) {
      if (feature !== selected.feature) {
        highlighted.feature = feature;
        Cesium.Color.clone(feature.color, highlighted.originalColor);
        feature.color = Cesium.Color.MAGENTA;
      }
    }
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

handler.setInputAction(function (movement) {
  if (Cesium.defined(selected.feature)) {
    selected.feature.color = selected.originalColor;
    selected.feature = undefined;
  }

  const feature = scene.pick(movement.position);
  const featurePicked = feature instanceof Cesium.Cesium3DTileFeature;
  const isBuildingFeature = featurePicked && feature.hasProperty("HGT");

  if (isBuildingFeature) {
    if (selected.feature === feature) {
      return;
    }
    selected.feature = feature;

    // 保存选择要素的初始颜色
    if (feature === highlighted.feature) {
      Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
      highlighted.feature = undefined;
    } else {
      Cesium.Color.clone(feature.color, selected.originalColor);
    }
    feature.color = Cesium.Color.LIME;

    tableHtmlScratch = "<table class='cesium-infoBox-defaultTable'>";
    tableHtmlScratch +=
      "<tr><th>属性</th><th>ID</th><th>类型</th><th>属性值</th></tr><tbody>";
    const metadataClass = feature.content.batchTable._propertyTable.class;
    const propertyIds = feature.getPropertyIds();
    const length = propertyIds.length;
    for (let i = 0; i < length; ++i) {
      const propertyId = propertyIds[i];

      // 忽略这些属性, 因为它们属性值基本为空。
      if (
        propertyId === "APID" ||
        propertyId === "FACC" ||
        propertyId === "RWID"
      ) {
        continue;
      }

      const propertyValue = feature.getProperty(propertyId);
      const property = metadataClass.properties[propertyId];

      const propertyType = Cesium.defaultValue(
        property.componentType,
        property.type
      );
      tableHtmlScratch += `<tr style='font-family: monospace;' title='${property.description}'><th>${property.name}</th><th><b>${property.id}</b></th><td>${propertyType}</td><td>${propertyValue}</td></tr>`;
    }
    tableHtmlScratch +=
      "<tr><th colspan='4'><i style='font-size:10px'>将鼠标放在属性表的某行即可看到对应的描述信息</i></th></tr></tbody></table>";
    viewer.selectedEntity.description = tableHtmlScratch;
  }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

// 当鼠标悬停在信息框上时，隐藏地形元数据叠加层，以防止重叠。
const infoBoxContainer = document
  .getElementsByClassName("cesium-viewer-infoBoxContainer")
  .item(0);
infoBoxContainer.onmouseover = function (e) {
  metadataOverlay.style.display = "none";
};

// --- UI ---

const locations = [
  {
    text: "(区域)总览",
    onselect: function () {
      flyCameraTo(cameraTransforms.tileset);
    },
  },
  {
    text: "机场",
    onselect: function () {
      flyCameraTo(cameraTransforms.airport);
    },
  },
  {
    text: "火山口(弹坑)",
    onselect: function () {
      flyCameraTo(cameraTransforms.crater);
    },
  },
  {
    text: "港口",
    onselect: function () {
      flyCameraTo(cameraTransforms.port);
    },
  },
];

/**
 * 重置选中和高亮的要素
 */
function resetHighlight() {
  if (Cesium.defined(selected.feature)) {
    selected.feature.color = selected.originalColor;
    selected.feature = undefined;
  }
  if (Cesium.defined(highlighted.feature)) {
    highlighted.feature.color = highlighted.originalColor;
    highlighted.feature = undefined;
  }
}

try {
  // 该3D Tiles数据位于也门，该数据和下面的建筑物数据在ion中是没有的
  const terrainTileset = await Cesium.Cesium3DTileset.fromIonAssetId(2389063);
  viewer.scene.primitives.add(terrainTileset);
  const buildingsTileset = await Cesium.Cesium3DTileset.fromIonAssetId(
    2389064,
    {
      maximumScreenSpaceError: 12, //默认值为16，用于驱动细节层次优化的最大屏幕空间误差。
    }
  );
  viewer.scene.primitives.add(buildingsTileset);
  const center = Cesium.Cartesian3.fromDegrees(45.04192, 12.753525, 2000);

  viewer.camera.flyTo({
    duration: 0,
    destination: cameraTransforms.tileset.destination,
    orientation: {
      direction: cameraTransforms.tileset.direction,
      up: cameraTransforms.tileset.up,
    },
  });

  const modes = [
    {
      text: "无样式",
      onselect: function () {
        resetHighlight();
        buildingsTileset.style = undefined;
        terrainTileset.style = undefined;
      },
    },
    {
      text: "根据高度设置建筑物样式",
      onselect: function () {
        resetHighlight();
        buildingsTileset.style = buildingStyle;
        terrainTileset.style = undefined;
      },
    },
    {
      text: "根据材质设置地形数据的样式",
      onselect: function () {
        buildingsTileset.style = undefined;
        terrainTileset.style = terrainStyle;
      },
    },
  ];
  Sandcastle.addToolbarMenu(modes);
} catch (error) {
  console.log(`tileset数据加载出错: ${error}`);
}

Sandcastle.addToolbarMenu(locations);
Sandcastle.addToggleButton("启用地形拾取", enablePicking, function (checked) {
  if (enablePicking) {
    metadataOverlay.style.display = "none";
  }

  enablePicking = checked;
});