SuperMap iClient3D for WebGL教程（Entity）- PathGraphics

前面的系列文章里面，已经介绍了一部分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可以添加时间节点以及其位置信息

image.png

参数说明

由此可见，position为

PathGraphics.png

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

leadTime: 0,   trailTime: 20,

trailTime.gif.gif

leadTime: 20,   trailTime: 0,

leadTime.gif

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

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

p5.gif

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)

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