话不多说,直接上代码
// 抛物飞线效果
parabolaFlowInit(viewer, _position, 1);
/**
* @description: 抛物飞线效果初始化
* @param {*} _viewer
* @param {*} _num :每条线上的飞线数量
* @return {*}
*/
parabolaFlowInit(_viewer, _position, _num) {
console.log(_position, '421423');
let _center = [118.17, 26.6];
let _positions = [
[118.4856, 26.3897],
[118.2472, 26.7617],
[118.4092, 26.4447],
[118.5169, 26.6317],
[118.2994, 26.4919],
[117.9983, 26.6228],
...
];
_positions.forEach(item => {
let _siglePositions = parabola(_center, item, 10000);
// 创建飞线* Math.random()
for (let i = 0; i < _num; i++) {
_viewer.entities.add({
polyline: {
width: 3,
positions: _siglePositions,
material: new Cesium.LineFlowMaterialProperty({
color: new Cesium.Color(255 / 255, 201 / 255, 38 / 255, 1),
speed: 5 * Math.random(),
percent: 0.5,
gradient: 0.01
})
},
});
}
// 创建轨迹线
_viewer.entities.add({
polyline: {
width: 2,
positions: _siglePositions,
material: new Cesium.Color(77 / 255, 201 / 255, 255 / 255, 1),
}
})
});
/**
* @description: 抛物线构造函数(参考开源代码)
* @param {*}
* @return {*}
*/
function parabola(
startPosition,
endPosition,
height = 0,
count = 50
) {
//方程 y=-(4h/L^2)*x^2+h h:顶点高度 L:横纵间距较大者
let result = []
height = Math.max(+height, 100)
count = Math.max(+count, 50)
let diffLon = Math.abs(startPosition[0] - endPosition[0])
let diffLat = Math.abs(startPosition[1] - endPosition[1])
let L = Math.max(diffLon, diffLat)
let dlt = L / count
if (diffLon > diffLat) {
//base on lon
let delLat = (endPosition[1] - startPosition[1]) / count
if (startPosition[0] - endPosition[0] > 0) {
dlt = -dlt
}
for (let i = 0; i < count; i++) {
let h =
height -
(Math.pow(-0.5 * L + Math.abs(dlt) * i, 2) * 4 * height) /
Math.pow(L, 2)
let lon = startPosition[0] + dlt * i
let lat = startPosition[1] + delLat * i
let point = new Cesium.Cartesian3.fromDegrees(lon, lat, h + 3000);
result.push(point);
}
} else {
//base on lat
let delLon = (endPosition[0] - startPosition[0]) / count
if (startPosition[1] - endPosition[1] > 0) {
dlt = -dlt
}
for (let i = 0; i < count; i++) {
let h =
height -
(Math.pow(-0.5 * L + Math.abs(dlt) * i, 2) * 4 * height) /
Math.pow(L, 2)
let lon = startPosition[0] + delLon * i
let lat = startPosition[1] + dlt * i
let point = new Cesium.Cartesian3.fromDegrees(lon, lat, h + 3000);
result.push(point);
}
}
return result
}
}
但是这个效果有一个问题,就是轨迹线如果加入透明度,底色就会透上来,效果就不太好看。