Cesium之CZML的插值

之前做的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);

epoch:代表开始的时间

rgba或extrudedHeight的值可以通过数组表示

0,1000,://从起点开始,第0秒钟的拉伸高度,即AQI值

10800,1255,//从起点开始,第3小时的拉伸高度,即AQI值

......

代码省略了差值算法的设定,使用了默认的差值算法

  "interpolationAlgorithm": "LAGRANGE",  //插值算法为LAGRANGE,还有HERMITE,GEODESIC

   "interpolationDegree": 5 //1为线性插值,2为平方插值



你可能感兴趣的:(Cesium之CZML的插值)