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

init

Browse Source
This commit is contained in:
baol 2023-11-06 11:28:18 +08:00
parent 6941547024
commit 3bc6533da0
22 changed files with 88 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/common/TextInfoPanel/index.module.less
View File

@ -1,3 +1,5 @@
@import "@/var.less";
.textInfoPanel :global {
width: 100%;
height: 100%;
@ -5,7 +7,7 @@
color: white !important;
background-color: #000000e7;
pointer-events: auto;
font-size: 22px;
font-size: @font-32;
text-indent: 2em;
line-height: 1.5;
z-index: 999;

16
src/components/domain/One/CustomChartPanel.jsx
View File

@ -39,7 +39,7 @@ function CustomChartPanel() {
},
legend: {
data: ["拉布拉多海夏季海温(异常值)", "高原夏季气温(异常值)"],
textStyle: { color: "#04fbfd", cursor: "point", fontSize: 20 },
textStyle: { color: "#04fbfd", cursor: "point", fontSize: 22 },
},
grid: {
left: "3%",
@ -61,12 +61,16 @@ function CustomChartPanel() {
},
},
axisLabel: {
interval: 4,
interval: 9,
fontSize: 22,
},
},
yAxis: {
type: "value",
name: "℃",
nameTextStyle: {
fontSize: 22,
},
min: -1.5,
max: 2.0,
interval: 0.5,
@ -83,6 +87,7 @@ function CustomChartPanel() {
},
axisLabel: {
show: true,
fontSize: 22,
},
axisTick: { show: true },
scale: true,
@ -100,6 +105,9 @@ function CustomChartPanel() {
itemStyle: {
color: "red",
},
lineStyle: {
width: 4, //设置线条粗细
},
animationDelay: 5 * 1000,
animationDuration: 30 * 1000,
animationEasing: "cubicInOut",
@ -115,8 +123,8 @@ function CustomChartPanel() {
color: plateauColor,
},
lineStyle: {
type: "dashed",
width: 2,
type: "solid",
width: 4,
},
animationDelay: 25 * 1000,
animationDuration: 10 * 1000,

2
src/components/domain/One/EntityLegend.jsx
View File

@ -5,7 +5,7 @@ import waterwapor from "@/assets/waterwapor.png";
function EntityLegend() {
return (
<div className="entity-legend" style={{ bottom: 116 }}>
<div className="entity-legend" style={{ bottom: 129 }}>
<div className="entity-legend-item">
<div style={{ fontWeight: 800, color: "#04fafc" }}>- - - -</div>
<div className="entity-legend-item-name">Rossby 波列传播路径</div>

4
src/components/domain/One/Labels/LabelEtity.jsx
View File

@ -16,8 +16,8 @@ export default function LabelEntity({ showTime, text, position }) {
}, [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),

2
src/components/domain/One/index.jsx
View File

@ -27,7 +27,7 @@ export default function DomainOne() {
<CustomFlyTo />
<Point />
<div className="left-panel one">
<TextInfoPanel content="基于再分析资料JRA55和线性斜压模式LBM的试验结果，拉布拉多海海温偏暖会引起北大西洋至欧洲地区大气环流异常，导致青藏高原夏季出现年代际增温。该成果加深了对中纬度地区最高地形与北极之间冰冻圈联系的认识。" />
<TextInfoPanel content="基于再分析资料JRA55和线性斜压模式LBM的试验结果，发现拉布拉多海海温偏暖会引起北大西洋至欧洲地区大气环流异常，导致青藏高原夏季出现年代际增温。该成果加深了对中纬度地区最高地形与北极之间冰冻圈联系的认识。" />
</div>
<div className="right-panel one">
<CustomChartPanel />

19
src/components/domain/Three/SceneOne/CustomChartPanel.jsx
View File

@ -86,7 +86,7 @@ function CustomChartPanel() {
},
legend: {
data: ["南极", "北极", "青藏高原"],
textStyle: { color: "#04fbfd", cursor: "point", fontSize: 20 },
textStyle: { color: "#04fbfd", cursor: "point", fontSize: 24 },
},
animationDuration: 10 * 1000,
animationEasing: "cubicInOut",
@ -115,16 +115,21 @@ function CustomChartPanel() {
},
},
axisLabel: {
interval: 4,
interval: 10,
fontSize: 24,
},
},
yAxis: {
type: "value",
name: "℃",
min: -1,
max: 1,
interval: 0.5,
splitNumber: 5,
splitLine: { show: false },
nameTextStyle: {
fontSize: 24,
},
axisLine: {
onZero: false,
show: true,
@ -136,6 +141,7 @@ function CustomChartPanel() {
},
axisLabel: {
show: true,
fontSize: 24,
},
axisTick: { show: true },
scale: true,
@ -153,6 +159,9 @@ function CustomChartPanel() {
itemStyle: {
color: "red",
},
lineStyle: {
width: 4,
},
},
{
name: "南极",
@ -165,6 +174,9 @@ function CustomChartPanel() {
itemStyle: {
color: "blue",
},
lineStyle: {
width: 4,
},
},
{
name: "青藏高原",
@ -177,6 +189,9 @@ function CustomChartPanel() {
itemStyle: {
color: "green",
},
lineStyle: {
width: 4,
},
},
],
};

6
src/components/domain/Three/SceneOne/TextLabel.jsx Normal file
View File

@ -0,0 +1,6 @@
import styles from "./index.module.less";
export default function TextLabel() {
return (
<div className={styles.textLabel}>南北极之间温度变化存在跷跷板现象</div>
);
}

4
src/components/domain/Three/SceneOne/ViewerImageLayer.jsx
View File

@ -4,7 +4,7 @@ import { WebMapServiceImageryProvider } from "cesium";
const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";
function LandImageLayer({ name }) {
function LandImageLayer({ name, opacity=1.0 }) {
const tempProvider = useMemo(
() =>
new WebMapServiceImageryProvider({
@ -23,7 +23,7 @@ function LandImageLayer({ name }) {
key={`ImageryLayer-${name}`}
imageryProvider={tempProvider}
show={true}
alpha={0.5}
alpha={opacity}
/>
);
}

2
src/components/domain/Three/SceneOne/ViewerOne.jsx
View File

@ -21,7 +21,7 @@ function ViewerOne({ children }) {
/>
<WavePoint stationLon={88} stationLat={-85} labelText={"南极"} />
<ViewerImageLayer name="4_3_1_Antarctic1" />
<ViewerImageLayer name="4_3_1_tas_Layer1" />
{children}
</MapLayout>
</div>

2
src/components/domain/Three/SceneOne/ViewerTwo.jsx
View File

@ -8,7 +8,7 @@ function ViewerTwo({ children }) {
return (
<div className="domain-viewer">
<MapLayout>
<ViewerImageLayer name="4_3_1_Arctic3" />
<ViewerImageLayer name="4_3_1_tas_Layer1" />
<CameraFlyTo
duration={5}
destination={Cartesian3.fromDegrees(0, 88, 10000000)}

6
src/components/domain/Three/SceneOne/index.jsx
View File

@ -4,6 +4,7 @@ import Legend from "./Legend";
import ViewerOne from "./ViewerOne";
import ViewerTwo from "./ViewerTwo";
import ViewerThree from "./ViewerThree";
import TextLabel from "./TextLabel";
import styles from "./index.module.less";
function SceneOne() {
@ -12,17 +13,14 @@ function SceneOne() {
<div className="domain-viewers">
<ViewerOne />
<ViewerTwo />
<ViewerThree />
</div>
<div className="domain-info">
<div className="left-panel">
<TextInfoPanel content="利用GISTEMP资料，通过EEMD分解方法提取两极温度多年代际变化序列，发现南北极温度变化的跷跷板现象与大西洋多年代际振荡AMO紧密相关。而AMO与热带大西洋经向模AMM在年代际尺度上显著相关。ERA5再分析资料显示AMM可以通过Rossby波影响西南极的气温与海冰偶极子。因此，AMM可能在联系南北极气候变化的中起到了重要的媒介作用。" />
</div>
<div className="right-panel">
<CustomChartPanel />
</div>
</div>
<Legend />
<TextLabel />
</div>
);
}

14
src/components/domain/Three/SceneOne/index.module.less
View File

@ -1,3 +1,5 @@
@import "@/var.less";
.sceneOne :global {
display: flex;
flex-direction: column;
@ -106,6 +108,7 @@
.legend-title {
color: #04fbfd;
font-size: @font-32;
}
.colorbar {
@ -134,9 +137,18 @@
.legend-text-item {
flex: 1;
text-align: right;
font-weight: 600;
color: white;
-webkit-text-stroke: #04fbfd 1px;
}
}
}
.textLabel :global {
position: absolute;
bottom: calc(50% + 132px);
width: 50%;
left: 25%;
text-align: center;
color: #04fbfd;
font-size: @font-32;
}

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

@ -7,6 +7,7 @@ import Circles from "./Circles";
import CustomChartPanel from "./CustomChartPanel";
import Labels from "./Labels";
import ReplayButton from "./ReplayButton";
import ViewerImageLayer from "../SceneOne/ViewerImageLayer";
function SceneTwo() {
return (
@ -25,6 +26,9 @@ function SceneTwo() {
<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} />
<Point />
<ReplayButton />
</MapLayout>

11
src/components/domain/Two/Circles.jsx
View File

@ -89,17 +89,6 @@ function Circles() {
>
{circle}
</Entity>
<Entity position={Cartesian3.fromDegrees(lon, lat, 0)}>
<LabelGraphics
text={"Rossby波列"}
font="24px Helvetica"
fillColor={Color.fromCssColorString("#04fbfd")}
outlineColor={Color.BLACK}
outlineWidth={2}
style={LabelStyle.FILL_AND_OUTLINE}
eyeOffset={new Cartesian2(0, 1000000)}
/>
</Entity>
</Fragment>
);
};

2
src/components/domain/Two/EntityLegend.jsx
View File

@ -6,7 +6,7 @@ import moisture from "@/assets/moisture.png";
function EntityLegend() {
return (
<div className="entity-legend" style={{ bottom: 116 }}>
<div className="entity-legend" style={{ bottom: 128 }}>
<div className="entity-legend-item">
<div style={{ transform: "rotate(45deg)" }}>
<img src={low} alt="low" width={32} />

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

@ -18,7 +18,7 @@ export default function HadleyCell() {
stopTime.secondsOfDay - currentTime.secondsOfDay
);
if (leftTime < 3) {
if (leftTime < 5) {
setShow(true);
} else if (show) setShow(false);
}, [show]);

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

@ -16,8 +16,8 @@ export default function LabelEntity({ showTime, text, position }) {
}, [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),

2
src/components/domain/Two/Labels/index.jsx
View File

@ -21,7 +21,7 @@ export default function Labels() {
position={Cartesian3.fromDegrees(73, -7, 0)}
/>
<LabelEntity
showTime={27}
showTime={26}
text={"局地环流异常"}
position={Cartesian3.fromDegrees(84, 15, 0)}
/>

6
src/components/domain/Two/index.module.less
View File

@ -1,6 +1,7 @@
@import "@/var.less";
.siteLegend :global {
position: absolute;
width: 230px;
width: 260px;
height: 300px;
right: 12px;
bottom: 14px;
@ -18,8 +19,7 @@
gap: 8px;
.site-legend-item-name {
font-size: 20px;
font-weight: 700;
font-size: @font-32;
flex: 1;
}
}

12
src/components/home/Layout/NavBar.jsx
View File

@ -2,11 +2,11 @@ import { Fragment } from "react";
import { Dropdown } from "antd";
import NavBarButton from "./NavBarButton";
import funcLibrary from "@/assets/方法库.png";
// import funcLibrary from "@/assets/方法库2.png";
import onlineDecisionSupport from "@/assets/方法库2.png";
import threePoles from "@/assets/三极联动.png";
import dataShare from "@/assets/数据共享.jpg";
import onlineDecisionSupport from "@/assets/在线决策支持.png";
// import onlineDecisionSupport from "@/assets/在线决策支持2.png";
// import onlineDecisionSupport from "@/assets/在线决策支持.png";
// import funcLibrary from "@/assets/在线决策支持2.png";
import styles from "./index.module.less";
const itemsTwo = [
@ -18,7 +18,7 @@ const itemsTwo = [
rel="noopener noreferrer"
href="http://casearthpoles.tpdc.ac.cn/zh-hans/data/analyze/list"
>
简介
方法库在线集成与共享
</a>
),
},
@ -26,7 +26,7 @@ const itemsTwo = [
key: "2",
label: (
<a target="_blank" rel="noopener noreferrer" href="/random_forest">
随机森林方法在线计算案例
随机森林算法融合多源雪深数据产品
</a>
),
},
@ -38,7 +38,7 @@ const itemsTwo = [
rel="noopener noreferrer"
href="/show/map/climateReconDataAssim"
>
过去千年气候重建数据同化
过去千年气候重建
</a>
),
},

15
src/components/map/Layout/index.module.less
View File

@ -1,3 +1,5 @@
@import "@/var.less";
.cesiumContainer :global {
pointer-events: auto;
@ -114,8 +116,8 @@
.entity-legend {
position: absolute;
bottom: 140px;
width: 960px;
left: 25%;
width: calc(100% - 948px);
left: 474px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
@ -132,7 +134,7 @@
gap: 8px;
.entity-legend-item-name {
font-weight: 700;
font-size: @font-32;
}
}
}
@ -140,8 +142,8 @@
.legend {
position: absolute;
bottom: 12px;
width: 960px;
left: 25%;
width: calc(100% - 948px);
left: 474px;
// height: 40px;
display: flex;
@ -155,8 +157,7 @@
.legend-title {
color: #fff;
font-size: 20px;
font-weight: 600;
font-size: @font-32;
}
.colorbar {

1
src/var.less Normal file
View File

@ -0,0 +1 @@
@font-32: 24px;