在3D地图的开发中有需要实现实时绘制模型轨迹的需求，根据API及示例的学习写了一个自己的demo。其中用到了CZML，czml中时间需要用UTC时间，初始的位置数据需要是两个点，由于我的项目中是根据websocket推送的数据来更新位置，所以在初始化position用了两个位置相同的点，以下就是具体的代码。
var czml = [{
"id": "document",
"name":"CZML Path",
"version": "1.0",
"clock": {
"currentTime": "2012-08-04T10:00:00Z",
"multiplier": 10
}
}, {
"id": "path",
"name": "path with GPS flight data",
"description": "<p>Hang gliding flight log data from Daniel H. Friedman.<br>Icon created by Larisa Skosyrska from the Noun Project</p>",
"path": {
"material": {
"polylineOutline": {
"color": {
"rgba": [255, 0, 255, 255]
},
"outlineColor": {
"rgba": [255, 0, 255, 255]
},
"outlineWidth": 5
}
},
"width": 8,
"leadTime": 0, // 路线提前执行时间
"trailTime": 100000, // 路线跟踪时间
"resolution": 5,
//"arcType" : "RHUMB",
},
"position": {
"epoch": "2012-08-04T10:00:00Z",
"cartographicDegrees": [
0.0, 118.87841653400005, 30.956798, 0.0,
10.0, 118.87826541800007, 30.956799, 0.0,
]
}
}];
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function (ds) {
viewer.trackedEntity = ds.entities.getById('path');//追踪实体
});
// 动态赋值
var i = 30.956800;
var a = 20;
var b=118.8774481050001;
setInterval(function() {
i += 0.001*Math.random();
b+=0.001*Math.random();
a += 10;
//路径最后添加节点
czml[1].position.cartographicDegrees.push(a, b, i, 0);// 赋值当前最新行驶路线
czml[0].clock.currentTime = viewer.clock.currentTime.toString(); // 修改当前时间，防止从头重新开始执行
//清空之前数据，否则数据越来越多
viewer.entities.removeById("path");
//重新添加修改后的数据
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
}, 1000);
