Supermap/Cesium 开发心得----飞天动线的实现

在实际开发中,我遇到这样的问题,只给了两地点的坐标,要求会出从A地到B地的在天上飞的那种动态线

本质上动线的效果就是构造实体Entity中的polyline来实现,设置好材质,颜色和运动频率

具体实现:

1、先构造点,假设已知起点和终点的Cartesian3坐标

/**
 * 给起点和终点,使用样条曲线模拟弧线
 * @param startPoint
 * @param endPoint
 * @returns {[]}
 */
function generateCurve(startPoint, endPoint){
    let addPointCartesian = apiTools3D.plusCartesian3(startPoint, endPoint);
    let midPointCartesian = apiTools3D.cartesian3_DivideByScalar(addPointCartesian, 2);
    let midPointCartographic = apiTools3D.cartographicFromCartesian(midPointCartesian);
                                                    //除以的这个数越小 开始的位置聚集的位置就越陡,越大 开始的位置线就越平缓,
    midPointCartographic.height = apiTools3D.cartesian3_Distance(startPoint, endPoint) / 20;   
    let midPoint = apiTools3D.cartographicToCartesians(midPointCartographic);
    //构造样条曲线
    let spline = apiTools3D.catmullRomSplines({
        times: [0.0,  0.5, 1],
        points: [startPoint, midPoint, endPoint]
    });
    let curvePointsArr = [];
    for(let i = 0, len = 300; i < len; i++){
        curvePointsArr.push(apiTools3D.catmullRomSplineEvaluate(spline,i / len));
    }
    return curvePointsArr;
}

效果展示

  除以的数值大                                                                                                                    

  Supermap/Cesium 开发心得----飞天动线的实现                 

除以的数值小 

    Supermap/Cesium 开发心得----飞天动线的实现

 

 

2、构造polyline型的Entity

let curLinePointsArr = generateCurve(startPt, endPt);
//构造实体动线的配置
viewer.entities.add({
    description: "飞天动态轨迹线",
    show: true,
    polyline: {
        width: 3,
        positions: curLinePointsArr,
        material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质
            //指定线型的填充颜色,替换为白色。
            color: new Cesium.Color.fromCssColorString("rgba(70,130,180, 1.0)"),
            //指定轮廓线的颜色,可选的黑色。
            outlineColor: new Cesium.Color(70 / 255, 130 / 255, 180 / 255, 0.3),
            //设置尾迹线的长度在整条线中占的比例,替换数值0.3
            trailLength: 0.8,
            //数值属性,设置尾迹线从起点到终点的运行周期,单位是秒,每次转换1000.0。
            period: 3  
        }),
    }
});

 

上一篇:二十二:视图之add_url_rule和app.route


下一篇:F5 Networks Endpoint Inspector可以通过特殊构造的页面触发RCE