全攻略！Cesium保姆教程之图片轨迹线：初学者也能玩转

前端

2023-09-22 15:17:28

图片轨迹线材质：让你的图片在 Cesium 中动起来

嗨，大家好！欢迎来到我们的 Cesium 教程系列，本篇重点介绍图片轨迹线材质。如果你还在为如何在 Cesium 中创建动态图片轨迹线而发愁，那么这篇文章就是为你准备的。

图片轨迹线的魅力

图片轨迹线是一种炫酷的特效，可以让你将图片沿着指定的路径平滑地移动，就像在空中画出一条优美的弧线。这种效果非常适合展示产品、介绍企业文化或制作引人入胜的宣传片。

如何实现图片轨迹线材质

实现图片轨迹线材质很简单，只需要几行代码即可。具体步骤如下：

创建图片轨迹线材质对象

var trailMaterial = new Cesium.ImageTrailMaterialProperty({
  image: 'path/to/image.png',
  repeat: new Cesium.Cartesian2(1, 1),
  color: Cesium.Color.WHITE,
  speed: 10.0
});

image: 要沿着轨迹移动的图片的路径。
repeat: 控制图片重复的次数。
color: 图片轨迹的颜色。
speed: 图片移动的速度，单位为秒/米。

将图片轨迹线材质应用到图片上

var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 10000.0),
  billboard: {
    image: 'path/to/image.png',
    material: trailMaterial
  }
});

position: 图片的位置。
billboard: 用于显示图片的公告牌。

设置图片的运动路径

var positionProperty = new Cesium.SampledPositionProperty();
positionProperty.addSample(Cesium.JulianDate.now(), Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 10000.0));
positionProperty.addSample(Cesium.JulianDate.addSeconds(10.0, Cesium.JulianDate.now()), Cesium.Cartesian3.fromDegrees(-122.0744619, 45.0503706, 10000.0));
entity.position = positionProperty;

SampledPositionProperty: 一个可以指定图片沿时间移动的路径的属性。
JulianDate.now() ：当前时间。
Cartesian3.fromDegrees() : 从经纬度创建笛卡尔坐标的函数。

就这样，你的图片轨迹线材质就完成了！是不是很简单？

进一步探索

如果你想深入了解 Cesium 的图片轨迹线材质，可以参考官方文档：
https://cesium.com/docs/cesiumjs-ref-doc/ImageTrailMaterialProperty.html

常见问题解答

如何更改图片轨迹的速度？
- 通过修改 speed 属性可以更改图片轨迹的速度。
如何创建循环的图片轨迹？
- 可以通过在 positionProperty 中添加多个采样点来创建循环的图片轨迹。
如何更改图片轨迹的颜色？
- 可以通过修改 color 属性来更改图片轨迹的颜色。
如何使图片轨迹在图像上移动？
- 可以在 billboard 对象的 scale 属性中指定图像的大小和缩放，以使图片轨迹在图像上移动。
如何将图片轨迹应用到多个图片？
- 可以通过在 viewer.entities 对象中添加多个具有不同 position 属性的实体来将图片轨迹应用到多个图片。