之前做的Demo,每天一个小时更新一组AQI的数据,根据AQI的数值改变行政区划的颜色及拉伸高度,播放的时候是颜色变化比较眨眼,高度变化也是一跳一跳的,后来尝试采用差值的方式进行渲染,效果很好,颜色渐变的改变,高度也是缓动的效果。
更改czml的内容如下:
var czml = [
{
"id" : "document",
"name" : "CZML Point - Time Dynamic",
"version" : "1.0"
},
{
"id" : "dongchengqu",
"name" : "东城区AQI",
"availability":"2016-01-01T00:00:00Z/2016-01-02T00:00:00Z",
"polygon" : {
"positions" : {
"cartographicDegrees" :
[116.4436,39.8728,0,116.443,39.8719,0,116.4269,39.8727,0,116.422,39.8724,0,116.4169,39.8715,0,116.4158,39.8694,0,116.4152,39.8671,0,116.4158,39.8658,0,116.4144,39.8637,0,116.4125,39.8589,0,116.4042,39.8597,0,116.3955,39.8587,0,116.395,39.8621,0,116.3943,39.8626,0,116.3923,39.8637,0,116.3879,39.866,0,116.3853,39.8671,0,116.3807,39.8661,0,116.3777,39.8667,0,116.3787,39.867,0,116.3796,39.868,0,116.3848,39.8715,0,116.3985,39.8802,0,116.3981,39.891,0,116.3976,39.8987,0,116.3961,39.8994,0,116.3956,39.908,0,116.3918,39.9112,0,116.3921,39.9129,0,116.3968,39.9235,0,116.3967,39.9283,0,116.3942,39.9443,0,116.3877,39.9609,0,116.3987,39.9626,0,116.4014,39.9624,0,116.4055,39.9619,0,116.4077,39.9666,0,116.4074,39.9697,0,116.4076,39.9714,0,116.4088,39.9725,0,116.4122,39.9638,0,116.4254,39.9592,0,116.429,39.9573,0,116.429,39.9543,0,116.43,39.9519,0,116.4299,39.951,0,116.4295,39.9502,0,116.434,39.9499,0,116.4348,39.949,0,116.4368,39.9497,0,116.4354,39.9521,0,116.4393,39.9512,0,116.4422,39.9491,0,116.4407,39.9471,0,116.4393,39.9471,0,116.4394,39.9461,0,116.4411,39.9451,0,116.442,39.9451,0,116.4426,39.9457,0,116.4447,39.9462,0,116.4469,39.9457,0,116.4472,39.9449,0,116.4464,39.9427,0,116.4449,39.9418,0,116.4445,39.9392,0,116.4437,39.9367,0,116.439,39.9286,0,116.4375,39.9286,0,116.4347,39.9212,0,116.4351,39.9134,0,116.4358,39.9068,0,116.4365,39.902,0,116.438,39.9026,0,116.4416,39.903,0,116.4461,39.9032,0,116.448,39.9012,0,116.4468,39.8981,0,116.4509,39.8929,0,116.4504,39.8902,0,116.4474,39.8912,0,116.4441,39.89,0,116.4456,39.8789,0,116.4443,39.8758,0]
},
"material" : {
"solidColor" : {
"color" : {
"epoch" : "2016-01-01T00:00:00Z",
"rgba": [
0, 255, 255, 0, 255,
36000, 255, 126 ,0, 255,
72000, 255 ,0, 0, 255,
86400,153, 0, 76,255
]
}}
},
"perPositionHeight" : false,
"extrudedHeight":{
"epoch" : "2016-01-01T00:00:00Z",
"number":[
0,1000,
10800,1255,
21600,1430,
43200,1580,
86400,2350]
}
}
}
];
var viewer = new Cesium.Viewer('cesiumContainer');
var dataSource=Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.flyTo(dataSource);
rgba或extrudedHeight的值可以通过数组表示
0,1000,://从起点开始,第0秒钟的拉伸高度,即AQI值
10800,1255,//从起点开始,第3小时的拉伸高度,即AQI值
......
代码省略了差值算法的设定,使用了默认的差值算法
"interpolationAlgorithm": "LAGRANGE", //插值算法为LAGRANGE,还有HERMITE,GEODESIC
"interpolationDegree": 5 //1为线性插值,2为平方插值