SuperMap iClient3D for WebGL教程（Entity）- PathGraphics

最新推荐文章于 2024-03-05 15:55:29 发布

supermapsupport

最新推荐文章于 2024-03-05 15:55:29 发布

阅读量2k

点赞数 3

分类专栏：三维GIS 文章标签： supermap webgl

本文为博主原创文章，欢迎转载，SuperMap技术问答社区 http://ask.supermap.com

本文链接：https://blog.csdn.net/supermapsupport/article/details/94023822

版权

三维GIS 专栏收录该内容

418 篇文章 232 订阅

订阅专栏

作者：刘大

本文已同步更新于简书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)

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