前面的系列文章里面,已经介绍了一部分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)
因此,我们可以接入车辆或者飞机等具有时空属性的数据,进行路径的回放