目录

添加带标签的点

 添加billboard

添加corridor

 添加面polygon

 添加带图片的面polygon

 添加矩形

添加glb模型

 被遮挡的线用其他颜色标注

添加贴地线

---

官方示例：Cesium Sandcastlehttps://sandcastle.cesium.com/?src=Clamp%20to%20Terrain.html&label=Tutorials 

添加带标签的点

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
      point: {
        color: Cesium.Color.SKYBLUE,
        pixelSize: 10,
        outlineColor: Cesium.Color.YELLOW,
        outlineWidth: 3,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
      label: {
        text: "紧贴地面",
        font: "14pt sans-serif",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BASELINE,
        fillColor: Cesium.Color.BLACK,
        showBackground: true,
        backgroundColor: new Cesium.Color(1, 1, 1, 0.7),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
        disableDepthTestDistance: Number.POSITIVE_INFINITY, // draws the label in front of terrain
      },
    });

    viewer.trackedEntity = e;
  },
};
</script>

 添加billboard

资源下载地址：https://sandcastle.cesium.com/images/facility.gif 

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
      billboard: {
        image: "facility.gif",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    });

    viewer.trackedEntity = e;
  },
};
</script>

添加corridor

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    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);
  },
};
</script>

 添加面polygon

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    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);
  },
};
</script>

 添加带图片的面polygon

 

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    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_Logo_Color.jpg",
        classificationType: Cesium.ClassificationType.TERRAIN,
        stRotation: Cesium.Math.toRadians(45),
      },
    });

    viewer.zoomTo(e);
  },
};
</script>

 添加矩形

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    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);
  },
};
</script>

添加glb模型

 

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const e = viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(-122.1958, 46.1915),
      model: {
        uri: "Cesium_Air.glb",
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        minimumPixelSize: 128,
        maximumScale: 100,
      },
    });

    viewer.trackedEntity = e;
  },
};
</script>

 被遮挡的线用其他颜色标注

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;

    const length = 1000;

    const startLon = Cesium.Math.toRadians(86.953793);
    const endLon = Cesium.Math.toRadians(86.896497);

    const lat = Cesium.Math.toRadians(27.988257);

    const terrainSamplePositions = [];
    for (let i = 0; i < length; ++i) {
      const lon = Cesium.Math.lerp(endLon, startLon, i / (length - 1));
      const position = new Cesium.Cartographic(lon, lat);
      terrainSamplePositions.push(position);
    }

    Promise.resolve(
      Cesium.sampleTerrainMostDetailed(
        viewer.terrainProvider,
        terrainSamplePositions
      )
    ).then(function (samples) {
      let offset = 10.0;
      for (let i = 0; i < samples.length; ++i) {
        samples[i].height += offset;
      }

      viewer.entities.add({
        polyline: {
          positions:
            Cesium.Ellipsoid.WGS84.cartographicArrayToCartesianArray(samples),
          arcType: Cesium.ArcType.NONE,
          width: 5,
          material: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.ORANGE,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK,
          }),
          depthFailMaterial: new Cesium.PolylineOutlineMaterialProperty({
            color: Cesium.Color.RED,
            outlineWidth: 2,
            outlineColor: Cesium.Color.BLACK,
          }),
        },
      });

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

添加贴地线

<template>
  <div style="height: 100vh">
    <div id="cesiumContainer" />
  </div>
</template>

<script>
export default {
  name: "test",
  data() {
    return {};
  },
  mounted() {
    const viewer = new Cesium.Viewer("cesiumContainer", {
      terrainProvider: Cesium.createWorldTerrain(),
    });
    viewer.scene.globe.depthTestAgainstTerrain = true;
    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);
  },
};
</script>