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

Merge branch 'main' of http://git.phitrellis.com/Aifeilong/cesium-arrow

Browse Source
This commit is contained in:
baol 2023-10-26 20:23:16 +08:00
commit 1496baba0c
7 changed files with 69 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/domain/One/Legend.jsx
View File

@ -44,16 +44,16 @@ function Legend() {
key={`colorbar-item-${index}`}
className="colorbar-item"
style={{ backgroundColor: color }}
title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
-3.2 +
(index + 1) * 0.2
title={`${(-1.6 + index * 0.1).toFixed(1)}~${(
-1.6 +
(index + 1) * 0.1
).toFixed(1)}`}
/>
);
})}
</div>
<div className="legend-text">
{[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => {
{[-1.2, -0.8, -0.4, 0, 0.4, 0.8, 1.2, ""].map((item, index) => {
return (
<div key={`legend-text-item-${index}`} className="legend-text-item">
{item}

13
src/components/domain/Two/CustomFlyTo.jsx
View File

@ -24,7 +24,6 @@ function CustomFlyTo() {
const area2Options = {
destination: Cartesian3.fromDegrees(-30, -85, 10000000),
// destination: Cartesian3.fromDegrees(-30, -65, 10000000),
duration: 5,
complete: function () {
camera.flyTo(area3Options);
@ -88,24 +87,16 @@ function CustomFlyTo() {
};
const QTPlateauOption = {
destination: Cartesian3.fromDegrees(88, 18, 5000000),
destination: Cartesian3.fromDegrees(92, 8, 5000000),
duration: 2,
orientation: {
heading: 6,
pitch: -1.3,
pitch: -1.2,
roll: -6,
},
easingFunction: EasingFunction.LINEAR_NONE,
};
const xx = {
destination: Cartesian3.fromDegrees(95, -35, 10000000),
duration: 4,
easingFunction: EasingFunction.LINEAR_NONE,
};
// camera.flyTo(xx);
camera.flyTo(area1Options);
}
cameraFlyToLine();

58
src/components/domain/Two/HadleyCell.jsx
View File

@ -1,33 +1,40 @@
import { Cartesian3, Color, PolylineArrowMaterialProperty } from "cesium";
import { Fragment } from "react";
import { Entity, PolylineGraphics } from "resium";
import { useInterval } from "ahooks";
import {
CallbackProperty,
Cartesian3,
Color,
PolylineArrowMaterialProperty,
} from "cesium";
import { Fragment, useCallback, useState } from "react";
import { Entity, PolylineGraphics, useCesium } from "resium";
export default function HadleyCell() {
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 < 3) {
setShow(true);
} else if (show) setShow(false);
}, [show]);
useInterval(showAnimate, 100);
if (!show) return;
return (
<Fragment>
{/* 右下部分 */}
{/* <Entity>
<Entity show={show}>
<PolylineGraphics
positions={Cartesian3.fromDegreesArrayHeights([
68, 24, 200000, 68, 24, 1000000,
])}
width={10}
material={Color.WHITE}
/>
</Entity>
<Entity>
<PolylineGraphics
positions={Cartesian3.fromDegreesArrayHeights([
68, 24, 200000, 80, 30, 200000,
])}
width={30}
material={new PolylineArrowMaterialProperty(Color.BLUE)}
/>
</Entity> */}
<Entity>
<PolylineGraphics
positions={Cartesian3.fromDegreesArrayHeights([
68, 24, 1000000, 68, 24, 300000, 70, 25, 200000, 79, 29.5, 200000,
82, 14, 1000000, 82, 14, 300000, 82.3, 14.7, 200000, 87.7, 27.3,
200000,
])}
width={50}
material={
@ -38,10 +45,11 @@ export default function HadleyCell() {
/>
</Entity>
{/* 左上部分 */}
<Entity>
<Entity show={show}>
<PolylineGraphics
positions={Cartesian3.fromDegreesArrayHeights([
80, 30, 200000, 80, 30, 900000, 78, 29, 1000000, 69, 24.5, 1000000,
88, 28, 200000, 88, 28, 900000, 87.7, 27.3, 1000000, 82.3, 14.7,
1000000,
])}
width={50}
material={

4
src/components/domain/Two/Labels.jsx
View File

@ -19,7 +19,7 @@ function Labels() {
} else if (showIO) {
setShowIO(false);
}
if (leftTime < 4) {
if (leftTime < 3) {
setShowTB(true);
} else if (showIO) {
setShowTB(false);
@ -52,7 +52,7 @@ function Labels() {
eyeOffset={new Cartesian2(0, 200000)}
/>
</Entity>
<Entity show={showTB} position={Cartesian3.fromDegrees(94, 24, 0)}>
<Entity show={showTB} position={Cartesian3.fromDegrees(95, 28, 0)}>
<LabelGraphics
text={"高原上空降水增加、感热通量降低"}
font="24px Helvetica"

8
src/components/domain/Two/Legend.jsx
View File

@ -44,16 +44,16 @@ function Legend() {
key={`colorbar-item-${index}`}
className="colorbar-item"
style={{ backgroundColor: color }}
title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
-3.2 +
(index + 1) * 0.2
title={`${(-1.6 + index * 0.1).toFixed(1)}~${(
-1.6 +
(index + 1) * 0.1
).toFixed(1)}`}
/>
);
})}
</div>
<div className="legend-text">
{[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => {
{[-1.2, -0.8, -0.4, 0, 0.4, 0.8, 1.2, ""].map((item, index) => {
return (
<div key={`legend-text-item-${index}`} className="legend-text-item">
{item}

4
src/components/domain/Two/MoistureTransport.jsx
View File

@ -13,12 +13,12 @@ function MoistureTransport() {
stopTime.secondsOfDay - currentTime.secondsOfDay
);
if (leftTime < 5) {
if (leftTime < 3) {
setShow(true);
} else if (show) setShow(false);
}, [show]);
useInterval(showAnimate, 100);
useInterval(showAnimate, 300);
return (
<Fragment>

24
src/components/domain/Two/Site/index.jsx
View File

@ -1,6 +1,8 @@
import Site from "./Site";
import { useCallback, useState } from "react";
import { useCesium } from "resium";
import { useInterval } from "ahooks";
import { chunk } from "lodash-es";
import { useSelector } from "react-redux";
import Site from "./Site";
const positions = [
98, 38, 95, 37, 97, 37, 101, 37, 94, 36, 96, 36, 98, 36, 100, 36, 101, 36,
@ -15,6 +17,24 @@ const positions = [
];
function Sites() {
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 < 3) {
setShow(true);
} else if (show) setShow(false);
}, [show]);
useInterval(showAnimate, 100);
if (!show) return;
return chunk(positions, 2).map((position, index) => {
return <Site key={`site-${index}`} index={index} position={position} />;
});