原文链接及内容

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

实现效果如下所示：

示例代码如下：

本文定义的CZML数据的语法请参考：

  1. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Structure
  2. https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/Packet
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<template>
  <CesiumMap @viewerCreated="viewerCreated" />
  <el-select
    class="select"
    v-model="type"
    placeholder="空"
    @change="handleTypeChange">
    <el-option
      v-for="item in types"
      :key="item.value"
      :label="item.label"
      :value="item.value" />
  </el-select>
</template>

<script setup>
/**
 * 示例介绍：
 * 该场景最终呈现科罗拉多州区域随着时间推进（1970-2010年），
 * 根据不同人口数据模式（离散区间/连续采样）产生对应的高度变化效果，
 * 数据可视化比例经过适配处理以优化显示效果。
 */

//#region --------------------- 定义变量----------------
let viewer;

const type = ref("Use interval data");

const types = reactive([
  { value: "Use interval data", label: "使用区间数据" },
  { value: "Use sampled data", label: "使用采样数据" },
]);

const czml = [
  {
    id: "document",
    name: "CZML Custom Properties",
    version: "1.0",
    clock: {
      interval: "1970/2010",//时间轴为1970年到2010年
      currentTime: "1970",//起始年份为1970年
      multiplier: 500000000, //以5亿倍速播放
    },
  },
  {
    id: "custom_property_object",
    name: "An object with custom properties",
    properties: {
      constant_property: true,
      //按年代区间划分的离散数据
      population_intervals: [
        {
          interval: "1970/1980",
          number: 2209600,
        },
        {
          interval: "1980/2090",
          number: 2889700,
        },
        {
          interval: "1990/2000",
          number: 3307600,
        },
        {
          interval: "2000/2010",
          number: 4326900,
        },
      ],
      //时间-数值对的连续采样数据
      population_sampled: {
        number: [
          "1970",
          2209600,
          "1980",
          2889700,
          "1990",
          3307600,
          "2000",
          4326900,
          "2010",
          5049100,
        ],
      },
    },
  },
  {
    id: "colorado",
    name: "科罗拉多州",
    polygon: {
      positions: {
        //定义了矩形的四个点经纬度和高程
        cartographicDegrees: [
          -109.03, 41, 0, 
          -102.03, 41, 0, 
          -102.03, 37, 0, 
          -109.03, 37, 0,
        ],
      },
      material: {
        //半透明绿色填充
        solidColor: {
          color: {
            rgba: [0, 255, 0, 150],
          },
        },
      },
      height: 0,
      extrudedHeight: 0,
    },
  },
];

const dataSource = new Cesium.CzmlDataSource();
const loadedPromise = dataSource.load(czml);

//#endregion

function viewerCreated(v) {
  viewer = v;
  viewer.dataSources.add(dataSource);
  viewer.zoomTo(dataSource);
  handleTypeChange(type.value);
}

//#region --------------------- 方法区域----------------
function handleTypeChange(value) {
  switch (value) {
    case "Use interval data":
      setExtrudedHeight("population_intervals");
      break;
    case "Use sampled data":
      setExtrudedHeight("population_sampled");
      break;
    default:
      break;
  }
}

function setExtrudedHeight(propertyName) {
  loadedPromise.then(function () {
    const customPropertyObject = dataSource.entities.getById(
      "custom_property_object"
    );
    const property = customPropertyObject.properties[propertyName];
    const colorado = dataSource.entities.getById("colorado");

    /**
     * 由于人口数值很大，我们将其缩小 50 倍以便在屏幕上显示。
     * 如果我们不需要缩放，我们可以直接将属性分配给 extrudedHeight。
     * 这里我们缩小了50倍colorado.polygon.extrudedHeight = scaleProperty(property, 1 / 50.0);
     */
    colorado.polygon.extrudedHeight = scaleProperty(property, 1 / 50.0);
  });
}

/**
 * 创建动态属性转换器，通过回调函数实时缩放原始数据
 * 通过CallbackProperty实现实时数值计算
 */
function scaleProperty(property, scalingFactor) {
  /**
   * 返回按常数因子缩放另外一个属性的 CallbackProperty
   * Cesium.CallbackProperty: 返回一个 Property类型，其值由回调函数延迟计算。
   */

  return new Cesium.CallbackProperty(function (time, result) {
    result = property.getValue(time, result);
    result = result * scalingFactor;
    return result;
  }, property.isConstant);
}
//#endregion
</script>

<style lang="scss" scoped>
.select {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 180px;
}
</style>