baol/cesium-arrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor

Browse Source
This commit is contained in:
baol 2023-11-06 13:41:49 +08:00
parent 3bc6533da0
commit cc72360bab
9 changed files with 218 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/LabelEntity.jsx
View File

@ -16,8 +16,8 @@ export default function LabelEntity({ showTime, text, position, eyeOffset }) {
}, [replayVersion]);
const [font, { toggle: fontToggle }] = useToggle(
"24px Helvetica",
"bold 32px Helvetica"
"bold 32px Helvetica",
"24px Helvetica"
);
const [fillColor, { toggle: colorToggle }] = useToggle(
Color.fromCssColorString("#04fbfd").withAlpha(0.9),

163
src/components/domain/Three/SceneTwo/Circles.jsx
View File

@ -22,131 +22,134 @@ import arrowRoundReverse from "@/assets/arrow_round_reverse.glb";
const anticycloneColor = Color.fromCssColorString("#f70000");
const cycloneColor = Color.fromCssColorString("#0000ff");
function Circles() {
const Circle = ({ id, lon, lat, isLow, showTime, labelText }) => {
const { viewer } = useCesium();
const Circle = ({ id, lon, lat, isLow, showTime, labelText }) => {
const [show, setShow] = useState(false);
const arrow = !isLow ? arrowRound : arrowRoundReverse;
const color = !isLow ? anticycloneColor : cycloneColor;
const minimumPixelSize = !isLow ? 128 : 98;
const [show, setShow] = useState(false);
const arrow = !isLow ? arrowRound : arrowRoundReverse;
const color = !isLow ? anticycloneColor : cycloneColor;
const minimumPixelSize = !isLow ? 128 : 98;
const circle = (
<ModelGraphics
uri={arrow}
minimumPixelSize={minimumPixelSize}
color={color}
colorBlendMode={ColorBlendMode.REPLACE}
/>
const circle = (
<ModelGraphics
uri={arrow}
minimumPixelSize={minimumPixelSize}
color={color}
colorBlendMode={ColorBlendMode.REPLACE}
/>
);
useInterval(() => {
const { startTime, currentTime, shouldAnimate } = viewer.clock;
const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
1
);
if (!shouldAnimate) return;
if (_time >= showTime) {
setShow(true);
} else {
if (!show) return;
setShow(false);
}
}, 300);
useInterval(() => {
const { startTime, currentTime, shouldAnimate } = viewer.clock;
const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
1
);
if (!shouldAnimate) return;
if (_time >= showTime) {
setShow(true);
} else {
if (!show) return;
setShow(false);
}
}, 300);
if (!show) return <></>;
if (!show) return <></>;
return (
<Fragment>
<Entity
id={`${id}-up`}
position={Cartesian3.fromDegrees(lon, lat, 1000000)}
>
{circle}
<Entity id={`${id}-connection-line`}>
<PolylineGraphics
positions={Cartesian3.fromDegreesArrayHeights([
lon,
lat,
1000000,
lon,
lat,
0,
])}
width={2}
material={
new PolylineDashMaterialProperty({
color: Color.WHITE,
dashLength: 4,
})
}
/>
</Entity>
</Entity>
<Entity
id={`${id}-down`}
position={Cartesian3.fromDegrees(lon, lat, 0)}
>
{circle}
</Entity>
{/* <Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
<LabelGraphics
text={labelText || "Rossby波列"}
font="24px Helvetica"
fillColor={Color.fromCssColorString("#04fbfd")}
outlineColor={Color.BLACK}
outlineWidth={2}
style={LabelStyle.FILL_AND_OUTLINE}
eyeOffset={new Cartesian2(0, 500000)}
return (
<Fragment>
<Entity
id={`${id}-up`}
position={Cartesian3.fromDegrees(lon, lat, 1000000)}
>
{circle}
<Entity id={`${id}-connection-line`}>
<PolylineGraphics
positions={Cartesian3.fromDegreesArrayHeights([
lon,
lat,
1000000,
lon,
lat,
0,
])}
width={2}
material={
new PolylineDashMaterialProperty({
color: Color.WHITE,
dashLength: 4,
})
}
/>
</Entity> */}
</Fragment>
);
};
</Entity>
</Entity>
<Entity id={`${id}-down`} position={Cartesian3.fromDegrees(lon, lat, 0)}>
{circle}
</Entity>
<Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
<LabelGraphics
text={labelText || "Rossby波列"}
font="24px Helvetica"
fillColor={Color.fromCssColorString("#04fbfd")}
outlineColor={Color.BLACK}
outlineWidth={2}
style={LabelStyle.FILL_AND_OUTLINE}
eyeOffset={new Cartesian2(0, 500000)}
/>
</Entity>
</Fragment>
);
};
function Circles() {
return (
<Fragment>
<Circle
isLow={true}
id={`low-circle-0`}
showTime={2}
showTime={12}
lon={-29}
lat={-33}
labelText="南热带大西洋"
/>
<Circle
isLow={false}
id={`high-circle-2`}
showTime={6}
showTime={16}
lon={18}
lat={-50}
labelText="拉扎列夫海以北"
/>
<Circle
isLow={true}
id={`low-circle-1`}
showTime={10}
showTime={20}
lon={80}
lat={-50}
labelText="南印度洋"
/>
<Circle
isLow={false}
id={`high-circle-3`}
showTime={14}
showTime={24}
lon={157}
lat={-35}
labelText="塔斯曼海"
/>
<Circle
isLow={true}
id={`low-circle-2`}
showTime={18}
showTime={28}
lon={178}
lat={-50}
labelText="罗斯海以北"
/>
<Circle
isLow={false}
id={`high-circle-4`}
showTime={22}
showTime={32}
lon={-130}
lat={-65}
labelText="阿蒙森海"
/>
</Fragment>
);

20
src/components/domain/Three/SceneTwo/CustomFlyTo.jsx
View File

@ -9,6 +9,23 @@ export default function CustomFlyTo() {
const { replayVersion } = useSelector((state) => state.data);
function cameraFlyToLine() {
const step00 = {
destination: Cartesian3.fromDegrees(-29, 90, 10000000),
duration: 5,
complete: () => {
viewer.clock.shouldAnimate = true;
camera.flyTo(step0);
},
easingFunction: EasingFunction.LINEAR_NONE,
};
const step0 = {
destination: Cartesian3.fromDegrees(-29, -32, 10000000),
duration: 10,
complete: () => {
camera.flyTo(step1);
},
easingFunction: EasingFunction.LINEAR_NONE,
};
const step1 = {
destination: Cartesian3.fromDegrees(-29, -54, 10000000),
duration: 3,
@ -18,7 +35,6 @@ export default function CustomFlyTo() {
roll: 0,
},
complete: () => {
viewer.clock.shouldAnimate = true;
setTimeout(() => {
camera.flyTo(step2);
}, 2000);
@ -95,7 +111,7 @@ export default function CustomFlyTo() {
easingFunction: EasingFunction.LINEAR_NONE,
};
camera.flyTo(step1);
camera.flyTo(step00);
}
cameraFlyToLine();

36
src/components/domain/Three/SceneTwo/Labels.jsx
View File

@ -6,39 +6,27 @@ export default function Labels() {
return (
<Fragment>
<LabelEntity
showTime={2}
text={"南热带大西洋"}
position={Cartesian3.fromDegrees(-29, -33, 0)}
showTime={8}
text={"大西洋经向模AMM正位相"}
position={Cartesian3.fromDegrees(-29, -25, 0)}
eyeOffset={new Cartesian2(0, 1000000)}
/>
<LabelEntity
showTime={6}
text={"拉扎列夫海以北"}
position={Cartesian3.fromDegrees(18, -50, 0)}
showTime={20}
text={"AMM激发的Rossby波列"}
position={Cartesian3.fromDegrees(9, -33, 0)}
eyeOffset={new Cartesian2(0, 1000000)}
/>
<LabelEntity
showTime={10}
text={"南印度洋"}
position={Cartesian3.fromDegrees(80, -50, 0)}
showTime={28}
text={"反气旋环流"}
position={Cartesian3.fromDegrees(-160, -50, 0)}
eyeOffset={new Cartesian2(0, 1000000)}
/>
<LabelEntity
showTime={14}
text={"塔斯曼海"}
position={Cartesian3.fromDegrees(157, -35, 0)}
eyeOffset={new Cartesian2(0, 1000000)}
/>
<LabelEntity
showTime={18}
text={"罗斯海以北"}
position={Cartesian3.fromDegrees(178, -50, 0)}
eyeOffset={new Cartesian2(0, 1000000)}
/>
<LabelEntity
showTime={22}
text={"阿蒙森海"}
position={Cartesian3.fromDegrees(-130, -65, 0)}
showTime={33}
text={"南极变冷"}
position={Cartesian3.fromDegrees(-106, -80, 0)}
eyeOffset={new Cartesian2(0, 1000000)}
/>
</Fragment>

36
src/components/domain/Three/SceneTwo/Places.jsx Normal file
View File

@ -0,0 +1,36 @@
import { useState, Fragment } from "react";
import { Entity, useCesium, LabelGraphics } from "resium";
import { useInterval } from "ahooks";
import {
Cartesian3,
Color,
Math as CesiumMath,
LabelStyle,
Cartesian2,
} from "cesium";
function Place({ lon, lat, labelText }) {
return (
<Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
<LabelGraphics
text={labelText || "Rossby波列"}
font="24px Helvetica"
fillColor={Color.fromCssColorString("#04fbfd")}
outlineColor={Color.BLACK}
outlineWidth={2}
style={LabelStyle.FILL_AND_OUTLINE}
eyeOffset={new Cartesian2(0, 500000)}
/>
</Entity>
);
}
export default function Places({}) {
return (
<Fragment>
<Place id="place-1" lon={-29} lat={90} labelText="北极" />
<Place id="place-2" lon={-29} lat={45} labelText="北大西洋" />
<Place id="place-3" lon={-29} lat={-45} labelText="南大西洋" />
</Fragment>
);
}

14
src/components/domain/Three/SceneTwo/Point.jsx
View File

@ -14,13 +14,13 @@ import {
} from "cesium";
const data = [
{ longitude: -29, latitude: -33, height: 0, time: 0 },
{ longitude: -29, latitude: -33, height: 1000000, time: 2 },
{ longitude: 18, latitude: -50, height: 1000000, time: 6 },
{ longitude: 80, latitude: -50, height: 1000000, time: 10 },
{ longitude: 157, latitude: -35, height: 1000000, time: 14 },
{ longitude: 178, latitude: -50, height: 1000000, time: 18 },
{ longitude: -130, latitude: -65, height: 1000000, time: 22 },
{ longitude: -29, latitude: -33, height: 0, time: 10 },
{ longitude: -29, latitude: -33, height: 1000000, time: 12 },
{ longitude: 18, latitude: -50, height: 1000000, time: 16 },
{ longitude: 80, latitude: -50, height: 1000000, time: 20 },
{ longitude: 157, latitude: -35, height: 1000000, time: 24 },
{ longitude: 178, latitude: -50, height: 1000000, time: 28 },
{ longitude: -130, latitude: -65, height: 1000000, time: 32 },
];
function Point() {

29
src/components/domain/Three/SceneTwo/TimelineLayer.jsx Normal file
View File

@ -0,0 +1,29 @@
import { useState } from "react";
import { useCesium } from "resium";
import { useInterval } from "ahooks";
import ViewerImageLayer from "../SceneOne/ViewerImageLayer";
export default function TimelineLayer({ name, opacity, sTime, eTime }) {
const [show, setShow] = useState(false);
const { viewer } = useCesium();
useInterval(() => {
const { startTime, currentTime, shouldAnimate } = viewer.clock;
const _time = (currentTime.secondsOfDay - startTime.secondsOfDay).toFixed(
1
);
console.log(sTime, eTime, _time);
if (!shouldAnimate) return;
if (_time >= sTime && _time <= eTime) {
setShow(true);
} else {
if (!show) return;
setShow(false);
}
}, 300);
if (!show) return <></>;
return <ViewerImageLayer name={name} opacity={opacity} />;
}

39
src/components/domain/Three/SceneTwo/index.jsx
View File

@ -1,13 +1,12 @@
import MapLayout from "@/components/map/Layout";
import Legend from "./Legend";
import CustomFlyTo from "./CustomFlyTo";
import HGTImageLayer from "./HGTImageLayer";
import Point from "./Point";
import Circles from "./Circles";
import CustomChartPanel from "./CustomChartPanel";
import Labels from "./Labels";
import ReplayButton from "./ReplayButton";
import ViewerImageLayer from "../SceneOne/ViewerImageLayer";
import Places from "./Places";
import TimelineLayer from "./TimelineLayer";
function SceneTwo() {
return (
@ -16,19 +15,35 @@ function SceneTwo() {
<div className="title">
两极协同—连接南极和北极的热带大西洋经向模的媒介作用
</div>
<div className="right-panel one" style={{ height: "unset" }}>
<div className="bottom-panel">
<CustomChartPanel />
</div>
</div>
<Circles />
<Places />
<CustomFlyTo />
<Labels />
<Legend />
<HGTImageLayer />
<ViewerImageLayer name="4_3_1_Antarctic1" opacity={0.5} />
<ViewerImageLayer name="4_3_1_Arctic3" opacity={0.5} />
<ViewerImageLayer name="4_3_1_Atlantic2" opacity={0.5} />
<TimelineLayer
name="4_3_2_c_hgt_Layer1"
opacity={0.5}
sTime={10}
eTime={32}
/>
<TimelineLayer
name="4_3_1_Antarctic1"
opacity={0.5}
sTime={32}
eTime={100}
/>
<TimelineLayer
name="4_3_1_Arctic3"
opacity={0.5}
sTime={0}
eTime={10}
/>
<TimelineLayer
name="4_3_1_Atlantic2"
opacity={0.5}
sTime={0}
eTime={10}
/>
<Point />
<ReplayButton />
</MapLayout>

5
src/components/domain/Three/SceneTwo/index.module.less
View File

@ -1,7 +1,9 @@
@import "@/var.less";
.legend :global {
position: absolute;
bottom: 270px;
width: 450px;
width: 640px;
left: 12px;
// left: 25%;
z-index: 1000;
@ -16,6 +18,7 @@
.legend-title {
color: #04fbfd;
font-size: @font-32;
}
.colorbar {