原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=Callback%20Property.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
95
96
97
/**
 * 此示例展示了一个回调属性（Callback Property），该属性的值通过回调函数延迟求值。
 * 当您的数据无法预先计算或需要在运行时从其他属性派生时，请使用回调属性。
 */
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,
});

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

const startLatitude = 35;
const startLongitude = -120;
let endLongitude;
const startTime = Cesium.JulianDate.now();

// 在场景中添加一条折线。位置是动态的。
const isConstant = false;
const redLine = viewer.entities.add({
  polyline: {
    // 此回调会更新每一帧的位置。
    positions: new Cesium.CallbackProperty(function (time, result) {
      endLongitude =
        startLongitude +
        0.001 * Cesium.JulianDate.secondsDifference(time, startTime);
      return Cesium.Cartesian3.fromDegreesArray(
        [startLongitude, startLatitude, endLongitude, startLatitude],
        Cesium.Ellipsoid.WGS84,
        result
      );
    }, isConstant),
    width: 5,
    material: Cesium.Color.RED,
  },
});

const startCartographic = Cesium.Cartographic.fromDegrees(
  startLongitude,
  startLatitude
);

// 使用临时对象以避免每帧进行新的内存分配。
let endCartographic = new Cesium.Cartographic();
const scratch = new Cesium.Cartographic();
const geodesic = new Cesium.EllipsoidGeodesic();

// 计算折线的长度
function getLength(time, result) {
  // 从折线的回调中获取结束位置。
  const endPoint = redLine.polyline.positions.getValue(time, result)[1];
  endCartographic = Cesium.Cartographic.fromCartesian(endPoint);

  geodesic.setEndPoints(startCartographic, endCartographic);
  const lengthInMeters = Math.round(geodesic.surfaceDistance);
  return `${(lengthInMeters / 1000).toFixed(1)} km`;
}

// 获取折线的中点位置
function getMidpoint(time, result) {
  // 从折线的回调中获取结束位置。
  const endPoint = redLine.polyline.positions.getValue(time, result)[1];
  endCartographic = Cesium.Cartographic.fromCartesian(endPoint);

  geodesic.setEndPoints(startCartographic, endCartographic);
  const midpointCartographic = geodesic.interpolateUsingFraction(0.5, scratch);
  return Cesium.Cartesian3.fromRadians(
    midpointCartographic.longitude,
    midpointCartographic.latitude
  );
}

// 用计算的长度标记折线。
const label = viewer.entities.add({
  position: new Cesium.CallbackProperty(getMidpoint, isConstant),
  label: {
    // 此回调函数更新每帧打印的折线长度。
    text: new Cesium.CallbackProperty(getLength, isConstant),
    font: "20px sans-serif",
    pixelOffset: new Cesium.Cartesian2(0.0, 20),
  },
});

// 保持视图居中。
viewer.trackedEntity = label;