fix route

src/App.js

@@ -1,13 +1,13 @@
 import { Routes, Route, Navigate } from "react-router-dom";
 import HomeLayout from "@/components/HomeLayout";
-import PolygonLayout from "@/components/PolygonLayout";
+import MapLayout from "./components/map/Layout";
 import "./App.less";
 
 function App() {
   return (
     <Routes>
       <Route path="/" element={<HomeLayout />} />
-      <Route path="polygon" element={<PolygonLayout />} />
+      <Route path="map/:type" element={<MapLayout />}></Route>
       <Route path="*" element={<Navigate to={"/"} replace={true} />} />
     </Routes>
   );

src/components/HomeLayout/NavBar.jsx

@@ -6,8 +6,8 @@ import NavBarButton from "./NavBarButton";
 function NavBar() {
   const navigate = useNavigate();
   const navigateHandler = useCallback(
-    (e) => {
-      navigate("/polygon", { replace: true, state: { xx: 1 } });
+    (type) => {
+      navigate(`/map/${type}`, { replace: true });
     },
     [navigate]
   );
@@ -15,21 +15,37 @@ function NavBar() {
   return (
     <div className="nav-bar">
       <NavBarButton
-        key={1}
         text={"两极协同-拉布拉多海"}
-        onClick={navigateHandler}
+        onClick={() => navigateHandler(1)}
       />
       <NavBarButton
-        key={2}
         text={"两极协同-南极青藏高原"}
-        onClick={navigateHandler}
+        onClick={() => navigateHandler(2)}
+      />
+      <NavBarButton
+        text={"两极协同-大西洋"}
+        onClick={() => navigateHandler(3)}
+      />
+      <NavBarButton
+        text={"三极协同-青藏高原上层"}
+        onClick={() => navigateHandler(4)}
+      />
+      <NavBarButton
+        text={"三极协同-东亚夏季风"}
+        onClick={() => navigateHandler(5)}
+      />
+      <NavBarButton
+        text={"三极协同-东亚夏季风"}
+        onClick={() => navigateHandler(5)}
+      />
+      <NavBarButton
+        text={"三极协同-东亚夏季风"}
+        onClick={() => navigateHandler(5)}
+      />
+      <NavBarButton
+        text={"三极协同-东亚夏季风"}
+        onClick={() => navigateHandler(5)}
       />
-      <NavBarButton text={"两极协同-大西洋"} onClick={navigateHandler} />
-      <NavBarButton text={"三极协同-青藏高原上层"} onClick={navigateHandler} />
-      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
-      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
-      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
-      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
     </div>
   );
 }

src/components/PolygonLayout/InfoLayout/TextInfoPanel/First.jsx

@@ -1,14 +0,0 @@
-import TextPanel from "./TextPanel";
-
-function FirstPanel() {
-  return (
-    <TextPanel
-      title={"两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温"}
-      content={
-        "基于再分析资料JRA55和线性斜压模式LBM的试验结果，在年代际尺度上，拉布拉多海海温偏暖会引起北大西洋至欧洲地区大气环流异常，导致青藏高原夏季出现年代际增温。    在年代际尺度上，已有研究表明受大气水汽含量增加影响的晴空向下长波辐射是促进夏季青藏高原增温的主要影响因子。通过对夏季高原温度和水汽含量的进一步分析，研究发现二者在年代际变化尺度以及空间分布具有很好的一致性，即均在1997/1998年显著增高（图70）。同时，对1980-1997和1998-2017两个时间段的位势扰动场，并结合T-N波通量诊断发现从西北大西洋沿欧亚大陆至高原北部存在Rossby波列（图71），该波列在高原东北部激发的异常反气旋对高原净水汽含量增加起到关键作用。经过线性斜压模式（LBM）试验验证，证实拉布拉多海海表温度的年代际增加是激发该Rossby波列的主要原因。因此，拉布拉多海海温年代际正异常激发的Rossby波列可以在高原东北部形成异常反气旋，该反气旋具有相当正压结构，一方面可以增加高原水汽净含量，通过增强长波辐射促进高原增温，另一方面，通过正压结构直接加热高原东北部近地气温"
-      }
-    />
-  );
-}
-
-export default FirstPanel;

src/components/PolygonLayout/InfoLayout/TextInfoPanel/Second.jsx

@@ -1,10 +0,0 @@
-function SecondPanel() {
-  return (
-    <div className="textInfoPanel">
-      <div className="title"></div>
-      <div className="content"></div>
-    </div>
-  );
-}
-
-export default SecondPanel;

src/components/PolygonLayout/InfoLayout/TextInfoPanel/Third.jsx

@@ -1,10 +0,0 @@
-function ThirdPanel() {
-  return (
-    <div className="textInfoPanel">
-      <div className="title"></div>
-      <div className="content"></div>
-    </div>
-  );
-}
-
-export default ThirdPanel;

src/components/PolygonLayout/InfoLayout/TextInfoPanel/index.jsx

@@ -1,19 +0,0 @@
-import FirstPanel from "./First";
-import SecondPanel from "./Second";
-import ThirdPanel from "./Third";
-
-function TextInfoPanel({ type }) {
-  switch (type) {
-    case 1:
-      return <FirstPanel />;
-    case 2:
-      return <SecondPanel />;
-    case 3:
-      return <ThirdPanel />;
-
-    default:
-      break;
-  }
-}
-
-export default TextInfoPanel;

src/components/PolygonLayout/InfoLayout/index.jsx

@@ -1,21 +0,0 @@
-import { useLocation } from "react-router-dom";
-import ChartInfoPanel from "./ChartInfoPanel";
-import TextInfoPanel from "./TextInfoPanel";
-import styles from "./index.module.less";
-import { useSelector } from "react-redux";
-
-function InfoLayout() {
-  const location = useLocation();
-  const { toolbar } = useSelector((state) => state.data);
-
-  if (!toolbar.showPanel) return <></>;
-
-  return (
-    <div className={styles.infoLayout}>
-      <TextInfoPanel type={1} />
-      <ChartInfoPanel type={"sst"} />
-    </div>
-  );
-}
-
-export default InfoLayout;

src/components/map/Layout/CustomFlyTo.jsx

@@ -74,20 +74,6 @@ function CustomFlyTo() {
       },
     };
 
-    // 在point后方跟随
-    const step2 = {
-      destination: Cesium.Cartesian3.fromDegrees(88, 60, 2000000),
-      duration: 40,
-      orientation: {
-        heading: Cesium.Math.toRadians(-15.0),
-        pitch: -Cesium.Math.PI_OVER_FOUR,
-        roll: 0.0,
-      },
-    };
-
-    // barotorpic
-    const step3 = {};
-
     if (adjustPitch) {
       plateauOptions.pitchAdjustHeight = 1000;
       sideViewOptions.pitchAdjustHeight = 1000;

src/components/map/Layout/Entities/WavePoint.jsx

@@ -25,7 +25,6 @@ function WavePoint({
   var r3 = 0,
     r4 = 0;
   function changeOne() {
-    //这是callback，参数不能内传
     r1 = r1 + data.deviationR;
     if (r1 >= data.maxR) {
       r1 = 0;
@@ -74,7 +73,6 @@ function WavePoint({
   //第二个圆开始跑
   setTimeout(function () {
     function changeTwo() {
-      //这是callback，参数不能内传
       r3 = r3 + data.deviationR;
       if (r3 >= data.maxR) {
         r3 = 0;

src/components/map/Layout/InfoLayout/ChartInfoPanel/index.jsx

@@ -11,7 +11,7 @@ function ChartInfoPanel({ type }) {
     case "tptt":
       return <TPTT />;
     default:
-      break;
+      return <></>;
   }
 }
 

src/components/map/Layout/InfoLayout/TextInfoPanel/index.jsx

@@ -4,7 +4,7 @@ import { Scrollbars } from "react-custom-scrollbars-2";
 import { useInterval } from "ahooks";
 
 let index = 0;
-function TextPanel({ title, content }) {
+function TextInfoPanel({ title, content }) {
   const showNumberPerTimes = 1;
   const { toolbar } = useSelector((state) => state.data);
 
@@ -47,4 +47,4 @@ function TextPanel({ title, content }) {
   );
 }
 
-export default TextPanel;
+export default TextInfoPanel;

src/components/map/Layout/InfoLayout/index.jsx

@@ -0,0 +1,69 @@
+import { useParams } from "react-router-dom";
+import { useSelector } from "react-redux";
+import ChartInfoPanel from "./ChartInfoPanel";
+import TextInfoPanel from "./TextInfoPanel";
+import styles from "./index.module.less";
+
+const textInfoList = [
+  {
+    title: "两极协同—拉布拉多海海温偏暖控制夏季高原年代际增温",
+    content:
+      "基于再分析资料JRA55和线性斜压模式LBM的试验结果，在年代际尺度上，拉布拉多海海温偏暖会引起北大西洋至欧洲地区大气环流异常，导致青藏高原夏季出现年代际增温。    在年代际尺度上，已有研究表明受大气水汽含量增加影响的晴空向下长波辐射是促进夏季青藏高原增温的主要影响因子。通过对夏季高原温度和水汽含量的进一步分析，研究发现二者在年代际变化尺度以及空间分布具有很好的一致性，即均在1997/1998年显著增高（图70）。同时，对1980-1997和1998-2017两个时间段的位势扰动场，并结合T-N波通量诊断发现从西北大西洋沿欧亚大陆至高原北部存在Rossby波列（图71），该波列在高原东北部激发的异常反气旋对高原净水汽含量增加起到关键作用。经过线性斜压模式（LBM）试验验证，证实拉布拉多海海表温度的年代际增加是激发该Rossby波列的主要原因。因此，拉布拉多海海温年代际正异常激发的Rossby波列可以在高原东北部形成异常反气旋，该反气旋具有相当正压结构，一方面可以增加高原水汽净含量，通过增强长波辐射促进高原增温，另一方面，通过正压结构直接加热高原东北部近地气温",
+  },
+  {
+    title: "两极协同—南极涛动有效调节青藏高原降水和加热",
+    content:
+      "利用ERA5再分析数据诊断和CESM印度洋海温强迫数值实验，发现5月的南极涛动正位相（AAO）激发原子阿蒙森海的纬向波列异常。该异常造成印度洋海温降低进而激发环流异常造成高原上空降水增加、感热通量降低。这一结果有助于提高青藏高原热源的预测技巧，改进亚洲夏季风的预测。",
+  },
+  {
+    title: "两极协同—连接南极和北极的热带大西洋经向模的媒介作用",
+    content:
+      "利用GISTEMP资料，通过EEMD分解方法提取两极温度多年代际变化序列，发现南北极温度变化的跷跷板现象与大西洋多年代际振荡AMO紧密相关。而AMO与热带大西洋经向模AMM在年代际尺度上显著相关。ERA5再分析资料显示AMM可以通过Rossby波影响西南极的气温与海冰偶极子。因此，AMM可能在联系南北极气候变化的中起到了重要的媒介作用。",
+  },
+  {
+    title: "三极联动影响青藏高原上层温度",
+    content:
+      "利用ERA5再分析数据，通过XGBoost和LightGBM方法对青藏高原对流层温度异常进行预测，结果表明该温度异常主要受地球三极信号影响，机器学习方法的高预测性对于南亚高压和亚洲夏季降水有重要指示意义。",
+  },
+  {
+    title: "三极联动影响东亚夏季风",
+    content:
+      "利用39个CMIP6数值模拟数据训练卷积神经网络，利用NOAA20世纪再分析数据进行迁移学习、ERA5再分析数据进行测试，从而预测东亚夏季风。预测结果的热力图可视化表明尽管热带大洋对东亚夏季风的影响是最强的，然而不论是北极、南极还是青藏高原均显示有显著的前期信号（春季），这也表明地球三极可以协同影响东亚夏季风。关于东亚夏季风的预测一直是个难题。近期，我们利用机器学习识别了东亚夏季风的影响因子。地球三极的协同影响在东亚夏季风的归因图中得到了很好的体现：尽管热带大洋对东亚夏季风的影响是最强的，然而不论是北极、南极还是青藏高原均显示有显著的前期信号（春季），这也表明地球三极可以协同影响东亚夏季风。",
+  },
+];
+
+const chartInfoList = [
+  {
+    type: "1",
+    name: "sst",
+  },
+  {
+    type: "3",
+    name: "tripolar",
+  },
+  {
+    type: "4",
+    name: "tptt",
+  },
+];
+
+function InfoLayout() {
+  const { type } = useParams();
+  const { toolbar } = useSelector((state) => state.data);
+
+  if (!toolbar.showPanel) return <></>;
+
+  const hasText = textInfoList[type - 1];
+  const currentChartName = chartInfoList.find(
+    (item) => item.type === type
+  )?.name;
+
+  return (
+    <div className={styles.infoLayout}>
+      {!!hasText ? <TextInfoPanel {...hasText} /> : <em></em>}
+      <ChartInfoPanel type={currentChartName} />
+    </div>
+  );
+}
+
+export default InfoLayout;

src/components/map/Layout/Legend.jsx

@@ -0,0 +1,65 @@
+import styles from "./index.module.less";
+
+const colorBar = [
+  "#4160ac",
+  "#4363ae",
+  "#4867b1",
+  "#4d6bb3",
+  "#5370b6",
+  "#5d79bb",
+  "#6c85c1",
+  "#778dc7",
+  "#8297cd",
+  "#8fa3d3",
+  "#9baed9",
+  "#a6b7de",
+  "#b0c0e3",
+  "#bcc9e6",
+  "#c9d3eb",
+  "#d4ddf1",
+  "#fbd1d2",
+  "#fac4c6",
+  "#f9b8ba",
+  "#f8abae",
+  "#f79fa2",
+  "#f59496",
+  "#f4878a",
+  "#f37a7c",
+  "#f36e70",
+  "#f26264",
+  "#f15759",
+  "#f04c4f",
+  "#f14145",
+  "#ef3637",
+  "#ee2e30",
+  "#ee2529",
+];
+
+function legend() {
+  return (
+    <div className={styles.legend}>
+      <div className="colorbar">
+        {colorBar.map((color, index) => {
+          return (
+            <div
+              key={`colorbar-item-${index}`}
+              className="colorbar-item"
+              style={{ backgroundColor: color }}
+            />
+          );
+        })}
+      </div>
+      <div className="legend-text">
+        {[2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4].map((item, index) => {
+          return (
+            <div key={`legend-text-item-${index}`} className="legend-text-item">
+              {item}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default legend;

src/components/map/Layout/index.jsx

@@ -1,25 +1,27 @@
-import { Viewer, Scene } from "resium";
-import PlateauPolygon from "./PlateauPolygon";
-import AntarcticaPolygon from "./AntarcticaPolygon";
-import Point from "./Point";
+import { Viewer } from "resium";
 import CustomClock from "./CustomClock";
 import CustomFlyTo from "./CustomFlyTo";
-import InfoLayout from "./InfoLayout";
-import WavePoint from "./WavePoint";
 import CustomToolbar from "./CustomToolbar";
-import Cyclone from "./Cyclone";
-import Barotropic from "./Barotorpic";
-import Watervapor from "./Watervapor";
-import Updraft from "./Udraft";
-import styles from "./index.module.less";
+import InfoLayout from "./InfoLayout";
 import Picker from "./Picker";
+import Legend from "./Legend";
+import AntarcticaPolygon from "./Entities/AntarcticaPolygon";
+import Barotropic from "./Entities/Barotorpic";
+import Cyclone from "./Entities/Cyclone";
+import Point from "./Entities/Point";
+import PlateauPolygon from "./Entities/PlateauPolygon";
+import Updraft from "./Entities/Udraft";
+import Watervapor from "./Entities/Watervapor";
+import WavePoint from "./Entities/WavePoint";
+import styles from "./index.module.less";
 
 // 起始时间
 let start = Cesium.JulianDate.fromDate(new Date());
 // 结束时间
 let stop = Cesium.JulianDate.addSeconds(start, 60, new Cesium.JulianDate());
+const token = "41222ba4e90e51b5c90d08c329a55faa";
 
-function PolygonLayout() {
+function MapLayout() {
   return (
     <Viewer
       className={styles.cesiumContainer}
@@ -35,9 +37,8 @@ function PolygonLayout() {
       // animation={false}
       shouldAnimate={true}
     >
-      {/* <Scene mode={Cesium.SceneMode.COLUMBUS_VIEW} /> */}
       <CustomClock start={start} stop={stop} />
-      <CustomFlyTo />
+      {/* <CustomFlyTo /> */}
       <CustomToolbar />
       <Point start={start} stop={stop} />
       <PlateauPolygon />
@@ -49,8 +50,9 @@ function PolygonLayout() {
       {/* <Watervapor /> */}
       <Updraft />
       <Picker />
+      {/* <Legend /> */}
     </Viewer>
   );
 }
 
-export default PolygonLayout;
+export default MapLayout;

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

@@ -5,6 +5,12 @@
     .cesium-viewer-bottom {
       display: none;
     }
+
+    .cesium-viewer-toolbar {
+      .cesium-baseLayerPicker-dropDown-visible {
+        z-index: 2;
+      }
+    }
   }
 }
 
@@ -72,3 +78,45 @@
     }
   }
 }
+
+.legend :global {
+  position: absolute;
+  bottom: 100px;
+  width: 100%;
+  height: 40px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .colorbar {
+    width: 50%;
+    height: 40px;
+    display: flex;
+
+    .colorbar-item {
+      flex: 1;
+      height: 100%;
+      // border-radius: 8px;
+      border: 1px black solid;
+
+      &:not(:nth-child(1)) {
+        border-left: none;
+      }
+    }
+  }
+
+  .legend-text {
+    display: flex;
+    justify-content: space-evenly;
+    width: 50%;
+    height: 20px;
+
+    .legend-text-item {
+      flex: 1;
+      text-align: center;
+      color: white;
+    }
+  }
+}