美文网首页开源
cesium实现3D实时绘制轨迹

cesium实现3D实时绘制轨迹

作者: 泥足深陷的程序员 | 来源:发表于2021-03-15 15:31 被阅读0次

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

相关文章

  • cesium实现3D实时绘制轨迹

    在3D地图的开发中有需要实现实时绘制模型轨迹的需求,根据API及示例的学习写了一个自己的demo。其中用到了CZM...

  • cesium实现3D历史轨迹播放

    这个是我根据API及示例整理的历史轨迹播放的demo,其中重要的参数都做了注释,可以直接粘贴到cesium的模拟其...

  • 2020-12-04

    osbg倾斜文件转3DTiles文件通过Cesium实现3D地图 流程:安装Node.js,安装Cesium环境,...

  • Cesium绘制轨迹线与轨迹点

    介绍使用primitives创建线条轨迹以及轨迹点以及entities大概介绍 Cesium上建立风场动态粒子效果...

  • iOS实现Int数组bitMap绘图

    地图、轨迹绘制:demo中使用timer模拟实时接收数据;每次接收绘制点数(dataLength):6.8W-8W...

  • Android 红包雨效果自定义控件

    思路:利用Path绘制动画轨迹,再使用PathMeasure获取轨迹中的坐标位置实时改变view的坐标完成红包动画...

  • 百度地图,实现车辆轨迹绘制

    百度地图,实现车辆轨迹绘制 实现思路:1.根据经纬度实现车辆轨迹绘制2.使用百度地图API的两个覆盖物实现,Pol...

  • Cesium入门10 - 3D Tiles

    Cesium入门10 - 3D Tiles Cesium中文网:http://cesiumcn.org/ | 国内...

  • Cesium实现热力图绘制

    这次介绍在Cesium上如何绘制热力图,现在比较常用的热力图插件是heatmap.js,但是它仅仅提供了对leaf...

  • cesium轨迹追踪

    本文只实现了轨迹跟踪的方法,加载cesium初始化自行配置,目前推送以定时器实现,实践可以通过websocket推...

网友评论

    本文标题:cesium实现3D实时绘制轨迹

    本文链接:https://www.haomeiwen.com/subject/izpkcltx.html