cesium实现抛物流动飞线效果_cesium lineflowmaterialproperty

Cesium实战系列文章总目录：传送门

1.实现效果

2.实现效果

2.1实现思路

（1）构造抛物线
根据已知起始点和目的点，以及最大高度，根据二次函数公式生成抛物线的点坐标，这里设置轨迹点的坐标为50个。
（2）设置线及材质
根据生成的抛物线坐标，使用polyline接口，构造线并设置飞线材质。为了使抛物线的效果更加明显，可以通过设置每条轨迹上飞线的数量来实现。

2.2具体代码

这里把主要调用函数封装成了parabolaFlowInit函数，代码如下。
关于飞线材质lineFlowMaterialProperty.js文件，可以参考上篇博客：竖直随机飞线效果：传送门。

// 抛物飞线效果
parabolaFlowInit(this.viewer, 3);

/**
* @description: 抛物飞线效果初始化
* @param {*} _viewer
* @param {*} _num :每条线上的飞线数量
* @return {*}
*/
function parabolaFlowInit(_viewer, _num) {
   let _center = [113.9236839, 22.528061];
   let _positions = [
       [113.8236839, 22.528061],
       [114.0236839, 22.528061],
       [113.9236839, 22.428061],
       [113.9236839, 22.628061],
       [113.8236839, 22.428061],
       [114.0236839, 22.628061],
       [113.8236839, 22.628061],
       [114.0236839, 22.428061]
   ];
   _positions.forEach(item => {
       let _siglePositions = parabola(_center, item, 5000);
       // 创建飞线
       for (let i = 0; i < _num; i++) {
           _viewer.entities.add({
               polyline: {
                   positions: _siglePositions,
                   material: new Cesium.LineFlowMaterialProperty({
                       color: new Cesium.Color(1.0, 1.0, 0.0, 0.8),
                       speed: 15 * Math.random(),
                       percent: 0.1,
                       gradient: 0.01
                   })
               },
           });
       }
       // 创建轨迹线
       _viewer.entities.add({
           polyline: {
               positions: _siglePositions,
               material: new Cesium.Color(1.0, 1.0, 0.0, 0.2),
           }
       })
   });
   
   /**
    * @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);
               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);
               result.push(point);
           }
       }
       return result
   }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101