fix

.pnp.cjs

@@ -38,6 +38,8 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["cesium", "npm:1.108.0"],\
             ["craco-cesium", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:1.2.0"],\
             ["craco-less", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:3.0.1"],\
+            ["echarts", "npm:5.4.3"],\
+            ["echarts-for-react", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:3.0.2"],\
             ["lodash-es", "npm:4.17.21"],\
             ["node-polyfill-webpack-plugin", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:2.0.1"],\
             ["react", "npm:18.2.0"],\
@@ -46,6 +48,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["react-router-dom", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:6.15.0"],\
             ["react-scripts", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:5.0.1"],\
             ["resium", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:1.17.1"],\
+            ["tslib", "npm:2.6.2"],\
             ["web-vitals", "npm:2.1.4"]\
           ],\
           "linkType": "SOFT"\
@@ -8091,6 +8094,8 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["cesium", "npm:1.108.0"],\
             ["craco-cesium", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:1.2.0"],\
             ["craco-less", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:3.0.1"],\
+            ["echarts", "npm:5.4.3"],\
+            ["echarts-for-react", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:3.0.2"],\
             ["lodash-es", "npm:4.17.21"],\
             ["node-polyfill-webpack-plugin", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:2.0.1"],\
             ["react", "npm:18.2.0"],\
@@ -8099,6 +8104,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
             ["react-router-dom", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:6.15.0"],\
             ["react-scripts", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:5.0.1"],\
             ["resium", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:1.17.1"],\
+            ["tslib", "npm:2.6.2"],\
             ["web-vitals", "npm:2.1.4"]\
           ],\
           "linkType": "SOFT"\
@@ -9993,6 +9999,45 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["echarts", [\
+        ["npm:5.4.3", {\
+          "packageLocation": "./.yarn/cache/echarts-npm-5.4.3-457e482005-f4f69becf1.zip/node_modules/echarts/",\
+          "packageDependencies": [\
+            ["echarts", "npm:5.4.3"],\
+            ["tslib", "npm:2.3.0"],\
+            ["zrender", "npm:5.4.4"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
+      ["echarts-for-react", [\
+        ["npm:3.0.2", {\
+          "packageLocation": "./.yarn/cache/echarts-for-react-npm-3.0.2-1e95fef430-d3b16325be.zip/node_modules/echarts-for-react/",\
+          "packageDependencies": [\
+            ["echarts-for-react", "npm:3.0.2"]\
+          ],\
+          "linkType": "SOFT"\
+        }],\
+        ["virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:3.0.2", {\
+          "packageLocation": "./.yarn/__virtual__/echarts-for-react-virtual-17745a9d5c/0/cache/echarts-for-react-npm-3.0.2-1e95fef430-d3b16325be.zip/node_modules/echarts-for-react/",\
+          "packageDependencies": [\
+            ["echarts-for-react", "virtual:76695216f943c60b10b879e1e542c9b6e80910f801a5dd27c12e0d8f35738fd0876c5aa2a358adcda9729f45063a41698f56ff18e205779bc9465c19ea5a0d5c#npm:3.0.2"],\
+            ["@types/echarts", null],\
+            ["@types/react", null],\
+            ["echarts", "npm:5.4.3"],\
+            ["fast-deep-equal", "npm:3.1.3"],\
+            ["react", "npm:18.2.0"],\
+            ["size-sensor", "npm:1.0.2"]\
+          ],\
+          "packagePeers": [\
+            "@types/echarts",\
+            "@types/react",\
+            "echarts",\
+            "react"\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["ee-first", [\
         ["npm:1.1.1", {\
           "packageLocation": "./.yarn/cache/ee-first-npm-1.1.1-33f8535b39-1b4cac778d.zip/node_modules/ee-first/",\
@@ -20744,6 +20789,15 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           "linkType": "HARD"\
         }]\
       ]],\
+      ["size-sensor", [\
+        ["npm:1.0.2", {\
+          "packageLocation": "./.yarn/cache/size-sensor-npm-1.0.2-243d2f7d26-de7050178a.zip/node_modules/size-sensor/",\
+          "packageDependencies": [\
+            ["size-sensor", "npm:1.0.2"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
+      ]],\
       ["slash", [\
         ["npm:1.0.0", {\
           "packageLocation": "./.yarn/cache/slash-npm-1.0.0-a244873c30-4b6e21b1fb.zip/node_modules/slash/",\
@@ -22059,6 +22113,13 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "HARD"\
         }],\
+        ["npm:2.3.0", {\
+          "packageLocation": "./.yarn/cache/tslib-npm-2.3.0-277e75e108-8869694c26.zip/node_modules/tslib/",\
+          "packageDependencies": [\
+            ["tslib", "npm:2.3.0"]\
+          ],\
+          "linkType": "HARD"\
+        }],\
         ["npm:2.6.2", {\
           "packageLocation": "./.yarn/cache/tslib-npm-2.6.2-4fc8c068d9-329ea56123.zip/node_modules/tslib/",\
           "packageDependencies": [\
@@ -23609,6 +23670,16 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
           ],\
           "linkType": "HARD"\
         }]\
+      ]],\
+      ["zrender", [\
+        ["npm:5.4.4", {\
+          "packageLocation": "./.yarn/cache/zrender-npm-5.4.4-dc4fac2b7a-4b317346af.zip/node_modules/zrender/",\
+          "packageDependencies": [\
+            ["zrender", "npm:5.4.4"],\
+            ["tslib", "npm:2.3.0"]\
+          ],\
+          "linkType": "HARD"\
+        }]\
       ]]\
     ]\
   }'), {basePath: basePath || __dirname});

package.json

@@ -13,6 +13,8 @@
     "cesium": "^1.108.0",
     "craco-cesium": "^1.2.0",
     "craco-less": "^3.0.1",
+    "echarts": "^5.0.2",
+    "echarts-for-react": "^3.0.2",
     "lodash-es": "^4.17.21",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "react": "^18.2.0",
@@ -21,6 +23,7 @@
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "resium": "^1.17.1",
+    "tslib": "^2.6.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/components/HomeLayout/NavBar.jsx

@@ -14,6 +14,8 @@ function NavBar() {
       <NavBarButton text={"两极协同-拉布拉多海"} onClick={navigateHandler} />
       <NavBarButton text={"两极协同-南极青藏高原"} onClick={navigateHandler} />
       <NavBarButton text={"两极协同-大西洋"} onClick={navigateHandler} />
+      <NavBarButton text={"三极协同-青藏高原上层"} onClick={navigateHandler} />
+      <NavBarButton text={"三极协同-东亚夏季风"} onClick={navigateHandler} />
     </div>
   );
 }

src/components/HomeLayout/index.module.less

@@ -66,11 +66,15 @@
     height: 72px;
     padding: 0 12px;
     color: #fff;
-    display: flex;
+    // display: flex;
-    align-items: center;
+    // justify-content: space-evenly;
-    gap: 8px;
+    // align-items: center;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    // grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
+    grid-auto-flow: row dense;
+    gap: 16px 0;
     // justify-content: space-between;
-    justify-content: space-evenly;
 
     .nav-bar-button {
       // border: 1px solid #4096ff;

src/components/PolygonLayout/Barotorpic.jsx

@@ -0,0 +1,30 @@
+import {
+  Entity,
+  PointGraphics,
+  PolylineGraphics,
+  useCesium,
+  PathGraphics,
+  EllipseGraphics,
+} from "resium";
+import { Color, Cartesian3 } from "cesium";
+
+function Barotropic() {
+  return (
+    <Entity
+      name="EllipseGraphics"
+      description="EllipseGraphics!!"
+      position={Cartesian3.fromDegrees(88, 60, 100)}
+    >
+      <EllipseGraphics
+        material={new Color(0.73, 0.94, 0.95, 0.8)}
+        semiMinorAxis={150000.0}
+        semiMajorAxis={150000.0}
+        extrudedHeight={1000000.0}
+        rotation={0.78539}
+        // outline
+      />
+    </Entity>
+  );
+}
+
+export default Barotropic;

src/components/PolygonLayout/CustomFlyTo copy.jsx

@@ -0,0 +1,60 @@
+import { Camera, useCesium } from "resium";
+
+function CustomFlyTo() {
+  const { viewer } = useCesium();
+  const { camera } = viewer;
+
+  function cameraFlyToLine(adjustPitch) {
+    // 南极
+    const antarcticalOptions = {
+      destination: Cesium.Cartesian3.fromDegrees(88, -89, 1600000),
+      orientation: {
+        heading: Cesium.Math.toRadians(15.0),
+        pitch: Cesium.Math.toRadians(-60),
+        roll: 0.0,
+      },
+      duration: 10,
+      complete: function () {
+        setTimeout(() => {
+          camera.flyTo(plateauOptions);
+        }, 1000);
+      },
+    };
+
+    // 青藏高原
+    const plateauOptions = {
+      destination: Cesium.Cartesian3.fromDegrees(90, 20, 1600000),
+      duration: 10,
+      orientation: {
+        heading: Cesium.Math.toRadians(-15.0),
+        pitch: -Cesium.Math.PI_OVER_FOUR,
+        roll: 0.0,
+      },
+      complete: function () {
+        setTimeout(function () {
+          camera.flyTo(sideViewOptions);
+        }, 1000);
+      },
+    };
+
+    // 侧边
+    const sideViewOptions = {
+      destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
+      duration: 5,
+      complete: () => {
+        viewer.clock.shouldAnimate = true;
+      },
+    };
+
+    if (adjustPitch) {
+      antarcticalOptions.pitchAdjustHeight = 1000;
+      plateauOptions.pitchAdjustHeight = 1000;
+      sideViewOptions.pitchAdjustHeight = 1000;
+    }
+    camera.flyTo(antarcticalOptions);
+  }
+  cameraFlyToLine();
+  return <Camera />;
+}
+
+export default CustomFlyTo;

src/components/PolygonLayout/CustomFlyTo.jsx

@@ -5,21 +5,7 @@ function CustomFlyTo() {
   const { camera } = viewer;
 
   function cameraFlyToLine(adjustPitch) {
-    const antarcticalOptions = {
+    // 青藏高原
-      destination: Cesium.Cartesian3.fromDegrees(88, -89, 1600000),
-      orientation: {
-        heading: Cesium.Math.toRadians(15.0),
-        pitch: Cesium.Math.toRadians(-60),
-        roll: 0.0,
-      },
-      duration: 10,
-      complete: function () {
-        setTimeout(() => {
-          camera.flyTo(plateauOptions);
-        }, 1000);
-      },
-    };
-
     const plateauOptions = {
       destination: Cesium.Cartesian3.fromDegrees(90, 20, 1600000),
       duration: 10,
@@ -35,8 +21,25 @@ function CustomFlyTo() {
       },
     };
 
+    // 拉布拉多海
+    const labrador = {
+      destination: Cesium.Cartesian3.fromDegrees(-55, 45, 1600000),
+      duration: 10,
+      orientation: {
+        heading: Cesium.Math.toRadians(-15.0),
+        pitch: -Cesium.Math.PI_OVER_FOUR,
+        roll: 0.0,
+      },
+      complete: function () {
+        setTimeout(function () {
+          camera.flyTo(plateauOptions);
+        }, 1000);
+      },
+    };
+
+    // 侧边
     const sideViewOptions = {
-      destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
+      destination: Cesium.Cartesian3.fromDegrees(-2.5, 32.5, 20000000),
       duration: 5,
       complete: () => {
         viewer.clock.shouldAnimate = true;
@@ -44,11 +47,10 @@ function CustomFlyTo() {
     };
 
     if (adjustPitch) {
-      antarcticalOptions.pitchAdjustHeight = 1000;
       plateauOptions.pitchAdjustHeight = 1000;
       sideViewOptions.pitchAdjustHeight = 1000;
     }
-    camera.flyTo(antarcticalOptions);
+    camera.flyTo(labrador);
   }
   cameraFlyToLine();
   return <Camera />;

src/components/PolygonLayout/CustomToolbar.jsx

@@ -0,0 +1,92 @@
+import { useCesium } from "resium";
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Select } from "antd";
+import styles from "./index.module.less";
+
+function CustomToolbar() {
+  const { viewer } = useCesium();
+  const navigate = useNavigate();
+
+  const [value, setValue] = useState("sideview");
+
+  const handleChange = (value) => {
+    setValue(value);
+    const pointEntity = viewer.entities.getById("point");
+    if (!viewer) return;
+    if (value === "overhead") {
+      // 俯视
+      viewer.trackedEntity = pointEntity;
+      const destination = pointEntity.position.getValue(
+        viewer.clock.currentTime
+      );
+      if (!destination) return;
+      const newDestination = new Cesium.Cartesian3();
+      newDestination.x = destination.x;
+      newDestination.y = destination.y + 13000000;
+      newDestination.z = destination.z;
+      viewer.camera.flyTo({
+        destination: newDestination,
+      });
+    } else if (value === "sideview") {
+      // 侧视
+      // viewer.trackedEntity = pointEntity;
+      viewer.trackedEntity = undefined;
+      viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
+      });
+    } else {
+      // 跟随mftata
+      viewer.trackedEntity = pointEntity;
+      const destination = pointEntity.position.getValue(
+        viewer.clock.currentTimes
+      );
+      if (!destination) return;
+      const newDestination = Cesium.Cartesian3.clone(destination);
+      newDestination.y = destination.y + 1000000;
+      viewer.camera.flyTo({
+        destination: newDestination,
+        orientation: {
+          heading: Cesium.Math.toRadians(0.0),
+          pitch: -Cesium.Math.PI_OVER_FOUR,
+          roll: 0.0,
+        },
+        duration: 0,
+      });
+    }
+  };
+
+  const navigateHandler = useCallback(() => {
+    navigate("/home", { replace: true });
+  }, [navigate]);
+
+  return (
+    <div className={styles.toolbar}>
+      <div className={"focusBtn"} onClick={navigateHandler}>
+        返回首页
+      </div>
+      <Select
+        // onSelect={handleChange}
+        onChange={handleChange}
+        value={value}
+        getPopupContainer={(node) => node}
+        options={[
+          // {
+          //   value: "overhead",
+          //   label: "俯视视角",
+          // },
+          {
+            value: "sideview",
+            label: "侧视视角",
+          },
+          {
+            value: "follow",
+            label: "跟随视角",
+          },
+        ]}
+      />
+    </div>
+  );
+}
+
+export default CustomToolbar;

src/components/PolygonLayout/Cyclone.jsx

@@ -0,0 +1,21 @@
+import { Entity, PointGraphics, useCesium } from "resium";
+
+function Cyclone({ position }) {
+  const { viewer } = useCesium();
+
+  return (
+    <Entity
+      id="xxxxpoint"
+      position={Cesium.Cartesian3.fromDegrees(88, 32.5, 111111)}
+    >
+      <PointGraphics
+        // positions={positions}
+        color={Cesium.Color.PINK}
+        width={10}
+        pixelSize={100}
+      />
+    </Entity>
+  );
+}
+
+export default Cyclone;

src/components/PolygonLayout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx

@@ -0,0 +1,131 @@
+import ReactECharts from "echarts-for-react";
+
+const years = [];
+
+for (let year = 1980; year <= 2017; year++) {
+  years.push(year);
+}
+
+// 高原夏季气温（异常值）
+const plateauData = [
+  -0.3532047, -0.3800191, -0.4393019, -0.4789361, -0.4674187, -0.4082659,
+  -0.3299886, -0.2692249, -0.2362842, -0.2431858, -0.2888356, -0.3307647,
+  -0.3263536, -0.2682413, -0.1973641, -0.1355748, -0.09169727, -0.05341399,
+  0.00680301, 0.0840551, 0.1391686, 0.1402837, 0.09915907, 0.06798702,
+  0.07436849, 0.1159735, 0.1679915, 0.2133843, 0.2477409, 0.2872947, 0.3583514,
+  0.4338831, 0.4701767, 0.4778886, 0.4858712, 0.5201119, 0.5574191, 0.570379,
+];
+
+// 拉布拉多海夏季海温（异常值）
+const laBrudata = [
+  -0.5808361, -0.6286728, -0.731713, -0.8032401, -0.7824413, -0.687568,
+  -0.5886319, -0.5527237, -0.6027562, -0.7280338, -0.8761956, -0.9766923,
+  -0.9833426, -0.8901258, -0.7279955, -0.5212721, -0.2961609, -0.0860718,
+  0.07991157, 0.166387, 0.1871717, 0.1972264, 0.2479431, 0.3619903, 0.5000346,
+  0.6201853, 0.696692, 0.7417008, 0.7834306, 0.8539514, 0.935372, 0.9951949,
+  0.9844907, 0.9088836, 0.7977505, 0.7049671, 0.644415, 0.6330437,
+];
+
+function SstAnnomary() {
+  const option = {
+    title: {
+      // text: "Stacked Line",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      data: ["ERSST_lancozs", "JRA55_lancozs"],
+      textStyle: { color: "#04fbfd", cursor: "point" },
+    },
+    animationDuration: 3000,
+    animationEasing: "cubicInOut",
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    // toolbox: {
+    //   feature: {
+    //     // 下载
+    //     saveAsImage: {},
+    //   },
+    // },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: years,
+      axisLine: {
+        onZero: false,
+        symbol: ["none", "arrow"],
+        symbolOffser: [0, 10],
+      },
+    },
+    yAxis: {
+      type: "value",
+      min: -1.5,
+      max: 2.0,
+      interval: 0.5,
+      splitNumber: 5,
+      splitLine: { show: false },
+      axisLine: {
+        onZero: false,
+        show: true,
+        symbol: ["none", "arrow"],
+        symbolOffset: [0, 10],
+      },
+      axisLabel: {
+        show: true,
+      },
+      axisTick: { show: true },
+      scale: true,
+    },
+    dataZoom: { type: "inside", start: 0, end: 100 },
+    series: [
+      {
+        name: "ERSST_lancozs",
+        type: "line",
+        stack: "Total",
+        data: laBrudata,
+        smooth: true,
+        color: "red",
+        symbol: "none",
+        itemStyle: {
+          color: "red",
+        },
+      },
+      {
+        name: "JRA55_lancozs",
+        type: "line",
+        // stack: "Total",
+        data: plateauData,
+        smooth: false,
+        color: "#00a1ff",
+        symbol: "none",
+        itemStyle: {
+          color: "#00a1ff",
+        },
+        lineStyle: {
+          type: "dashed",
+          width: 2,
+        },
+      },
+    ],
+  };
+
+  return (
+    <div className="chartInfoPanel">
+      <ReactECharts
+        option={option}
+        lazyUpdate={true}
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      />
+    </div>
+  );
+}
+
+export default SstAnnomary;

src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TPTT.jsx

@@ -0,0 +1,115 @@
+import ReactECharts from "echarts-for-react";
+
+const years = [];
+
+for (let year = 2011; year <= 2020; year++) {
+  years.push(year);
+}
+
+const observedData = [
+  -0.90765893, 0.14846958, 1.6577014, -0.32029018, -1.2422978, 0.44113398,
+  -0.45218363, 1.897564, -0.6926195, -0.529819,
+];
+
+const predictedData = [
+  -0.20760797, 0.206235, 0.85673275, 0.13969683, -0.39370838, 0.23775028,
+  -0.34866039, 0.93110625, 0.19143088, 0.5760311,
+];
+
+function TPTT() {
+  const option = {
+    title: {
+      // text: "Stacked Line",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      data: ["观测结果", "预测结果"],
+      textStyle: { color: "#04fbfd", cursor: "point" },
+    },
+    animationDuration: 3000,
+    animationEasing: "cubicInOut",
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    // toolbox: {
+    //   feature: {
+    //     // 下载
+    //     saveAsImage: {},
+    //   },
+    // },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: years,
+      axisLine: {
+        onZero: false,
+        symbol: ["none", "arrow"],
+        symbolOffser: [0, 10],
+      },
+    },
+    yAxis: {
+      type: "value",
+      min: -2.0,
+      max: 2.0,
+      interval: 0.5,
+      splitNumber: 5,
+      splitLine: { show: false },
+      axisLine: {
+        onZero: false,
+        show: true,
+        symbol: ["none", "arrow"],
+        symbolOffset: [0, 10],
+      },
+      axisLabel: {
+        show: true,
+      },
+      axisTick: { show: true },
+      scale: true,
+    },
+    dataZoom: { type: "inside", start: 0, end: 100 },
+    series: [
+      {
+        name: "观测结果",
+        type: "line",
+        stack: "Total",
+        data: observedData,
+        color: "black",
+        symbol: "none",
+        itemStyle: {
+          color: "black",
+        },
+      },
+      {
+        name: "预测结果",
+        type: "line",
+        // stack: "Total",
+        data: predictedData,
+        color: "red",
+        symbol: "none",
+        itemStyle: {
+          color: "red",
+        },
+      },
+    ],
+  };
+
+  return (
+    <div className="chartInfoPanel">
+      <ReactECharts
+        option={option}
+        lazyUpdate={true}
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      />
+    </div>
+  );
+}
+
+export default TPTT;

src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx

@@ -0,0 +1,184 @@
+import ReactECharts from "echarts-for-react";
+
+const years = [];
+
+for (let year = 1900; year <= 2000; year++) {
+  years.push(year);
+}
+
+const AntarcticaData = [
+  0.101942611, 0.121527548, 0.139042908, 0.153372484, 0.163348844, 0.16781324,
+  0.165740405, 0.156668394, 0.140792524, 0.118786901, 0.091903343, 0.062313072,
+  0.032977812, 0.00716395, -0.012074836, -0.022308346, -0.021755523,
+  -0.00911355, 0.016196573, 0.053416993, 0.100564819, 0.155328769, 0.215351821,
+  0.278252395, 0.341745714, 0.40383823, 0.463006888, 0.518309403, 0.569408932,
+  0.616333481, 0.65915749, 0.697835067, 0.732192543, 0.761939745, 0.78659761,
+  0.805314271, 0.81708585, 0.820876623, 0.815679973, 0.800851314, 0.776409401,
+  0.742721875, 0.700509783, 0.651004076, 0.595858743, 0.536937172, 0.476075479,
+  0.414725656, 0.353864772, 0.294239451, 0.236327526, 0.18015056, 0.125260938,
+  0.070978964, 0.016363941, -0.039809019, -0.09861786, -0.160770418,
+  -0.226238681, -0.294159838, -0.363174145, -0.431703208, -0.497831469,
+  -0.559188985, -0.613384987, -0.658281488, -0.692634725, -0.716904761,
+  -0.73222222, -0.739942379, -0.741611283, -0.73898482, -0.733815531,
+  -0.727389051, -0.720449369, -0.713466528, -0.706847385, -0.700922099,
+  -0.695911133, -0.691920829, -0.688978939, -0.687022002, -0.685739611,
+  -0.684476492, -0.682376879, -0.678508387, -0.672015068, -0.662330127,
+  -0.649157058, -0.632405431, -0.612100964, -0.588400678, -0.56151658,
+  -0.531629308, -0.498751783, -0.462720586, -0.423305188, -0.380187818,
+  -0.332990445, -0.281392986, -0.225240753,
+];
+const ArcticData = [
+  0.280477536, 0.259957371, 0.238217659, 0.215366218, 0.191558571, 0.167050728,
+  0.142221385, 0.117514405, 0.093353739, 0.070136018, 0.048165337, 0.027449274,
+  0.007551689, -0.012191879, -0.032557296, -0.054358257, -0.078483167,
+  -0.105781444, -0.137208672, -0.174049223, -0.217858518, -0.26986764,
+  -0.329886107, -0.395653113, -0.463819615, -0.530529991, -0.591308473,
+  -0.641252419, -0.675396192, -0.689099366, -0.679883827, -0.649742172,
+  -0.602149752, -0.540699996, -0.469155442, -0.39235518, -0.317187358,
+  -0.251641431, -0.203124483, -0.175400473, -0.167133512, -0.174805821,
+  -0.194600911, -0.222664488, -0.254875954, -0.286753396, -0.31384639,
+  -0.331733387, -0.335992097, -0.322259345, -0.28761534, -0.234372353,
+  -0.167389335, -0.091870697, -0.013026713, 0.063931601, 0.133955753,
+  0.193415777, 0.241940543, 0.280019233, 0.308168154, 0.326938643, 0.337234614,
+  0.34096367, 0.340608802, 0.338547054, 0.336593745, 0.335321866, 0.334127457,
+  0.331817533, 0.327341923, 0.320216724, 0.310432332, 0.298228465, 0.284102612,
+  0.268784935, 0.253114795, 0.237954629, 0.224151962, 0.212536008, 0.203736355,
+  0.198010458, 0.195233614, 0.194960735, 0.196490857, 0.19901247, 0.201666439,
+  0.203617401, 0.204129573, 0.202630823, 0.19873752, 0.192336315, 0.183625216,
+  0.173000981, 0.16106866, 0.148653001, 0.136669759, 0.12600632, 0.117368896,
+  0.111065474, 0.107060448,
+];
+const TibetanData = [
+  -0.054774324, -0.072074468, -0.088166217, -0.102150868, -0.113128752,
+  -0.12021764, -0.122708696, -0.12041877, -0.113696453, -0.103130771,
+  -0.089455408, -0.073531475, -0.056259257, -0.03854918, -0.021352917,
+  -0.005665395, 0.007550856, 0.01747264, 0.023473197, 0.025172256, 0.022567986,
+  0.01612004, 0.006575074, -0.005110343, -0.017780686, -0.030203073,
+  -0.041154273, -0.04937311, -0.053563998, -0.052516092, -0.045257867,
+  -0.031279225, -0.010592879, 0.016344502, 0.048680379, 0.085233754,
+  0.124518788, 0.164767706, 0.204092074, 0.240587798, 0.272353213, 0.297512938,
+  0.314395917, 0.321976324, 0.320031404, 0.309041322, 0.289958303, 0.26397781,
+  0.232447596, 0.196815201, 0.15858192, 0.119195224, 0.079906512, 0.041729979,
+  0.005377081, -0.028807517, -0.060676589, -0.09016857, -0.11718843,
+  -0.141549386, -0.163019079, -0.181382947, -0.196521195, -0.208451503,
+  -0.21726015, -0.223065102, -0.226003897, -0.226234158, -0.223991288,
+  -0.219766729, -0.214261928, -0.208224121, -0.202386774, -0.197405298,
+  -0.193729514, -0.191661726, -0.191394367, -0.192960556, -0.196177765,
+  -0.20070803, -0.206145455, -0.212083352, -0.218149914, -0.223985256,
+  -0.229195822, -0.233329665, -0.235927137, -0.236550243, -0.234784989,
+  -0.230241493, -0.222529731, -0.211284994, -0.196192431, -0.177010405,
+  -0.153629275, -0.126243447, -0.095383816, -0.061763417, -0.026131148,
+  0.010750252, 0.048064799,
+];
+
+function TripolarTemperature() {
+  const option = {
+    title: {
+      // text: "Stacked Line",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    legend: {
+      data: ["南极", "北极", "青藏高原"],
+      textStyle: { color: "#04fbfd", cursor: "point" },
+    },
+    animationDuration: 3000,
+    animationEasing: "cubicInOut",
+    grid: {
+      left: "3%",
+      right: "4%",
+      bottom: "3%",
+      containLabel: true,
+    },
+    // toolbox: {
+    //   feature: {
+    //     // 下载
+    //     saveAsImage: {},
+    //   },
+    // },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: years,
+      axisLine: {
+        onZero: false,
+        symbol: ["none", "arrow"],
+        symbolOffser: [0, 10],
+      },
+    },
+    yAxis: {
+      type: "value",
+      min: -1,
+      max: 1,
+      interval: 0.5,
+      splitNumber: 5,
+      splitLine: { show: false },
+      axisLine: {
+        onZero: false,
+        show: true,
+        symbol: ["none", "arrow"],
+        symbolOffset: [0, 10],
+      },
+      axisLabel: {
+        show: true,
+      },
+      axisTick: { show: true },
+      scale: true,
+    },
+    dataZoom: { type: "inside", start: 0, end: 100 },
+    series: [
+      {
+        name: "北极",
+        type: "line",
+        stack: "Total",
+        data: AntarcticaData,
+        smooth: true,
+        color: "red",
+        symbol: "none",
+        itemStyle: {
+          color: "red",
+        },
+      },
+      {
+        name: "南极",
+        type: "line",
+        // stack: "Total",
+        data: ArcticData,
+        smooth: true,
+        color: "blue",
+        symbol: "none",
+        itemStyle: {
+          color: "blue",
+        },
+      },
+      {
+        name: "青藏高原",
+        type: "line",
+        // stack: "Total",
+        data: TibetanData,
+        smooth: true,
+        color: "green",
+        symbol: "none",
+        itemStyle: {
+          color: "green",
+        },
+      },
+    ],
+  };
+
+  return (
+    <div className="chartInfoPanel">
+      <ReactECharts
+        option={option}
+        lazyUpdate={true}
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      />
+    </div>
+  );
+}
+
+export default TripolarTemperature;

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

@@ -0,0 +1,18 @@
+import SstAnnomary from "./SstAnnomary";
+import TripolarTemperature from "./TripolarTemperature";
+import TPTT from "./TPTT";
+
+function ChartInfoPanel({ type }) {
+  switch (type) {
+    case "sst":
+      return <SstAnnomary />;
+    case "tripolar":
+      return <TripolarTemperature />;
+    case "tptt":
+      return <TPTT />;
+    default:
+      break;
+  }
+}
+
+export default ChartInfoPanel;

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

@@ -0,0 +1,5 @@
+function TextInfoPanel() {
+  return <div className="textInfoPanel"></div>;
+}
+
+export default TextInfoPanel;

src/components/PolygonLayout/InfoLayout/index.jsx

@@ -0,0 +1,14 @@
+import ChartInfoPanel from "./ChartInfoPanel";
+import TextInfoPanel from "./TextInfoPanel";
+import styles from "./index.module.less";
+
+function InfoLayout() {
+  return (
+    <div className={styles.infoLayout}>
+      <TextInfoPanel />
+      <ChartInfoPanel type={"sst"} />
+    </div>
+  );
+}
+
+export default InfoLayout;

src/components/PolygonLayout/InfoLayout/index.module.less

@@ -0,0 +1,52 @@
+.infoLayout :global {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  pointer-events: none;
+
+  .textInfoPanel {
+    width: 476px;
+    height: 426px;
+    padding: 12px;
+    border: 1px solid #04fbfd;
+    color: #02f9ff !important;
+    background-color: #1f485690;
+    margin-bottom: 168px;
+    pointer-events: auto;
+
+    .ant-descriptions-item {
+      padding-bottom: 0;
+      .ant-descriptions-item-container {
+        font-size: 18px;
+
+        .ant-descriptions-item-label {
+          color: #02f9ff !important;
+          // font-size: ;
+        }
+
+        .ant-descriptions-item-content {
+          color: #02f9ff !important;
+        }
+      }
+    }
+  }
+
+  .chartInfoPanel {
+    width: 450px;
+    height: 400px;
+    pointer-events: auto;
+    padding: 12px;
+    border: 1px solid #04fbfd;
+    color: #02f9ff !important;
+    background-color: #1f485690;
+    margin-bottom: 168px;
+    // margin-left: 12px;
+
+    // .echarts-for-react {
+    // }
+  }
+}

src/components/PolygonLayout/PlateauPolygon.jsx

@@ -6,7 +6,7 @@ function PlateauPolygon() {
   return (
     <Fragment>
       <WavePoint stationLat={32.5} stationLon={88} />
-      <Entity>
+      <Entity id="plateau">
         <PolygonGraphics
           hierarchy={Cesium.Cartesian3.fromDegreesArray([
             85, 30, 91, 30, 91, 35, 85, 35,

src/components/PolygonLayout/Point copy.jsx

@@ -0,0 +1,132 @@
+import { Entity } from "resium";
+import { useRef } from "react";
+
+// const height = 9000 * 100;
+// // 从南极上升9000m
+// const step1 = [
+//   { longitude: -70, latitude: -60, height: 0, time: 0 },
+//   { longitude: -70, latitude: -60, height, time: 10 },
+// ];
+// // 从南极上空9km绕地球到青藏高原上空9km
+// const step2 = [
+//   { longitude: -30, latitude: -55, height, time: 20 },
+//   { longitude: 30, latitude: -40, height, time: 30 },
+//   { longitude: 65, latitude: -35, height, time: 40 },
+// ];
+// // 从青藏高原上空9km下降到青藏高原
+// const step3 = [
+//   { longitude: 95, latitude: -30, height, time: 50 },
+//   { longitude: 95, latitude: -30, height: 0, time: 60 },
+// ];
+// const data = flatten([step1, step2, step3]);
+
+const data = [];
+const height = 2000;
+
+for (let index = 0; index < 120; index++) {
+  data.push({
+    longitude: 88,
+    latitude: 35 - 120 + index * 0.9874, // 由南极到青藏高原
+    // latitude: 33 -index, // 由青藏高原到南极
+    height:
+      index > 59
+        ? index === 60
+          ? height * 59
+          : (119 - index) * height
+        : height * index,
+    time: index / 2,
+  });
+}
+
+function Point({ start, stop }) {
+  const entityRef = useRef();
+
+  /**
+   * 计算飞行路径
+   * 数据坐标
+   * {SampledPositionProperty|*}
+   */
+  function createProperty(source) {
+    let property = new Cesium.SampledPositionProperty();
+    for (let i = 0; i < source.length; i++) {
+      let time = Cesium.JulianDate.addSeconds(
+        start,
+        source[i].time,
+        new Cesium.JulianDate()
+      );
+      let position = Cesium.Cartesian3.fromDegrees(
+        source[i].longitude,
+        source[i].latitude,
+        source[i].height
+      );
+      // 添加位置，和时间对应
+      property.addSample(time, position);
+    }
+    return property;
+  }
+
+  const property = createProperty(data);
+  // property.setInterpolationOptions({
+  //   interpolationDegree: 10,
+  //   interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
+  // });
+  property.setInterpolationOptions({
+    interpolationDegree: 1,
+    interpolationAlgorithm: Cesium.LinearApproximation,
+  });
+
+  return (
+    <Entity
+      // onDoubleClick={(e) => {
+      //   setValue("follow");
+      // }}
+      ref={entityRef}
+      availability={
+        new Cesium.TimeIntervalCollection([
+          new Cesium.TimeInterval({
+            start: start,
+            stop: stop,
+          }),
+        ])
+      }
+      id={"point"}
+      position={property}
+      // 朝向
+      orientation={new Cesium.VelocityOrientationProperty(property)}
+      path={{
+        resolution: 1,
+        material: new Cesium.PolylineDashMaterialProperty({
+          dashLength: 20,
+          color: new Cesium.Color(4 / 255, 251 / 255, 253 / 255),
+        }),
+        // leadTime、trailTime 不设置 path全显示
+        leadTime: 0, // 设置为0时 模型通过后显示path
+        // trailTime: 0, // 设置为0时 模型通过后隐藏path
+        width: 2,
+      }}
+    >
+      {/* <PointGraphics
+          show={true}
+          color={Cesium.Color.SKYBLUE}
+          pixelSize={10}
+          outlineColor={Cesium.Color.YELLOW}
+          outlineWidth={3}
+        /> */}
+      {/* <PathGraphics
+          resolution={1}
+          material={
+            new Cesium.PolylineDashMaterialProperty({
+              dashLength: 20,
+              color: new Cesium.Color(4 / 255, 251 / 255, 253 / 255),
+            })
+          }
+          // leadTime、trailTime 不设置 path全显示
+          leadTime={0} // 设置为0时 模型通过后显示path
+          // trailTime: 0, // 设置为0时 模型通过后隐藏path
+          width={2}
+        /> */}
+    </Entity>
+  );
+}
+
+export default Point;

src/components/PolygonLayout/Point.jsx

@@ -1,32 +1,35 @@
-import { Entity, PointGraphics, useCesium } from "resium";
+import {
+  Entity,
+  PointGraphics,
+  PolylineGraphics,
+  useCesium,
+  PathGraphics,
+} from "resium";
 import { Fragment, useCallback, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useInterval } from "ahooks";
-import { Select } from "antd";
+import { flatten } from "lodash-es";
-import styles from "./index.module.less";
 
-const data = [];
+const height = 9000 * 100;
-const height = 20000;
+// 从拉布拉多海上升
-for (let index = 0; index < 120; index++) {
+const step1 = [
-  data.push({
+  { longitude: -55, latitude: 58, height: 1000000, time: 0 },
-    longitude: 88,
+  // { longitude: -70, latitude: -60, height, time: 10 },
-    latitude: 35 - 120 + index * 0.9874, // 由南极到青藏高原
+];
-    // latitude: 33 -index, // 由青藏高原到南极
+// 从拉布拉多海上空移动到目的地
-    height:
+const step2 = [
-      index > 59
+  // { longitude: -30, latitude: -55, height, time: 20 },
-        ? index === 60
+  // { longitude: 30, latitude: -40, height, time: 30 },
-          ? height * 59
+  // { longitude: 65, latitude: -35, height, time: 40 },
-          : (119 - index) * height
+];
-        : height * index,
+// 从目的地下降
-    time: index / 2,
+const step3 = [
-  });
+  // { longitude: 95, latitude: -30, height, time: 50 },
-}
+  { longitude: 80, latitude: 60, height: 1000000, time: 60 },
+];
+const data = flatten([step1, step2, step3]);
 
 function Point({ start, stop }) {
   const { viewer } = useCesium();
-  const entityRef = useRef();
-  const navigate = useNavigate();
-
-  const [value, setValue] = useState("sideview");
 
   /**
    * 计算飞行路径
@@ -44,7 +47,8 @@ function Point({ start, stop }) {
       let position = Cesium.Cartesian3.fromDegrees(
         source[i].longitude,
         source[i].latitude,
-        source[i].height
+        // source[i].height
+        1000000
       );
       // 添加位置，和时间对应
       property.addSample(time, position);
@@ -53,126 +57,70 @@ function Point({ start, stop }) {
   }
 
   const property = createProperty(data);
+  // property.setInterpolationOptions({
+  //   interpolationDegree: 10,
+  //   interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
+  // });
   property.setInterpolationOptions({
-    interpolationDegree: 10,
+    interpolationDegree: 1,
-    interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
+    interpolationAlgorithm: Cesium.LinearApproximation,
   });
 
-  const navigateHandler = useCallback(() => {
+  const animate = useCallback(() => {
-    navigate("/home", { replace: true });
+    const { currentTime, startTime, shouldAnimate } = viewer.clock;
-  }, [navigate]);
+    if (!shouldAnimate) return;
+    const entity = viewer.entities.getById("point");
+    const position = entity.position;
+    // console.log("entity :>> ", entity, position);
 
-  const handleChange = (value) => {
+    const time = Math.floor(currentTime.secondsOfDay - startTime.secondsOfDay);
-    setValue(value);
+    if (time < 10) {
-    if (!viewer) return;
+      // entity.position._value.z = position._value.z + 9000 * 10;
-    if (value === "overhead") {
+    } else if (10 < time < 50) {
-      // 俯视
+      if (time === 20) {
-      viewer.trackedEntity = entityRef.current.cesiumElement;
+      }
-      const destination = entityRef.current.cesiumElement.position.getValue(
+      if (time === 30) {
-        viewer.clock.currentTime
+      }
-      );
+      if (time === 40) {
-      if (!destination) return;
+      }
-      const newDestination = new Cesium.Cartesian3();
+    } else if (50 < time < 60) {
-      newDestination.x = destination.x;
-      newDestination.y = destination.y + 13000000;
-      newDestination.z = destination.z;
-      viewer.camera.flyTo({
-        destination: newDestination,
-      });
-    } else if (value === "sideview") {
-      // 侧视
-      // viewer.trackedEntity = entityRef.current.cesiumElement;
-      viewer.trackedEntity = undefined;
-      viewer.camera.flyTo({
-        destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
-      });
-    } else {
-      // 跟随
-      viewer.trackedEntity = entityRef.current.cesiumElement;
-      const destination = entityRef.current.cesiumElement.position.getValue(
-        viewer.clock.currentTime
-      );
-      if (!destination) return;
-      const newDestination = Cesium.Cartesian3.clone(destination);
-      newDestination.y = destination.y + 1000000;
-      viewer.camera.flyTo({
-        destination: newDestination,
-        orientation: {
-          heading: Cesium.Math.toRadians(0.0),
-          pitch: -Cesium.Math.PI_OVER_FOUR,
-          roll: 0.0,
-        },
-        duration: 0,
-      });
     }
-  };
+  }, [viewer]);
+  useInterval(animate, 1000);
 
   return (
-    <Fragment>
+    <Entity
-      <div className={styles.toolbar}>
+      id={"point"}
-        <div className={"focusBtn"} onClick={navigateHandler}>
+      position={property}
-          返回首页
+      availability={
-        </div>
+        new Cesium.TimeIntervalCollection([
-        <Select
+          new Cesium.TimeInterval({
-          // onSelect={handleChange}
+            start: start,
-          onChange={handleChange}
+            stop: stop,
-          value={value}
-          getPopupContainer={(node) => node}
-          options={[
-            // {
-            //   value: "overhead",
-            //   label: "俯视视角",
-            // },
-            {
-              value: "sideview",
-              label: "侧视视角",
-            },
-            {
-              value: "follow",
-              label: "跟随视角",
-            },
-          ]}
-        />
-      </div>
-      <Entity
-        onDoubleClick={(e) => {
-          // if ((viewer.trackedEntity = undefined))
-          setValue("follow");
-        }}
-        ref={entityRef}
-        availability={
-          new Cesium.TimeIntervalCollection([
-            new Cesium.TimeInterval({
-              start: start,
-              stop: stop,
-            }),
-          ])
-        }
-        id={"move"}
-        position={property}
-        // 朝向
-        orientation={new Cesium.VelocityOrientationProperty(property)}
-        path={{
-          resolution: 1,
-          material: new Cesium.PolylineGlowMaterialProperty({
-            glowPower: 0.1,
-            color: Cesium.Color.YELLOW,
           }),
-          // leadTime、trailTime 不设置 path全显示
+        ])
-          leadTime: 0, // 设置为0时 模型通过后显示path
+      }
-          // trailTime: 0, // 设置为0时 模型通过后隐藏path
+      orientation={new Cesium.VelocityOrientationProperty(property)}
-          width: 10,
+      path={{
-        }}
+        resolution: 1,
-      >
+        material: new Cesium.PolylineDashMaterialProperty({
-        <PointGraphics
+          dashLength: 20,
-          show={true}
+          color: new Cesium.Color(4 / 255, 251 / 255, 253 / 255),
-          color={Cesium.Color.SKYBLUE}
+        }),
-          pixelSize={10}
+        // leadTime、trailTime 不设置 path全显示
-          outlineColor={Cesium.Color.YELLOW}
+        leadTime: 0, // 设置为0时 模型通过后显示path
-          outlineWidth={3}
+        // trailTime: 0, // 设置为0时 模型通过后隐藏path
-        />
+        width: 2,
-      </Entity>
+      }}
-    </Fragment>
+    >
+      <PointGraphics
+        show={true}
+        color={Cesium.Color.SKYBLUE}
+        pixelSize={10}
+        outlineColor={Cesium.Color.YELLOW}
+        outlineWidth={3}
+      />
+    </Entity>
   );
 }
 

src/components/PolygonLayout/Udraft.jsx

@@ -0,0 +1,18 @@
+import { Entity, PolylineGraphics } from "resium";
+import { Cartesian3 } from "cesium";
+
+function Updraft() {
+  return (
+    <Entity position={Cartesian3.fromDegrees(-34.0707383, 60.7117244, 100)}>
+      <PolylineGraphics
+        positions={Cesium.Cartesian3.fromDegreesArrayHeights([
+          -55, 58, 0, -55, 58, 1000000,
+        ])}
+        width={10}
+        material={new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED)}
+      />
+    </Entity>
+  );
+}
+
+export default Updraft;

src/components/PolygonLayout/Watervapor.jsx

@@ -0,0 +1,33 @@
+import {
+  Entity,
+  PointGraphics,
+  PolylineGraphics,
+  useCesium,
+  PathGraphics,
+  EllipseGraphics,
+} from "resium";
+import { Color, Cartesian3 } from "cesium";
+import { Fragment } from "react";
+
+function Watervapor() {
+  return (
+    <Fragment>
+      <Entity position={Cesium.Cartesian3.fromDegreesArray([-100.0, 40.0])}>
+        <PolylineGraphics
+          positions={Cesium.Cartesian3.fromDegreesArray([
+            -100.0, 40.0, -90.0, 40.0,
+          ])}
+          width={5}
+          material={new Color(0.73, 0.94, 0.95, 0.8)}
+          semiMinorAxis={150000.0}
+          semiMajorAxis={150000.0}
+          extrudedHeight={200000.0}
+          rotation={0.78539}
+          // outline
+        />
+      </Entity>
+    </Fragment>
+  );
+}
+
+export default Watervapor;

src/components/PolygonLayout/WavePoint.jsx

@@ -42,6 +42,7 @@ function WavePoint({
 
   const point1 = (
     <Entity
+      id={`wave-point-1-${stationLon}-${stationLat}`}
       position={Cesium.Cartesian3.fromDegrees(
         data.stationLon,
         data.stationLat,
@@ -95,6 +96,7 @@ function WavePoint({
           0
         )}
         show={true}
+        id={`wave-point-2-${stationLon}-${stationLat}`}
       >
         <EllipseGraphics
           semiMinorAxis={new Cesium.CallbackProperty(changeTwo, false)}

src/components/PolygonLayout/index.jsx

@@ -1,10 +1,17 @@
-import { Viewer } from "resium";
+import { Viewer, Scene } from "resium";
 import PlateauPolygon from "./PlateauPolygon";
 import AntarcticaPolygon from "./AntarcticaPolygon";
 import Point from "./Point";
 import CustomClock from "./CustomClock";
 import CustomFlyTo from "./CustomFlyTo";
+import InfoLayout from "./InfoLayout";
 import styles from "./index.module.less";
+import WavePoint from "./WavePoint";
+import CustomToolbar from "./CustomToolbar";
+import Cyclone from "./Cyclone";
+import Barotropic from "./Barotorpic";
+import Watervapor from "./Watervapor";
+import Updraft from "./Udraft";
 
 // 起始时间
 let start = Cesium.JulianDate.fromDate(new Date());
@@ -16,22 +23,30 @@ function PolygonLayout() {
     <Viewer
       className={styles.cesiumContainer}
       full
-      infoBox={false}
+      // infoBox={false}
-      baseLayerPicker={false}
+      // baseLayerPicker={false}
-      timeline={true}
+      // timeline={true}
-      homeButton={false}
+      // homeButton={false}
-      fullscreenButton={false}
+      // fullscreenButton={false}
-      sceneModePicker={false}
+      // sceneModePicker={false}
-      navigationInstructionsInitiallyVisible={false}
+      // navigationInstructionsInitiallyVisible={false}
-      navigationHelpButton={false}
+      // navigationHelpButton={false}
       // animation={false}
       shouldAnimate={true}
     >
+      {/* <Scene mode={Cesium.SceneMode.COLUMBUS_VIEW} /> */}
       <CustomClock start={start} stop={stop} />
       <CustomFlyTo />
+      <CustomToolbar />
       <Point start={start} stop={stop} />
       <PlateauPolygon />
       <AntarcticaPolygon />
+      <WavePoint stationLon={-55} stationLat={58} />
+      <InfoLayout />
+      {/* <Cyclone /> */}
+      <Barotropic />
+      <Watervapor />
+      <Updraft />
     </Viewer>
   );
 }

src/components/PolygonLayout/index.module.less

@@ -1,4 +1,6 @@
 .cesiumContainer :global {
+  pointer-events: auto;
+
   .cesium-viewer {
     .cesium-viewer-bottom {
       display: none;

yarn.lock

@@ -5474,6 +5474,8 @@ __metadata:
     cesium: ^1.108.0
     craco-cesium: ^1.2.0
     craco-less: ^3.0.1
+    echarts: ^5.0.2
+    echarts-for-react: ^3.0.2
     lodash-es: ^4.17.21
     node-polyfill-webpack-plugin: ^2.0.1
     react: ^18.2.0
@@ -5482,6 +5484,7 @@ __metadata:
     react-router-dom: ^6.15.0
     react-scripts: 5.0.1
     resium: ^1.17.1
+    tslib: ^2.6.2
     web-vitals: ^2.1.4
   languageName: unknown
   linkType: soft
@@ -7018,6 +7021,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"echarts-for-react@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "echarts-for-react@npm:3.0.2"
+  dependencies:
+    fast-deep-equal: ^3.1.3
+    size-sensor: ^1.0.1
+  peerDependencies:
+    echarts: ^3.0.0 || ^4.0.0 || ^5.0.0
+    react: ^15.0.0 || >=16.0.0
+  checksum: d3b16325befb1294d99f6f089462415be739c1654370945eef2172efd5868596f10e4cd021e0ff65b89a6f9de5e9c331ccf3765d9167ccb12d573f9632b5b7a6
+  languageName: node
+  linkType: hard
+
+"echarts@npm:^5.0.2":
+  version: 5.4.3
+  resolution: "echarts@npm:5.4.3"
+  dependencies:
+    tslib: 2.3.0
+    zrender: 5.4.4
+  checksum: f4f69becf1cf8f546f9488ffa3bffaa971dcfbd49f5d635f288cbc8c5177839154bd6c325d6ed72c2b822c89c9bba4947ac73400614fd23c6f2f7ace3c939132
+  languageName: node
+  linkType: hard
+
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -15382,6 +15408,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"size-sensor@npm:^1.0.1":
+  version: 1.0.2
+  resolution: "size-sensor@npm:1.0.2"
+  checksum: de7050178ae9afee3388eb9191af0902b30ef83c26e8c9d9c203e1b560e270b947d978e4f56d211802112d09ef296931fa612f69155a483900f3b4717a0750d7
+  languageName: node
+  linkType: hard
+
 "slash@npm:^1.0.0":
   version: 1.0.0
   resolution: "slash@npm:1.0.0"
@@ -16518,6 +16551,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:2.3.0":
+  version: 2.3.0
+  resolution: "tslib@npm:2.3.0"
+  checksum: 8869694c26e4a7b56d449662fd54a4f9ba872c889d991202c74462bd99f10e61d5bd63199566c4284c0f742277736292a969642cc7b590f98727a7cae9529122
+  languageName: node
+  linkType: hard
+
 "tslib@npm:^1.8.1":
   version: 1.14.1
   resolution: "tslib@npm:1.14.1"
@@ -16525,7 +16565,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.3, tslib@npm:^2.3.0, tslib@npm:^2.4.1":
+"tslib@npm:^2.0.3, tslib@npm:^2.3.0, tslib@npm:^2.4.1, tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
@@ -17844,3 +17884,12 @@ __metadata:
   checksum: f77b3d8d00310def622123df93d4ee654fc6a0096182af8bd60679ddcdfb3474c56c6c7190817c84a2785648cdee9d721c0154eb45698c62176c322fb46fc700
   languageName: node
   linkType: hard
+
+"zrender@npm:5.4.4":
+  version: 5.4.4
+  resolution: "zrender@npm:5.4.4"
+  dependencies:
+    tslib: 2.3.0
+  checksum: 4b317346af8eca38e62ba029239c3a13e97eac4fa15b3ddadbae23442d8b373f0e937c255dee8080d6bb2fc79c9da54f1106415586ed8942bd8bc684b3890ea9
+  languageName: node
+  linkType: hard