cesium实现3D实时绘制轨迹

        在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": "

Hang gliding flight log data from Daniel H. Friedman.
Icon created by Larisa Skosyrska from the Noun Project

",

    "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);

你可能感兴趣的:(cesium实现3D实时绘制轨迹)