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;
}

效果展示

  除以的数值大                                                                                                                    

除以的数值小 

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  
        }),
    }
});

标签：Supermap,迹线,endPoint,动线,let,apiTools3D,Cesium,startPoint
来源： https://www.cnblogs.com/yangzhengier/p/11848065.html