在實際開發中，我遇到這樣的問題，只給了兩地點的坐標，要求會出從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
}),
}
});
最終效果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2298.html
標籤：GIS