本文共 2353 字，大约阅读时间需要 7 分钟。

作者：刘大

本文已同步更新于简书https://www.jianshu.com/p/5dd1da2afab4

前面的系列文章里面，已经介绍了一部分Entity实体对象，今天我们来看看PathGraphics，路径实体对象吧。 路径，可以指一段道路，也可以物体所行走的一段路程，那么在Cesium里面的PathGraphics跟接近于后者，可以理解为对象所行径的路线，这就意味着物体的位置position应是一个具有时间的象征点

viewer.entities.add({          position: position,//这里的position为new Cesium.SampledPositionProperty          path: {            resolution: 1,            leadTime: 0,            trailTime: 20,            material: new Cesium.PolylineGlowMaterialProperty({                 glowPower: 0.1,                 color: Cesium.Color.ORANGE            }),            width: 10          }        })

这里简单介绍下SampledPositionProperty这个类，addSample可以添加时间节点以及其位置信息

###参数说明

由此可见，position为

show：是否显示，默认为true;

width:线宽度，默认为1.0； material：纹理填充材质； resolution：； distanceDisplayCondition：根据相机高度设置实体对象的显隐； leadTime：指定要显示的对象后面的秒数； trailTime：指定要显示的对象前面的秒数； leadTime和trailTime的具体效果和区别我们来看看下面的gif，

leadTime: 0,   trailTime: 20,

leadTime: 20,   trailTime: 0,

从上面可以看出，以飞机显示当前时间节点的position,eadTime和trailTime其实就是显示position的前后20秒内的路径

简单看一个实例 展示飞行路径的

var start = Cesium.JulianDate.fromDate(new Date(2019, 6, 28, 16));var stop = Cesium.JulianDate.addSeconds(start, 180, new Cesium.JulianDate());viewer.clock.startTime = start.clone();viewer.clock.stopTime = stop.clone();viewer.clock.currentTime = start.clone();viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; viewer.clock.multiplier = 10;function flypath(lon,lat) {    var property = new Cesium.SampledPositionProperty();    for (var i = 0; i <= 3; i += 1) {            var time = Cesium.JulianDate.addSeconds(start, i*60, new Cesium.JulianDate());        var position = Cesium.Cartesian3.fromDegrees(lon, lat+i*0.1,1750);        property.addSample(time, position);    }    return property;}var position = flypath(120,26);var entity = viewer.entities.add({    position : position,    orientation : new Cesium.VelocityOrientationProperty(position),    viewFrom: new Cesium.Cartesian3(100.0, 0.0, 0.0),    model : {        uri : '../../SampleData/models/CesiumAir/Cesium_Air.gltf',        minimumPixelSize : 64    },    path : {        resolution : 1,        leadTime: 0,        trailTime: 180,        material : new Cesium.PolylineGlowMaterialProperty({            glowPower : 0.1,            color : Cesium.Color.YELLOW        }),        width : 10    }});viewer.zoomTo(viewer.entities)

因此，我们可以接入车辆或者飞机等具有时空属性的数据,进行路径的回放

转载地址：http://fnvxi.baihongyu.com/