原文链接及内容

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

效果如下视频所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  sceneModePicker: false,
  homeButton: false,
  navigationHelpButton: false,
  baseLayerPicker: false,
  navigationInstructionsInitiallyVisible: false,
  fullscreenButton: false,
  selectionIndicator: false,
  skyBox: false,
  timeline: false,
  animation: false,
  shouldAnimate: true,
});

viewer.cesiumWidget.creditContainer.style.display = "none";

/**
 * 添加广告牌和矩形
 * 距离在0.0~5.5e6范围显示红色矩形
 * 距离大于5.5e6则显示广告牌图标
 */
function addBillboardAndRectangle() {
  Sandcastle.declare(addBillboardAndRectangle);

  viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-77, 40.5),
    billboard: {
      image: "../images/facility.gif",
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(5.5e6),
    },
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(-80.5, 39.7, -75.1, 42.0),
      height: 0.0,
      material: Cesium.Color.RED.withAlpha(0.5),
      outline: true,
      outlineColor: Cesium.Color.RED,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 5.5e6),
    },
  });
}

/**
 * 添加点和模型
 * 距离在0.0~250.5范围显示模型
 * 距离大于250.5则显示黄色的点
 */
function addPointAndModel() {
  Sandcastle.declare(addPointAndModel);

  const position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 0.0);
  const heading = Cesium.Math.toRadians(135);
  const hpr = new Cesium.HeadingPitchRoll(heading, 0.0, 0.0);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    hpr
  );

  viewer.entities.add({
    position: position,
    orientation: orientation,
    point: {
      pixelSize: 10,
      color: Cesium.Color.YELLOW,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(250.5),
    },
    model: {
      uri: "../SampleData/models/GroundVehicle/GroundVehicle.glb",
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 250.5),
    },
  });
}

Sandcastle.addToolbarMenu([
  {
    text: "广告牌和矩形(Primitive,基元)",
    onselect: function () {
      addBillboardAndRectangle();
      Sandcastle.highlight(addBillboardAndRectangle);
    },
  },
  {
    text: "点和模型",
    onselect: function () {
      addPointAndModel();
      Sandcastle.highlight(addPointAndModel);
    },
  },
]);

Sandcastle.reset = function () {
  viewer.camera.flyHome(0);
  viewer.entities.removeAll();
};