129 lines
3.0 KiB
JavaScript
129 lines
3.0 KiB
JavaScript
import { Fragment } from "react";
|
|
import { Entity, EllipseGraphics } from "resium";
|
|
import wave from "@/assets/wave.png";
|
|
|
|
function WavePoint({
|
|
stationLon,
|
|
stationLat,
|
|
value = 360,
|
|
deviationR = 5000,
|
|
eachInterval = 1500,
|
|
maxR = 3600 * 100,
|
|
}) {
|
|
const data = {
|
|
stationLon, //经度
|
|
stationLat, //纬度
|
|
value, //传感器的大小
|
|
deviationR, //差值 差值也大 速度越快
|
|
eachInterval, //两个圈的时间间隔
|
|
imageUrl: wave,
|
|
maxR,
|
|
};
|
|
|
|
var r1 = 0,
|
|
r2 = 0;
|
|
var r3 = 0,
|
|
r4 = 0;
|
|
function changeOne() {
|
|
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;
|
|
}
|
|
|
|
const point1 = (
|
|
<Entity
|
|
id={`wave-point-1-${stationLon}-${stationLat}`}
|
|
position={Cesium.Cartesian3.fromDegrees(
|
|
data.stationLon,
|
|
data.stationLat,
|
|
0
|
|
)}
|
|
show={true}
|
|
>
|
|
<EllipseGraphics
|
|
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),
|
|
transparent: true,
|
|
color: new Cesium.CallbackProperty(function () {
|
|
var alp = 1 - r1 / data.maxR;
|
|
return Cesium.Color.WHITE.withAlpha(alp);
|
|
}, false),
|
|
})
|
|
}
|
|
/>
|
|
</Entity>
|
|
);
|
|
|
|
let point2;
|
|
|
|
//第二个圆开始跑
|
|
setTimeout(function () {
|
|
function changeTwo() {
|
|
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;
|
|
}
|
|
point2 = (
|
|
<Entity
|
|
position={Cesium.Cartesian3.fromDegrees(
|
|
data.stationLon,
|
|
data.stationLat,
|
|
0
|
|
)}
|
|
show={true}
|
|
id={`wave-point-2-${stationLon}-${stationLat}`}
|
|
>
|
|
<EllipseGraphics
|
|
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),
|
|
})
|
|
}
|
|
/>
|
|
</Entity>
|
|
);
|
|
}, data.eachInterval);
|
|
|
|
return (
|
|
<Fragment>
|
|
{point1}
|
|
{point2}
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
export default WavePoint;
|