赞
踩
- 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
- }
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。