Cesium Inspector【译】

原文链接及内容

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

效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);
  .cesium-performanceDisplay-defaultContainer {
    left: 10px;
    right: auto;
    top: 10px;
  }
  
  .cesium-viewer-cesiumInspectorContainer {
    top: 10px;
  }
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
  <div id="terrainMenu"></div>
  <div id="zoomButtons"></div>
  <div id="sampleButtons"></div>
</div>

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: 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";
//添加帧速显示
viewer.scene.debugShowFramesPerSecond = true;

const scene = viewer.scene;
scene.globe.depthTestAgainstTerrain = true;

/**
 * 添加 Cesium Inspector，用于调试
 * - 查看相机位置、视锥体、地形层级等实时信息。
 * - 切换地形/模型渲染模式。
 * - 分析性能指标。
 */
viewer.extend(Cesium.viewerCesiumInspectorMixin);

//添加基元(Primitives)，添加一个红色长方体
scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: Cesium.BoxGeometry.fromDimensions({
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
        //长方体的长宽高
        dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
      }),
      modelMatrix: Cesium.Matrix4.multiplyByTranslation(
        //定义一个东北天坐标系
        Cesium.Transforms.eastNorthUpToFixedFrame(
          Cesium.Cartesian3.fromDegrees(-105.0, 45.0),
        ),
        //沿垂直方向（Z轴）上移 250,000 米，使长方体悬空。
        new Cesium.Cartesian3(0.0, 0.0, 250000),
        new Cesium.Matrix4(),
      ),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(
          Cesium.Color.RED.withAlpha(0.5),
        ),
      },
    }),
    appearance: new Cesium.PerInstanceColorAppearance({
      //closed: true 表示长方体六个面均渲染
      closed: true,
    }),
  }),
);

//添加蓝色矩形
scene.primitives.add(
  new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
      geometry: new Cesium.RectangleGeometry({
        rectangle: Cesium.Rectangle.fromDegrees(-100.0, 30.0, -93.0, 37.0),
        height: 100000,
        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
      }),
      attributes: {
        color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.BLUE),
      },
    }),
    appearance: new Cesium.PerInstanceColorAppearance(),
  }),
);

//添加广告牌
const billboards = scene.primitives.add(new Cesium.BillboardCollection());
billboards.add({
  position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 150000),
  image: "../images/Cesium_Logo_overlay.png",
});