cesium:CZML路径动态改变
  lG7RE7vNF4mc 2023年11月02日 31 0

cesium:CZML路径动态改变_添加节点



推荐:将 NSDT场景编辑器 加入你的3D开发工具链   https://ted.sinoccdc.cn/?sourceId=13​1


这篇文章和上一篇​​cesium编程中级(六)全球视频纹理​​一样,也是跟群友一起讨论时想出的解决方案^^

起因是群友希望完成一个功能,在加载czml数据之后,有物体沿着czml中的路径运动,然后运动过程中,会每个几秒钟在路径最后添加一个点,希望能看到路径动态改变而且物体的移动连贯

这里其实重要的点有两个
1. 路径后面每隔一段时间添加一个点
2. 物体连贯运动(这一点是在完成之后,回过头来反思直接写出来的)

群友自己写了一份代码,我们先来粗略看一下代码组成

var viewer = new Cesium.Viewer('cesiumContainer');

var czml = [{
"id": "document",
"name": "polygon",
"version": "1.0"
}, {
"id": "shape2",
"name": "Red box with black outline",
"availability": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
"box": {
"dimensions": {
"cartesian": [30.0, 30.0]
},
"material": {
"stripe": {
"orientation": "VERTICAL",
"evenColor": {
"rgba": [10, 211, 250, 0]
},
"oddColor": {
"rgba": [10, 211, 250, 255]
},
"offset": {
"number": 1
},
"repeat": 0.5
}
},
},
"path": {
"material": {
"solidColor": {
"color": {
"interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
"rgba": [255, 255, 255, 128]
}
}
},
"width": [{
"interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
"number": 3.0
}],
"show": [{
"interval": "2012-08-04T16:00:00Z/2012-08-04T18:00:00Z",
"boolean": true
}]
},
"position": {
"interpolationAlgorithm": "LAGRANGE",
"interpolationDegree": 1,
"epoch": "2012-08-04T16:00:00Z",
"cartographicDegrees": [
0.0, 118.87841653400005, 30.95679870500004, 0.0,
10.0, 118.87826541800007, 30.95680770900003, 0.0,
20.0, 118.8774481050001, 30.956860625000047, 0.0,
30.0, 118.87660414600009, 30.956910105000077, 0.0,
...省略
]
}
}];

var dataSourcePromise;
var i = 30;
var a = 410;
setInterval(function() {
i += 0.001;
a += 10;
czml[1].position.cartographicDegrees.push(a, 118.813667, i, 0);
}, 10000);

dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

步骤简略归纳如下:
1. 创建三维球
2. 创建czml文件
3. 动态添加点到czml的路径中
4. 添加czml到三维球上

我们要解决第一点,比较常规,动态添加点首先想到的是setInterval,每隔10秒钟添加一个点,这里没有问题,但是问题是,添加了点之后,界面上并没有体现出来,调试代码之后发现czml 路径中的点数确实是增加了,所以,可能性比较大的是数据没刷新,于是在添加点后尝试添加

...
setInterval(function() {
...
//路径最后添加节点
czml[1].position.cartographicDegrees.push(a, 118.8747338, i, 0);
//清空之前数据,否则数据越来越多
viewer.entities.removeAll();
//重新添加修改后的数据
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));
}, 1000);

到这里第一个问题解决了,路径变化了,但是随之第二个问题也显现出来,每次添加完数据之后,方块都回到了原点。

看第二个问题之前,我们先来看看官方的一些示例​​czml path​​ (注意这里是本地部署路径)

发现它有一个clock属性

var czml = [{
"id" : "document",
"name" : "CZML Path",
"version" : "1.0",
"clock": {
"interval": "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
"currentTime": "2012-08-04T10:00:00Z",
"multiplier": 10
}
}, {
"id" : "path",
.....
}];

当前时间我们可以通过viewer.clock.currentTime 来获取,好像有搞头,来试试

...
//路径最后添加节点
czml[1].position.cartographicDegrees.push(a, 118.8747338, i, 0);
//修改当前时间
czml[0].clock.currentTime = viewer.clock.currentTime.toString();
...

尝试了一下,果然可行。

cesium:CZML路径动态改变_数据_02

效果如下:

cesium:CZML路径动态改变_添加节点_03

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
lG7RE7vNF4mc