Cesium实战系列文章总目录
:传送门
通过生成随机线,并设置飞线材质即可。
飞线材质lineFlowMaterialProperty.js
:
/*
* @Description: 飞线效果(参考开源代码)
* @Version: 1.0
* @Author: Julian
* @Date: 2022-03-05 16:13:21
* @LastEditors: Julian
* @LastEditTime: 2022-03-05 17:39:38
*/
class LineFlowMaterialProperty {
constructor(options) {
this._definitionChanged = new Cesium.Event();
this._color = undefined;
this._speed = undefined;
this._percent = undefined;
this._gradient = undefined;
this.color = options.color;
this.speed = options.speed;
this.percent = options.percent;
this.gradient = options.gradient;
};
get isConstant() {
return false;
}
get definitionChanged() {
return this._definitionChanged;
}
getType(time) {
return Cesium.Material.LineFlowMaterialType;
}
getValue(time, result) {
if (!Cesium.defined(result)) {
result = {};
}
result.color = Cesium.Property.getValueOrDefault(this._color, time, Cesium.Color.RED, result.color);
result.speed = Cesium.Property.getValueOrDefault(this._speed, time, 5.0, result.speed);
result.percent = Cesium.Property.getValueOrDefault(this._percent, time, 0.1, result.percent);
result.gradient = Cesium.Property.getValueOrDefault(this._gradient, time, 0.01, result.gradient);
return result
}
equals(other) {
return (this === other ||
(other instanceof LineFlowMaterialProperty &&
Cesium.Property.equals(this._color, other._color) &&
Cesium.Property.equals(this._speed, other._speed) &&
Cesium.Property.equals(this._percent, other._percent) &&
Cesium.Property.equals(this._gradient, other._gradient))
)
}
}
Object.defineProperties(LineFlowMaterialProperty.prototype, {
color: Cesium.createPropertyDescriptor('color'),
speed: Cesium.createPropertyDescriptor('speed'),
percent: Cesium.createPropertyDescriptor('percent'),
gradient: Cesium.createPropertyDescriptor('gradient'),
})
Cesium.LineFlowMaterialProperty = LineFlowMaterialProperty;
Cesium.Material.LineFlowMaterialProperty = 'LineFlowMaterialProperty';
Cesium.Material.LineFlowMaterialType = 'LineFlowMaterialType';
Cesium.Material.LineFlowMaterialSource =
`
uniform vec4 color;
uniform float speed;
uniform float percent;
uniform float gradient;
czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
float t =fract(czm_frameNumber * speed / 1000.0);
t *= (1.0 + percent);
float alpha = smoothstep(t- percent, t, st.s) * step(-t, -st.s);
alpha += gradient;
material.diffuse = color.rgb;
material.alpha = alpha;
return material;
}
`
Cesium.Material._materialCache.addMaterial(Cesium.Material.LineFlowMaterialType, {
fabric: {
type: Cesium.Material.LineFlowMaterialType,
uniforms: {
color: new Cesium.Color(1.0, 0.0, 0.0, 1.0),
speed: 10.0,
percent: 0.1,
gradient: 0.01
},
source: Cesium.Material.LineFlowMaterialSource
},
translucent: function(material) {
return true;
}
})
通过random函数,生成中心点周围的随机点位。
/**
* @description: 产生随机点
* @param {*} position:中心点坐标
* @param {*} num:随机点数量
* @return {*}
*/
function generateRandomPosition(position, num) {
let list = []
for (let i = 0; i < num; i++) {
// random产生的随机数范围是0-1,需要加上正负模拟
let lon = position[0] + Math.random() * 0.04 * (i % 2 == 0 ? 1 : -1);
let lat = position[1] + Math.random() * 0.04 * (i % 2 == 0 ? 1 : -1);
list.push([lon, lat])
}
return list
}
引入材质js文件后,通过生成的随机点设置随机高度生成随机线
,并设置其材质即可。
这里把调用函数封装成了lineFlowInit
函数,代码如下。
// 随机竖直飞线
lineFlowInit(this.viewer, [113.9236839, 22.528061], 120);
/**
* @description: 竖直随机飞线初始化
* @param {*} _viewer
* @param {*} _center :中心点
* @param {*} _num :数量
* @return {*}
*/
function lineFlowInit(_viewer, _center, _num) {
let _positions = generateRandomPosition(_center, _num);
_positions.forEach(item => {
// 经纬度
let start_lon = item[0];
let start_lat = item[1];
let startPoint = new Cesium.Cartesian3.fromDegrees(start_lon, start_lat, 0);
// 随机高度
let height = 5000 * Math.random();
let endPoint = new Cesium.Cartesian3.fromDegrees(start_lon, start_lat, height);
let linePositions = [];
linePositions.push(startPoint);
linePositions.push(endPoint);
_viewer.entities.add({
polyline: {
positions: linePositions,
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
})
}
})
})
}