水波纹、雷达
/*
*两个圆扩散纹理
*/
addCircleRipple({
stationLon: longitude, //经度
stationLat: latitude, //纬度
value: 360, //传感器的大小
deviationR: 800,//差值 差值也大 速度越快
eachInterval: 2000,//两个圈的时间间隔
imageUrl: "../images/imgs/guangyun.png", // 图片
maxR: (3600) * 10
});
function addCircleRipple(data) {
var r1 = 0, r2 = 0; var r3 = 0, r4 = 0;
function changeOne() { //这是callback,参数不能内传
r1 = r1 + data.deviationR;
if (r1 >= data.maxR) {
r1 = 0;
}
return r1;
}
function changeR2() {
r2 = r2 + data.deviationR;
if (r2 >= data.maxR) {
r2 = 0;
}
return r2;
}
//第一个圆先跑
viewer.entities.add({
description: "ONE_POINTS",
position: Cesium.Cartesian3.fromDegrees(data.stationLon, data.stationLat, 0),
show: true,
ellipse: {
semiMinorAxis: new Cesium.CallbackProperty(changeOne, false),
semiMajorAxis: new Cesium.CallbackProperty(changeR2, false),
height: 10,
material: new Cesium.ImageMaterialProperty({
image: data.imageUrl,
repeat: Cesium.Cartesian2(1.0, 1.0), //指定图像在每个方向上重复的次数,默认为Cesium.Cartesian2(1.0, 1.0),{Cartesian2}类型
transparent: true,// 默认为false,当图像具有透明性时设置为true(例如,当png具有透明部分时)
color: new Cesium.CallbackProperty(function () {
var alp = 1 - r1 / data.maxR;
return Cesium.Color.WHITE.withAlpha(alp)
//entity的颜色透明 并不影响材质,并且 entity也会透明
}, false)
})
}
});
//第二个圆开始跑
setTimeout(function () {
function changeTwo() { //这是callback,参数不能内传
r3 = r3 + data.deviationR;
if (r3 >= data.maxR) {
r3 = 0;
}
return r3;
}
function changeR12() {
r4 = r4 + data.deviationR;
if (r4 >= data.maxR) {
r4 = 0;
}
return r4;
}
viewer.entities.add({
description: "TWO_POINTS",
position: Cesium.Cartesian3.fromDegrees(data.stationLon, data.stationLat, 0),
show: true,
ellipse: {
semiMinorAxis: new Cesium.CallbackProperty(changeTwo, false),
semiMajorAxis: new Cesium.CallbackProperty(changeR12, false),
height: 10,
material: new Cesium.ImageMaterialProperty({
image: data.imageUrl,
repeat: Cesium.Cartesian2(1.0, 1.0),
transparent: true,
color: new Cesium.CallbackProperty(function () {
var alp = 1 - r1 / data.maxR;
return Cesium.Color.WHITE.withAlpha(alp)
//entity的颜色透明 并不影响材质,并且 entity也会透明
}, false)
})
}
});
}, data.eachInterval);
viewer.entities.add({
description: "POINTS",
position: Cesium.Cartesian3.fromDegrees(data.stationLon, data.stationLat, 0),
show: true,
ellipse: {
semiMinorAxis: (data.value) * 5,
semiMajorAxis: (data.value) * 5,
height: 10,
material: new Cesium.Color(1, 0, 0, 1)
}
});
}
此笔记仅仅为了记录自己在项目中所学到的知识,如果有问题,可以提出,我们可以共同探讨。