Clamp Entities to Ground【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Clamp%20Entities%20to%20Ground.html&label=All

效果如下视频所示：

示例代码如下：

<style>
  @import url(../templates/bucket.css);
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>数据加载中...</h1></div>
<div id="toolbar">
  <div id="terrainMenu"></div>
  <div id="zoomButtons"></div>
  <div id="toggleLighting"></div>
  <div id="sampleButtons"></div>
</div>

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

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

let worldTerrain;
try {
  worldTerrain = await Cesium.createWorldTerrainAsync();
  viewer.scene.terrainProvider = worldTerrain;
  scene.globe.show = false;
} catch (error) {
  window.alert(`创建 world terrain 时出错. ${error}`);
}

let worldTileset;
try {
  worldTileset = await Cesium.createGooglePhotorealistic3DTileset({
    /**
     * 只有 Google Geocoder 可与 Google Photorealistic 3D Tiles 配合使用。
     * 将查看器构造函数选项的`geocode`属性设置为 IonGeocodeProviderType.GOOGLE。
     */
    onlyUsingWithGoogleGeocoder: true,
  });
  viewer.scene.primitives.add(worldTileset);
} catch (error) {
  console.log(`加载 Photorealistic 3D Tiles 图块集时出错. ${error}`);
}

Sandcastle.addToolbarMenu([
  {
    text: "加载3D Tiles",
    onselect: () => {
      scene.globe.show = false;
      worldTileset.show = true;
    },
  },
  {
    text: "加载地形",
    onselect: () => {
      scene.globe.show = true;
      worldTileset.show = false;
    },
  },
]);

Sandcastle.addDefaultToolbarMenu([
  {
    /**
     * 要点或广告牌贴地，
     * 请将heightReference属性设置为 CLAMP_TO_GROUND 或 RELATIVE_TO_GROUND
     */
    text: "绘制一个带标签的点",
    onselect: function () {
      viewer.entities.removeAll();
      const pointAndLabel = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-122.1965, 46.1915),
        point: {
          color: Cesium.Color.CORNFLOWERBLUE,
          pixelSize: 18,
          outlineColor: Cesium.Color.DARKSLATEGREY,
          outlineWidth: 3,
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
        label: {
          text: "贴合在地表",
          font: "14pt sans-serif",
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BASELINE,
          fillColor: Cesium.Color.GHOSTWHITE,
          showBackground: true,
          backgroundColor: Cesium.Color.DARKSLATEGREY.withAlpha(0.8),
          backgroundPadding: new Cesium.Cartesian2(8, 4),
          pixelOffset: new Cesium.Cartesian2(15, 6),
          disableDepthTestDistance: Number.POSITIVE_INFINITY,
        },
      });
      viewer.trackedEntity = pointAndLabel;
    },
  },
  {
    text: "绘制Billboard",
    onselect: function () {
      viewer.entities.removeAll();
      const e = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
        billboard: {
          image: "../images/facility.gif",
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        },
      });

      viewer.trackedEntity = e;
    },
  },
  {
    /**
     * 走廊、多边形和矩形若填充了单一颜色且未设置高度或拉伸高度，将被自动贴合至地面。
     * 注意：将高度设为 0 会禁用贴合功能。
     */
    text: "绘制Corrido(走廊)",
    onselect: function () {
      viewer.entities.removeAll();
      const e = viewer.entities.add({
        corridor: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            -122.19, 46.1914, -122.21, 46.21, -122.23, 46.21,
          ]),
          width: 2000.0,
          material: Cesium.Color.GREEN.withAlpha(0.5),
        },
      });

      viewer.zoomTo(e);
    },
  },
  {
    text: "绘制多边形",
    onselect: function () {
      viewer.entities.removeAll();
      const e = viewer.entities.add({
        polygon: {
          hierarchy: {
            positions: [
              new Cesium.Cartesian3(
                -2358138.847340281,
                -3744072.459541374,
                4581158.5714175375,
              ),
              new Cesium.Cartesian3(
                -2357231.4925370603,
                -3745103.7886602185,
                4580702.9757762635,
              ),
              new Cesium.Cartesian3(
                -2355912.902205431,
                -3744249.029778454,
                4582402.154378103,
              ),
              new Cesium.Cartesian3(
                -2357208.0209552636,
                -3743553.4420488174,
                4581961.863286629,
              ),
            ],
          },
          material: Cesium.Color.BLUE.withAlpha(0.5),
        },
      });

      viewer.zoomTo(e);
    },
  },
  {
    text: "绘制带纹理的多边形",
    onselect: function () {
      if (!Cesium.Entity.supportsMaterialsforEntitiesOnTerrain(viewer.scene)) {
        window.alert(
          "该平台不支持地形实体材质",
        );
        return;
      }

      viewer.entities.removeAll();
      const e = viewer.entities.add({
        polygon: {
          hierarchy: {
            positions: [
              new Cesium.Cartesian3(
                -2358138.847340281,
                -3744072.459541374,
                4581158.5714175375,
              ),
              new Cesium.Cartesian3(
                -2357231.4925370603,
                -3745103.7886602185,
                4580702.9757762635,
              ),
              new Cesium.Cartesian3(
                -2355912.902205431,
                -3744249.029778454,
                4582402.154378103,
              ),
              new Cesium.Cartesian3(
                -2357208.0209552636,
                -3743553.4420488174,
                4581961.863286629,
              ),
            ],
          },
          material: "../images/Cesium_Logo_Color.jpg",
          classificationType: Cesium.ClassificationType.BOTH,
          stRotation: Cesium.Math.toRadians(45),
        },
      });

      viewer.zoomTo(e);
    },
  },
  {
    text: "绘制矩形",
    onselect: function () {
      viewer.entities.removeAll();
      const e = viewer.entities.add({
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(-122.3, 46.0, -122.0, 46.3),
          material: Cesium.Color.RED.withAlpha(0.5),
        },
      });

      viewer.zoomTo(e);
    },
  },
  {
    text: "绘制模型",
    onselect: function () {
      viewer.entities.removeAll();
      const e = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
        model: {
          uri: "../SampleData/models/CesiumMan/Cesium_Man.glb",
          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
          minimumPixelSize: 128,
          maximumScale: 100,
        },
      });

      viewer.trackedEntity = e;
    },
  },
  {
    text: "绘制折线(多线段)",
    onselect: function () {
      if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
        window.alert("此平台不支持在地形上(贴合)多段线");
      }

      viewer.entities.removeAll();
      viewer.entities.add({
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray([
            86.953793, 27.928257, 86.953793, 27.988257, 86.896497, 27.988257,
          ]),
          clampToGround: true,
          width: 5,
          material: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.ORANGE,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK,
          }),
        },
      });

      const target = new Cesium.Cartesian3(
        300770.50872389384,
        5634912.131394585,
        2978152.2865545116,
      );
      const offset = new Cesium.Cartesian3(
        6344.974098678562,
        -793.3419798081741,
        2499.9508860763162,
      );
      viewer.camera.lookAt(target, offset);
      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    },
  },
]);