Supermap/Cesium 開發心得----飛天動線的實現

在實際開發中，我遇到這樣的問題，只給了兩地點的座標，要求會出從A地到B地的在天上飛的那種動態線

本質上動線的效果就是構造實體Entity中的polyline來實現，設置好材質，顏色和運動頻率

具體實現：

一、先構造點，假設已知起點和終點的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;
}

效果展現

  除以的數值大                                                                                                                    

                   

除以的數值小 

    

 

 

二、構造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  
        }),
    }
});

最終效果