init

src/components/common/TextInfoPanel/index.module.less

@@ -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;

src/components/domain/One/CustomChartPanel.jsx

@@ -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",
+          type: "solid",
-          width: 2,
+          width: 4,
         },
         animationDelay: 25 * 1000,
         animationDuration: 10 * 1000,

src/components/domain/One/EntityLegend.jsx

@@ -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>

src/components/domain/One/Labels/LabelEtity.jsx

@@ -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),

src/components/domain/One/index.jsx

@@ -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 />

src/components/domain/Three/SceneOne/CustomChartPanel.jsx

@@ -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,
+        },
       },
     ],
   };

src/components/domain/Three/SceneOne/TextLabel.jsx

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

src/components/domain/Three/SceneOne/ViewerImageLayer.jsx

@@ -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}
     />
   );
 }

src/components/domain/Three/SceneOne/ViewerOne.jsx

@@ -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>

src/components/domain/Three/SceneOne/ViewerTwo.jsx

@@ -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)}

src/components/domain/Three/SceneOne/index.jsx

@@ -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>
   );
 }

src/components/domain/Three/SceneOne/index.module.less

@@ -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;
+}

src/components/domain/Three/SceneTwo/index.jsx

@@ -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>

src/components/domain/Two/Circles.jsx

@@ -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>
     );
   };

src/components/domain/Two/EntityLegend.jsx

@@ -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} />

src/components/domain/Two/HadleyCell.jsx

@@ -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]);

src/components/domain/Two/Labels/LabelEtity.jsx

@@ -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),

src/components/domain/Two/Labels/index.jsx

@@ -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)}
       />

src/components/domain/Two/index.module.less

@@ -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-size: @font-32;
-      font-weight: 700;
       flex: 1;
     }
   }

src/components/home/Layout/NavBar.jsx

@@ -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/在线决策支持.png";
-// import onlineDecisionSupport from "@/assets/在线决策支持2.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>
     ),
   },

src/components/map/Layout/index.module.less

@@ -1,3 +1,5 @@
+@import "@/var.less";
+
 .cesiumContainer :global {
   pointer-events: auto;
 
@@ -114,8 +116,8 @@
   .entity-legend {
     position: absolute;
     bottom: 140px;
-    width: 960px;
+    width: calc(100% - 948px);
-    left: 25%;
+    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;
+    width: calc(100% - 948px);
-    left: 25%;
+    left: 474px;
     // height: 40px;
 
     display: flex;
@@ -155,8 +157,7 @@
 
     .legend-title {
       color: #fff;
-      font-size: 20px;
+      font-size: @font-32;
-      font-weight: 600;
     }
 
     .colorbar {

src/var.less

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