64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
import { Entity, LabelGraphics, useCesium } from "resium";
|
|
import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium";
|
|
import { Fragment, useCallback, useState } from "react";
|
|
import { useInterval } from "ahooks";
|
|
|
|
function Labels() {
|
|
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 < 5) {
|
|
setShow(true);
|
|
} else if (show) setShow(false);
|
|
}, [show]);
|
|
|
|
useInterval(showAnimate, 100);
|
|
|
|
return (
|
|
<Fragment>
|
|
<Entity position={Cartesian3.fromDegrees(90, 27, 0)}>
|
|
<LabelGraphics
|
|
text={"青藏高原温度异常"}
|
|
font="24px Helvetica"
|
|
fillColor={Color.SKYBLUE}
|
|
outlineColor={Color.BLACK}
|
|
outlineWidth={2}
|
|
style={LabelStyle.FILL_AND_OUTLINE}
|
|
eyeOffset={new Cartesian2(0, 200000)}
|
|
/>
|
|
</Entity>
|
|
<Entity position={Cartesian3.fromDegrees(-55, 45, 0)}>
|
|
<LabelGraphics
|
|
text={"拉布拉多海温度异常"}
|
|
font="24px Helvetica"
|
|
fillColor={Color.SKYBLUE}
|
|
outlineColor={Color.BLACK}
|
|
outlineWidth={2}
|
|
style={LabelStyle.FILL_AND_OUTLINE}
|
|
eyeOffset={new Cartesian2(0, 200000)}
|
|
/>
|
|
</Entity>
|
|
<Entity show={show} position={Cartesian3.fromDegrees(98, 48, 0)}>
|
|
<LabelGraphics
|
|
text={"barotropic"}
|
|
font="24px Helvetica"
|
|
fillColor={Color.SKYBLUE}
|
|
outlineColor={Color.BLACK}
|
|
outlineWidth={2}
|
|
style={LabelStyle.FILL_AND_OUTLINE}
|
|
eyeOffset={new Cartesian2(0, 1200000)}
|
|
/>
|
|
</Entity>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
export default Labels;
|