78 lines
2.0 KiB
JavaScript
78 lines
2.0 KiB
JavaScript
import { useCallback, useState } from "react";
|
|
import {
|
|
Entity,
|
|
LabelGraphics,
|
|
EllipseGraphics,
|
|
useCesium,
|
|
CylinderGraphics,
|
|
} from "resium";
|
|
import { Color, Cartesian3, LabelStyle } from "cesium";
|
|
import { useInterval } from "ahooks";
|
|
|
|
// const material = Cesium.Material.fromType("Custom", {
|
|
// fabric: Cesium.Color.RED.withAlpha(0.5),
|
|
// shader: `
|
|
// czm_material input;
|
|
// czm_material output;
|
|
|
|
// void main() {
|
|
// output = input;
|
|
// output.alpha = sin(input.st) * 0.5 + 0.5; //给圆柱体添加从上到下的动画效果
|
|
// }`,
|
|
// uniforms: {
|
|
// input: function (czm, frameNumber, time, context) {
|
|
// var u = Cesium.getUniform(context, "u");
|
|
// return Cesium.Color.fromAlpha(czm.color, u);
|
|
// },
|
|
// },
|
|
// });
|
|
|
|
function Barotropic() {
|
|
const { viewer } = useCesium();
|
|
|
|
const [show, setShow] = useState(false);
|
|
|
|
const showAnimate = useCallback(() => {
|
|
const { currentTime, stopTime } = viewer.clock;
|
|
const leftTime = Math.floor(
|
|
stopTime.secondsOfDay - currentTime.secondsOfDay
|
|
);
|
|
|
|
if (leftTime <= 10) {
|
|
setShow(true);
|
|
} else if (show) setShow(false);
|
|
}, [show]);
|
|
|
|
useInterval(showAnimate, 1000);
|
|
|
|
return (
|
|
<Entity
|
|
show={show}
|
|
name="EllipseGraphics"
|
|
description="EllipseGraphics!!"
|
|
position={Cartesian3.fromDegrees(88, 60, 0)}
|
|
>
|
|
<EllipseGraphics
|
|
material={new Color(0.73, 0.94, 0.95, 0.4)}
|
|
semiMinorAxis={150000.0}
|
|
semiMajorAxis={150000.0}
|
|
extrudedHeight={1000000.0}
|
|
rotation={0}
|
|
// outline
|
|
/>
|
|
<LabelGraphics
|
|
position={Cartesian3.fromDegrees(88, 60, 0)}
|
|
text={"barotropic"}
|
|
font="24px Helvetica"
|
|
fillColor={Color.SKYBLUE}
|
|
outlineColor={Color.BLACK}
|
|
outlineWidth={2}
|
|
style={LabelStyle.FILL_AND_OUTLINE}
|
|
eyeOffset={new Cesium.Cartesian2(0, 500000)}
|
|
/>
|
|
</Entity>
|
|
);
|
|
}
|
|
|
|
export default Barotropic;
|