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

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

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

具體實現：

1、先構造點，假設已知起點和終點的Cartesian3坐標

    function generateCurve(startPoint, endPoint){ let addPointCartesian = new Cesium.Cartesian3(); Cesium.Cartesian3.add(startPoint, endPoint, addPointCartesian); let midPointCartesian = new Cesium.Cartesian3(); Cesium.Cartesian3.divideByScalar(addPointCartesian, 2, midPointCartesian); let midPointCartographic = Cesium.Cartographic.fromCartesian(midPointCartesian); //除以的這個數越小 開始的位置聚集的位置就越陡，越大 開始的位置線就越平緩，
        midPointCartographic.height = Cesium.Cartesian3.distance(startPoint, endPoint) / 10; let midPoint = new Cesium.Cartesian3(); Cesium.Ellipsoid.WGS84.cartographicToCartesian(midPointCartographic, midPoint); let spline = new Cesium.CatmullRomSpline({ times: [0.0, 0.5, 1.0], points: [startPoint, midPoint, endPoint] }); let curvePointsArr = []; for(let i = 0, len = 300; i < len; i++){ curvePointsArr.push(spline.evaluate(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 }), } });

最終效果