????????在3D地圖的開發(fā)中有需要實(shí)現(xiàn)實(shí)時(shí)繪制模型軌跡的需求，根據(jù)API及示例的學(xué)習(xí)寫了一個(gè)自己的demo。其中用到了CZML，czml中時(shí)間需要用UTC時(shí)間，初始的位置數(shù)據(jù)需要是兩個(gè)點(diǎn)，由于我的項(xiàng)目中是根據(jù)websocket推送的數(shù)據(jù)來(lái)更新位置，所以在初始化position用了兩個(gè)位置相同的點(diǎn)，以下就是具體的代碼。
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, // 路線提前執(zhí)行時(shí)間
? ? ? ? "trailTime": 100000, // 路線跟蹤時(shí)間
? ? ? ? "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');//追蹤實(shí)體
});
// 動(dòng)態(tài)賦值
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;
? ? //路徑最后添加節(jié)點(diǎn)
? ? czml[1].position.cartographicDegrees.push(a, b, i, 0);// 賦值當(dāng)前最新行駛路線
? ? czml[0].clock.currentTime = viewer.clock.currentTime.toString(); // 修改當(dāng)前時(shí)間，防止從頭重新開始執(zhí)行
? ? //清空之前數(shù)據(jù)，否則數(shù)據(jù)越來(lái)越多
? ? viewer.entities.removeById("path");
? ? //重新添加修改后的數(shù)據(jù)
? ? viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
}, 1000);
