fix

2023-10-09 18:06:49 +08:00 · 2023-10-09 18:06:49 +08:00 · e73dec4a49
commit e73dec4a49
parent 2e389e43c6
40 changed files with 131 additions and 1805 deletions
--- a/package.json
+++ b/package.json
@ -17,6 +17,7 @@
    "ahooks": "^3.7.8",
    "antd": "4.24.9",
    "cesium": "^1.108.0",
+    "classnames": "^2.3.2",
    "craco-cesium": "^1.2.0",
    "craco-less": "^3.0.1",
    "echarts": "^5.0.2",
--- a/src/components/common/CustomToolbar/index.jsx
+++ b/src/components/common/CustomToolbar/index.jsx
@ -82,7 +82,7 @@ function CustomToolbar() {
    };
  }, []);

-  const isAtRightEdge = mouseX >= window.innerWidth - 10;
+  const isAtRightEdge = mouseX >= window.innerWidth - 20;
  const iaClose = mouseX + 320 <= window.innerWidth;

  useEffect(() => {
--- a/src/components/common/CustomToolbar/index.module.less
+++ b/src/components/common/CustomToolbar/index.module.less
@ -1,5 +1,5 @@
 .drawerToolbar :global {
-  transition: all 0.3s ease;
+  transition: all 0.6s ease;

  .ant-drawer-content-wrapper {
    .ant-drawer-content {
--- a/src/components/domain/Five/ChartPanel.jsx
+++ b/src/components/domain/Five/ChartPanel.jsx
@ -50,6 +50,9 @@ function ChartPanel() {
        onZero: false,
        symbol: ["none", "arrow"],
        symbolOffser: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
    },
    yAxis: {
@ -64,6 +67,9 @@ function ChartPanel() {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
      axisLabel: {
        show: true,
--- a/src/components/domain/Five/FormPanel.jsx
+++ b/src/components/domain/Five/FormPanel.jsx
@ -1,4 +1,4 @@
-import { Button, Form, Input, Select } from "antd";
+import { Button, Form, Select } from "antd";

 const layout = {
  labelCol: { span: 6 },
@ -8,7 +8,50 @@ const tailLayout = {
  wrapperCol: { offset: 6, span: 16 },
 };

-const { Option } = Select;
+const options = [
+  "ACCESS-CM2",
+  "ACCESS-ESM1-5",
+  "AWI-CM-1-1-MR",
+  "AWI-ESM-1-1-LR",
+  "BCC-CSM2-MR",
+  "BCC-ESM1",
+  "CAMS-CSM1-0",
+  "CanESM5",
+  "CAS-ESM2-0",
+  "CESM2-FV2",
+  "CESM2",
+  "CESM2-WACCM-FV2",
+  "CESM2-WACCM",
+  "CIESM",
+  "CMCC-CM2-SR5",
+  "EC-Earth3",
+  "EC-Earth3-Veg",
+  "EC-Earth3-Veg-LR",
+  "FGOALS-f3-L",
+  "FGOALS-g3",
+  "GFDL-ESM4",
+  "GISS-E2-1-G",
+  "GISS-E2-1-H",
+  "INM-CM4-8",
+  "INM-CM5-0",
+  "IPSL-CM6A-LR",
+  "KACE-1-0-G",
+  "MCM-UA-1-0",
+  "MIROC6",
+  "MPI-ESM-1-2-HAM",
+  "MPI-ESM1-2-HR",
+  "MPI-ESM1-2-LR",
+  "MRI-ESM2-0",
+  "NESM3",
+  "NorCPM1",
+  "NorESM2-LM",
+  "NorESM2-MM",
+  "SAM0-UNICON",
+  "TaiESM1",
+].map((item) => ({
+  label: item,
+  value: item,
+}));

 export default function FormPanel({ setShow }) {
  const [form] = Form.useForm();
@ -63,7 +106,6 @@ export default function FormPanel({ setShow }) {
          ],
        }}
        onFinish={(values) => {
-          console.log("Success:", values);
          setShow(true);
        }}
      >
@ -75,51 +117,9 @@ export default function FormPanel({ setShow }) {
          <Select
            placeholder="请选择模式名称"
            mode="multiple"
-            options={[
-              "ACCESS-CM2",
-              "ACCESS-ESM1-5",
-              "AWI-CM-1-1-MR",
-              "AWI-ESM-1-1-LR",
-              "BCC-CSM2-MR",
-              "BCC-ESM1",
-              "CAMS-CSM1-0",
-              "CanESM5",
-              "CAS-ESM2-0",
-              "CESM2-FV2",
-              "CESM2",
-              "CESM2-WACCM-FV2",
-              "CESM2-WACCM",
-              "CIESM",
-              "CMCC-CM2-SR5",
-              "EC-Earth3",
-              "EC-Earth3-Veg",
-              "EC-Earth3-Veg-LR",
-              "FGOALS-f3-L",
-              "FGOALS-g3",
-              "GFDL-ESM4",
-              "GISS-E2-1-G",
-              "GISS-E2-1-H",
-              "INM-CM4-8",
-              "INM-CM5-0",
-              "IPSL-CM6A-LR",
-              "KACE-1-0-G",
-              "MCM-UA-1-0",
-              "MIROC6",
-              "MPI-ESM-1-2-HAM",
-              "MPI-ESM1-2-HR",
-              "MPI-ESM1-2-LR",
-              "MRI-ESM2-0",
-              "NESM3",
-              "NorCPM1",
-              "NorESM2-LM",
-              "NorESM2-MM",
-              "SAM0-UNICON",
-              "TaiESM1",
-            ].map((item) => ({
-              label: item,
-              balue: item,
-            }))}
-          ></Select>
+            allowClear
+            options={options}
+          />
        </Form.Item>

        <Form.Item {...tailLayout}>
--- a/src/components/domain/Four/ChartPanel.jsx
+++ b/src/components/domain/Four/ChartPanel.jsx
@ -50,6 +50,9 @@ function ChartPanel() {
        onZero: false,
        symbol: ["none", "arrow"],
        symbolOffser: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
    },
    yAxis: {
@ -64,6 +67,9 @@ function ChartPanel() {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
      axisLabel: {
        show: true,
--- a/src/components/domain/Four/FormPanel.jsx
+++ b/src/components/domain/Four/FormPanel.jsx
@ -38,7 +38,6 @@ export default function FormPanel({ setShow }) {
          ],
        }}
        onFinish={(values) => {
-          console.log("Success:", values);
          setShow(true);
        }}
      >
--- a/src/components/domain/Four/index.jsx
+++ b/src/components/domain/Four/index.jsx
@ -30,7 +30,7 @@ XGBoos是基于梯度提升决策树方法的分类和回归模型。 LightGBM
        </div>
        <div className="bottom-panel">{show && <ChartPanel />}</div>
      </div>
-      <Legend />
+      {/* <Legend /> */}
      <RectangleLayer />
    </MapLayout>
  );
--- a/src/components/domain/One/ChartPanel.jsx
+++ b/src/components/domain/One/ChartPanel.jsx
@ -1,4 +1,7 @@
 import ReactECharts from "echarts-for-react";
+import cls from "classnames";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";

 const years = [];

@ -27,6 +30,20 @@ const laBrudata = [
 ];

 function ChartPanel() {
+  const [isHighlight, setIsHighlight] = useState(false);
+  const { showPanelHighlight } = useSelector((state) => state.data);
+
+  useEffect(() => {
+    if (showPanelHighlight) {
+      setIsHighlight(true);
+
+      setTimeout(() => {
+        setIsHighlight(false);
+      }, 3000);
+    }
+  }, [showPanelHighlight]);
+  console.log("showPanelHighlight :>> ", showPanelHighlight);
+
  const option = {
    title: {
      // text: "Stacked Line",
@ -60,6 +77,9 @@ function ChartPanel() {
        onZero: false,
        symbol: ["none", "arrow"],
        symbolOffser: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
    },
    yAxis: {
@ -74,6 +94,9 @@ function ChartPanel() {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
      axisLabel: {
        show: true,
@ -115,7 +138,7 @@ function ChartPanel() {
  };

  return (
-    <div className="chart-info-panel highlight">
+    <div className={cls("chart-info-panel", { highlight: isHighlight })}>
      <ReactECharts
        option={option}
        lazyUpdate={true}
--- a/src/components/domain/One/CustomFlyTo.jsx
+++ b/src/components/domain/One/CustomFlyTo.jsx
@ -31,7 +31,6 @@ function CustomFlyTo() {
        dispatch.data.updateImageLayer({
          labrador: true,
        });
-        dispatch.data.updateToolbar({ showPanel: true });
      },
    };

--- a/src/components/domain/One/LabradorImageLayer.jsx
+++ b/src/components/domain/One/LabradorImageLayer.jsx
@ -1,8 +1,8 @@
 import { useEffect, useMemo, useState } from "react";
 import { ImageryLayer, useCesium } from "resium";
-import { WebMapServiceImageryProvider } from "cesium";
+import { Cesium3DTile, WebMapServiceImageryProvider } from "cesium";
 import { useInterval } from "ahooks";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";

 const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";
 const nameList = [
@ -12,13 +12,12 @@ const nameList = [
 ].map((item) => "phitrellis:4_1_la_" + item);

 function LabradorImageLayer() {
+  const dispatch = useDispatch();
  const { viewer } = useCesium();
  const { imageLayer } = useSelector((state) => state.data);
  const [delay, setDelay] = useState(undefined);
  const [index, setIndex] = useState(0);

-  //viewer.clock?.shouldAnimate
-
  useEffect(() => {
    const { labrador } = imageLayer;
    if (!!labrador) {
@ -46,12 +45,16 @@ function LabradorImageLayer() {
        key={`ImageryLayer-${index}`}
        imageryProvider={tempProvider}
        show={true}
+        style={{ color: Cesium.Color.RED }}
      />
    );
  });

  useInterval(() => {
    setIndex((index) => index + 1);
+    if (index === 0) {
+      dispatch.data.update({ showPanelHighlight: true });
+    }

    if (index >= nameList.length) {
      setTimeout(() => {
@ -59,6 +62,7 @@ function LabradorImageLayer() {
        setDelay(1000);
      }, (60 - nameList.length) * 1000);
      setDelay(undefined);
+      dispatch.data.update({ showPanelHighlight: false });
    }
  }, delay);

--- a/src/components/domain/One/index.jsx
+++ b/src/components/domain/One/index.jsx
@ -41,7 +41,7 @@ export default function DomainOne() {
      <EntityLegend />
      <Legend />
      <LabradorImageLayer />
-      <TibetImageLayer />
+      {/* <TibetImageLayer /> */}
    </MapLayout>
  );
 }
--- a/src/components/domain/Three/ChartPanel.jsx
+++ b/src/components/domain/Three/ChartPanel.jsx
@ -105,6 +105,9 @@ function ChartPanel() {
        onZero: false,
        symbol: ["none", "arrow"],
        symbolOffser: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
    },
    yAxis: {
@ -119,6 +122,9 @@ function ChartPanel() {
        show: true,
        symbol: ["none", "arrow"],
        symbolOffset: [0, 10],
+        lineStyle: {
+          color: "#04fbfd",
+        },
      },
      axisLabel: {
        show: true,
--- a/src/components/domain/Three/CustomFlyTo.jsx
+++ b/src/components/domain/Three/CustomFlyTo.jsx
@ -1,11 +0,0 @@
-import { Cartesian3 } from "cesium";
-import { CameraFlyTo } from "resium";
-
-export default function CustomFlyTo() {
-  return (
-    <CameraFlyTo
-      duration={5}
-      destination={Cartesian3.fromDegrees(-38.0, 27, 16000000)}
-    />
-  );
-}
--- a/src/components/domain/Three/index.jsx
+++ b/src/components/domain/Three/index.jsx
@ -2,7 +2,6 @@ import MapLayout from "@/components/map/Layout";
 import CustomToolbar from "@/components/common/CustomToolbar";
 import CustomClock from "@/components/common/CustomClock";
 import TextInfoPanel from "@/components/common/TextInfoPanel";
-import CustomFlyTo from "./CustomFlyTo";
 import ChartPanel from "./ChartPanel";
 import LandImageLayer from "./LandImageLayer";
 import OceanImageLayer from "./OceanImageLayer";
@ -55,7 +54,7 @@ export default function DomainOne() {
          <div className="right-panel one">
            <ChartPanel />
          </div>
-          <WavePoint stationLon={88} stationLat={-85} />
+          <WavePoint stationLon={88} stationLat={33} />
        </MapLayout>
      </div>
    </div>
--- a/src/components/map/Layout/CustomFlyTo/AntarcticaFlytoQTP.jsx
+++ b/src/components/map/Layout/CustomFlyTo/AntarcticaFlytoQTP.jsx
@ -1,115 +0,0 @@
-import { useDispatch } from "react-redux";
-import { useCesium } from "resium";
-
-function AntarcticaFlytoQTP() {
-  const dispatch = useDispatch();
-  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 area1Options = {
-      destination: Cesium.Cartesian3.fromDegrees(-110, -60, 6000000),
-      duration: 5,
-      complete: function () {
-        setTimeout(function () {
-          camera.flyTo(area2Options);
-        }, 1000);
-      },
-    };
-
-    const area2Options = {
-      destination: Cesium.Cartesian3.fromDegrees(-30, -55, 6000000),
-      duration: 5,
-      complete: function () {
-        setTimeout(function () {
-          camera.flyTo(area3Options);
-        }, 1000);
-      },
-    };
-
-    const area3Options = {
-      destination: Cesium.Cartesian3.fromDegrees(30, -40, 6000000),
-      duration: 5,
-      complete: function () {
-        setTimeout(function () {
-          camera.flyTo(area4Options);
-        }, 1000);
-      },
-    };
-
-    const area4Options = {
-      destination: Cesium.Cartesian3.fromDegrees(65, -35, 6000000),
-      duration: 5,
-      complete: function () {
-        setTimeout(function () {
-          camera.flyTo(sideViewOptions);
-        }, 1000);
-      },
-    };
-
-    // 青藏高原
-    const plateauOptions = {
-      destination: Cesium.Cartesian3.fromDegrees(90, 20, 1600000),
-      duration: 5,
-      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(80, -60, 16000000),
-      // destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
-      duration: 5,
-      orientation: {
-        heading: Cesium.Math.toRadians(-10.0),
-        pitch: Cesium.Math.toRadians(-92),
-        roll: 6.0,
-      },
-      complete: () => {
-        viewer.clock.shouldAnimate = true;
-        dispatch.data.updateToolbar({ showPanel: true });
-        setTimeout(() => {
-          camera.flyTo({
-            duration: 5,
-            destination: Cesium.Cartesian3.fromDegrees(90, -12, 14000000),
-          });
-        }, 40 * 1000);
-      },
-    };
-
-    if (adjustPitch) {
-      antarcticalOptions.pitchAdjustHeight = 1000;
-      plateauOptions.pitchAdjustHeight = 1000;
-      sideViewOptions.pitchAdjustHeight = 1000;
-    }
-    camera.flyTo(antarcticalOptions);
-  }
-  cameraFlyToLine();
-  return <></>;
-}
-
-export default AntarcticaFlytoQTP;
--- a/src/components/map/Layout/CustomFlyTo/LabFlytoQTP.jsx
+++ b/src/components/map/Layout/CustomFlyTo/LabFlytoQTP.jsx
@ -1,81 +0,0 @@
-import { useDispatch } from "react-redux";
-import { Camera, useCesium } from "resium";
-
-function LabFlytoQTP() {
-  const { viewer } = useCesium();
-  const { camera } = viewer;
-  const dispatch = useDispatch();
-
-  function cameraFlyToLine(adjustPitch) {
-    // barotorpic
-    const barotorpic = {
-      destination: Cesium.Cartesian3.fromDegrees(42, 46, 15000000),
-      duration: 30,
-      complete: () => {},
-    };
-
-    // 俯视看箭头上升
-    const sideViewOptions = {
-      destination: Cesium.Cartesian3.fromDegrees(-50, 46, 2000000),
-      duration: 5,
-      orientation: {
-        heading: Cesium.Math.toRadians(-15.0),
-        pitch: -Cesium.Math.PI_OVER_FOUR,
-        roll: 0.0,
-      },
-      complete: () => {
-        viewer.clock.shouldAnimate = true;
-        setTimeout(function () {
-          camera.flyTo(barotorpic);
-        }, 1000);
-        dispatch.data.updateImageLayer({
-          labrador: true,
-        });
-        dispatch.data.updateToolbar({ showPanel: true });
-      },
-    };
-
-    // 青藏高原
-    const plateauOptions = {
-      destination: Cesium.Cartesian3.fromDegrees(90, 20, 1600000),
-      duration: 5,
-      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 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);
-      },
-    };
-
-    if (adjustPitch) {
-      plateauOptions.pitchAdjustHeight = 1000;
-      sideViewOptions.pitchAdjustHeight = 1000;
-    }
-    camera.flyTo(labrador);
-  }
-  cameraFlyToLine();
-
-  return <></>;
-}
-
-export default LabFlytoQTP;
--- a/src/components/map/Layout/CustomFlyTo/index.jsx
+++ b/src/components/map/Layout/CustomFlyTo/index.jsx
@ -1,35 +0,0 @@
-import { useParams } from "react-router-dom";
-import { CameraFlyTo } from "resium";
-import LabFlytoQTP from "./LabFlytoQTP";
-import AntarcticaFlytoQTP from "./AntarcticaFlytoQTP";
-
-function CustomFlyTo({}) {
-  const { type } = useParams();
-
-  switch (type) {
-    case "1":
-      return <LabFlytoQTP />;
-
-    case "2":
-      return <AntarcticaFlytoQTP />;
-
-    case "3":
-      // 大西洋
-      return (
-        <CameraFlyTo
-          duration={5}
-          destination={Cesium.Cartesian3.fromDegrees(-38.0, 27, 16000000)}
-        />
-      );
-    default:
-      // 青藏高原
-      return (
-        <CameraFlyTo
-          duration={5}
-          destination={Cesium.Cartesian3.fromDegrees(93, 30, 16000000)}
-        />
-      );
-  }
-}
-
-export default CustomFlyTo;
--- a/src/components/map/Layout/CustomToolbar.jsx
+++ b/src/components/map/Layout/CustomToolbar.jsx
@ -1,120 +0,0 @@
-import { useCallback, useState } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useNavigate } from "react-router-dom";
-import { useCesium } from "resium";
-import { Select } from "antd";
-import styles from "./index.module.less";
-
-function CustomToolbar() {
-  const { viewer } = useCesium();
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
-
-  const { toolbar } = useSelector((state) => state.data);
-  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 });
-    dispatch.data.resetState();
-  }, [navigate, dispatch]);
-
-  const showPanelHandler = useCallback(
-    (value) => {
-      dispatch.data.updateToolbar({
-        showPanel: value,
-      });
-    },
-    [dispatch]
-  );
-
-  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: "跟随视角",
-          },
-        ]}
-      /> */}
-      <Select
-        onChange={showPanelHandler}
-        value={!!toolbar.showPanel}
-        getPopupContainer={(node) => node}
-        options={[
-          {
-            value: true,
-            label: "开启展板",
-          },
-          {
-            value: false,
-            label: "关闭展板",
-          },
-        ]}
-      />
-    </div>
-  );
-}
-
-export default CustomToolbar;
--- a/src/components/map/Layout/Entities/Point/PathAntarcticaToQTP.jsx
+++ b/src/components/map/Layout/Entities/Point/PathAntarcticaToQTP.jsx
@ -1,93 +0,0 @@
-import { useState } from "react";
-import { Entity, PointGraphics, useCesium } from "resium";
-import { useInterval } from "ahooks";
-
-// 从南极到青藏高原
-const dataAntarcticaToQTP = [
-  { longitude: -110, latitude: -60, height: 0, time: 0 },
-  { longitude: -110, latitude: -60, height: 1000000, time: 10 },
-  { longitude: -30, latitude: -55, height: 1000000, time: 20 },
-  { longitude: 30, latitude: -40, height: 1000000, time: 30 },
-  { longitude: 65, latitude: -35, height: 1000000, time: 40 },
-  { longitude: 95, latitude: -30, height: 1000000, time: 50 },
-  { longitude: 95, latitude: -30, height: 0, time: 60 },
-];
-
-function PathAntarcticaToQTP() {
-  const { viewer } = useCesium();
-
-  const [delay, setDelay] = useState(1000);
-
-  const start = viewer.clock.startTime;
-  const stop = viewer.clock.stopTime;
-
-  const pathMaterial = new Cesium.Color(4 / 255, 251 / 255, 253 / 255);
-
-  useInterval(() => {
-    if (viewer.clock?.shouldAnimate) setDelay(undefined);
-  }, delay);
-
-  /**
-   * 计算飞行路径
-   * 数据坐标
-   * {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);
-    }
-    property.setInterpolationOptions({
-      interpolationDegree: 1,
-      interpolationAlgorithm: Cesium.LinearApproximation,
-    });
-    return property;
-  }
-
-  const property = createProperty(dataAntarcticaToQTP);
-
-  return (
-    <Entity
-      id={"point"}
-      position={property}
-      availability={
-        new Cesium.TimeIntervalCollection([
-          new Cesium.TimeInterval({
-            start,
-            stop,
-          }),
-        ])
-      }
-      orientation={new Cesium.VelocityOrientationProperty(property)}
-      path={{
-        resolution: 1,
-        material: pathMaterial,
-        // 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}
-      />
-    </Entity>
-  );
-}
-
-export default PathAntarcticaToQTP;
--- a/src/components/map/Layout/Entities/Point/PathLabToQTP.jsx
+++ b/src/components/map/Layout/Entities/Point/PathLabToQTP.jsx
@ -1,94 +0,0 @@
-import { useState } from "react";
-import { Entity, PointGraphics, useCesium } from "resium";
-import { useInterval } from "ahooks";
-
-// 从拉布拉多海到青藏高原
-const dataLabToQTP = [
-  { longitude: -55, latitude: 58, height: 1000000, time: 10 },
-  { longitude: -32, latitude: 72.2, height: 1000000, time: 20 },
-  { longitude: 20, latitude: 77, height: 1000000, time: 30 },
-  { longitude: 63, latitude: 69.9, height: 1000000, time: 40 },
-  { longitude: 88, latitude: 60, height: 1000000, time: 50 },
-];
-
-function PathLabToQTP() {
-  const { viewer } = useCesium();
-  const [delay, setDelay] = useState(1000);
-
-  const start = viewer.clock.startTime;
-  const stop = viewer.clock.stopTime;
-
-  const pathMaterial = new Cesium.PolylineDashMaterialProperty({
-    dashLength: 20,
-    color: new Cesium.Color(4 / 255, 251 / 255, 253 / 255),
-  });
-
-  useInterval(() => {
-    if (viewer.clock?.shouldAnimate) setDelay(undefined);
-  }, delay);
-
-  /**
-   * 计算飞行路径
-   * 数据坐标
-   * {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);
-    }
-    property.setInterpolationOptions({
-      interpolationDegree: 10,
-      interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
-    });
-
-    return property;
-  }
-
-  const property = createProperty(dataLabToQTP);
-
-  return (
-    <Entity
-      id={"point"}
-      position={property}
-      availability={
-        new Cesium.TimeIntervalCollection([
-          new Cesium.TimeInterval({
-            start: start,
-            stop: stop,
-          }),
-        ])
-      }
-      orientation={new Cesium.VelocityOrientationProperty(property)}
-      path={{
-        resolution: 1,
-        material: pathMaterial,
-        // 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}
-      />
-    </Entity>
-  );
-}
-
-export default PathLabToQTP;
--- a/src/components/map/Layout/Entities/Point/Point.jsx
+++ b/src/components/map/Layout/Entities/Point/Point.jsx
@ -1,89 +0,0 @@
-import { Entity, PointGraphics, useCesium } from "resium";
-
-function Point({ data, isCurves, pathColor, pathType = "default" }) {
-  const { viewer } = useCesium();
-
-  const start = viewer.clock.startTime;
-  const stop = viewer.clock.stopTime;
-
-  const pathMaterial =
-    pathType === "dash"
-      ? new Cesium.PolylineDashMaterialProperty({
-          dashLength: 20,
-          color: pathColor || new Cesium.Color(4 / 255, 251 / 255, 253 / 255),
-        })
-      : pathColor || new Cesium.Color(4 / 255, 251 / 255, 253 / 255);
-
-  console.log("pathMaterial :>> ", pathMaterial);
-
-  /**
-   * 计算飞行路径
-   * 数据坐标
-   * {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: isCurves ? 10 : 1,
-    interpolationAlgorithm: isCurves
-      ? Cesium.LagrangePolynomialApproximation
-      : Cesium.LinearApproximation,
-  });
-  // property.setInterpolationOptions({
-  //   interpolationDegree: 1,
-  //   interpolationAlgorithm: Cesium.LinearApproximation,
-  // });
-
-  return (
-    <Entity
-      id={"point-4-2"}
-      position={property}
-      availability={
-        new Cesium.TimeIntervalCollection([
-          new Cesium.TimeInterval({
-            start: start,
-            stop: stop,
-          }),
-        ])
-      }
-      orientation={new Cesium.VelocityOrientationProperty(property)}
-      path={{
-        resolution: 1,
-        material: pathMaterial,
-        // 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}
-      />
-    </Entity>
-  );
-}
-
-export default Point;
--- a/src/components/map/Layout/Entities/Point/index.jsx
+++ b/src/components/map/Layout/Entities/Point/index.jsx
@ -1,17 +0,0 @@
-import { useParams } from "react-router-dom";
-import PathLabToQTP from "./PathLabToQTP";
-import PathAntarcticaToQTP from "./PathAntarcticaToQTP";
-
-function PointLayout() {
-  const { type } = useParams();
-
-  return type === "1" ? (
-    <PathLabToQTP />
-  ) : type === "2" ? (
-    <PathAntarcticaToQTP />
-  ) : (
-    <></>
-  );
-}
-
-export default PointLayout;
--- a/src/components/map/Layout/Entities/WavePoint/Wavepoint.jsx
+++ b/src/components/map/Layout/Entities/WavePoint/Wavepoint.jsx
@ -1,128 +0,0 @@
-import { Fragment } from "react";
-import { Entity, EllipseGraphics } from "resium";
-import wave from "@/assets/wave.png";
-
-function WavePoint({
-  stationLon,
-  stationLat,
-  value = 360,
-  deviationR = 5000,
-  eachInterval = 1500,
-  maxR = 3600 * 100,
-}) {
-  const data = {
-    stationLon, // 经度
-    stationLat, // 纬度
-    value, // 传感器的大小
-    deviationR, // 差值 差值越大 速度越快
-    eachInterval, // 两个圈的时间间隔
-    imageUrl: wave,
-    maxR,
-  };
-
-  var r1 = 0,
-    r2 = 0;
-  var r3 = 0,
-    r4 = 0;
-  function changeOne() {
-    r1 = r1 + data.deviationR;
-    if (r1 >= data.maxR) {
-      r1 = 0;
-    }
-    return r1;
-  }
-  function changeR2() {
-    r2 = r2 + data.deviationR;
-    if (r2 >= data.maxR) {
-      r2 = 0;
-    }
-    return r2;
-  }
-
-  const point1 = (
-    <Entity
-      id={`wave-point-1-${stationLon}-${stationLat}`}
-      position={Cesium.Cartesian3.fromDegrees(
-        data.stationLon,
-        data.stationLat,
-        0
-      )}
-      show={true}
-    >
-      <EllipseGraphics
-        semiMinorAxis={new Cesium.CallbackProperty(changeOne, false)}
-        semiMajorAxis={new Cesium.CallbackProperty(changeR2, false)}
-        height={10}
-        material={
-          new Cesium.ImageMaterialProperty({
-            image: data.imageUrl,
-            repeat: Cesium.Cartesian2(1.0, 1.0),
-            transparent: true,
-            color: new Cesium.CallbackProperty(function () {
-              var alp = 1 - r1 / data.maxR;
-              return Cesium.Color.WHITE.withAlpha(alp);
-            }, false),
-          })
-        }
-      />
-    </Entity>
-  );
-
-  let point2;
-
-  //第二个圆开始跑
-  setTimeout(function () {
-    function changeTwo() {
-      r3 = r3 + data.deviationR;
-      if (r3 >= data.maxR) {
-        r3 = 0;
-      }
-      return r3;
-    }
-    function changeR12() {
-      r4 = r4 + data.deviationR;
-      if (r4 >= data.maxR) {
-        r4 = 0;
-      }
-      return r4;
-    }
-    point2 = (
-      <Entity
-        position={Cesium.Cartesian3.fromDegrees(
-          data.stationLon,
-          data.stationLat,
-          0
-        )}
-        show={true}
-        id={`wave-point-2-${stationLon}-${stationLat}`}
-      >
-        <EllipseGraphics
-          semiMinorAxis={new Cesium.CallbackProperty(changeTwo, false)}
-          semiMajorAxis={new Cesium.CallbackProperty(changeR12, false)}
-          height={10}
-          material={
-            new Cesium.ImageMaterialProperty({
-              image: data.imageUrl,
-              repeat: Cesium.Cartesian2(1.0, 1.0),
-              transparent: true,
-              color: new Cesium.CallbackProperty(function () {
-                var alp = 1 - r1 / data.maxR;
-                return Cesium.Color.WHITE.withAlpha(alp);
-                //entity的颜色透明 并不影响材质，并且 entity也会透明
-              }, false),
-            })
-          }
-        />
-      </Entity>
-    );
-  }, data.eachInterval);
-
-  return (
-    <Fragment>
-      {point1}
-      {point2}
-    </Fragment>
-  );
-}
-
-export default WavePoint;
--- a/src/components/map/Layout/Entities/WavePoint/index.jsx
+++ b/src/components/map/Layout/Entities/WavePoint/index.jsx
@ -1,27 +0,0 @@
-import { Fragment } from "react";
-import { useParams } from "react-router-dom";
-import Wavepoint from "./Wavepoint";
-
-function WavePoint() {
-  const { type } = useParams();
-
-  // 拉布拉多 青藏高原
-  if (type === "1")
-    return (
-      <Fragment>
-        <Wavepoint stationLon={-55} stationLat={58} />
-        <Wavepoint stationLon={88} stationLat={32.5} />
-      </Fragment>
-    );
-  // 南极 青藏高原
-  else if (type === "2")
-    return (
-      <Fragment>
-        <Wavepoint stationLon={88} stationLat={-85} />
-        <Wavepoint stationLon={88} stationLat={32.5} />
-      </Fragment>
-    );
-  else return <></>;
-}
-
-export default WavePoint;
--- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx
+++ b/src/components/map/Layout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx
@ -1,131 +0,0 @@
-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: years.length * 1000,
-    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;
--- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx
+++ b/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx
@ -1,115 +0,0 @@
-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: years.length * 1000,
-    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;
--- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx
+++ b/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx
@ -1,184 +0,0 @@
-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: years.length * 500,
-    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;
--- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/index.jsx
+++ b/src/components/map/Layout/InfoLayout/ChartInfoPanel/index.jsx
@ -1,18 +0,0 @@
-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:
-      return <></>;
-  }
-}
-
-export default ChartInfoPanel;
--- a/src/components/map/Layout/InfoLayout/TextInfoPanel/index.jsx
+++ b/src/components/map/Layout/InfoLayout/TextInfoPanel/index.jsx
@ -1,50 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { useSelector } from "react-redux";
-import { Scrollbars } from "react-custom-scrollbars-2";
-import { useInterval } from "ahooks";
-
-let index = 0;
-function TextInfoPanel({ title, content }) {
-  const showNumberPerTimes = 1;
-  const { toolbar } = useSelector((state) => state.data);
-
-  const [delay, setDelay] = useState(80);
-  const [contentText, setContentText] = useState("");
-
-  useEffect(() => {
-    index = 0;
-  }, [toolbar]);
-
-  const showContent = useCallback(() => {
-    const isFinished = contentText.length >= content.length;
-    if (!isFinished) {
-      setContentText((text) => {
-        index += showNumberPerTimes;
-        return text + content[index - 1];
-      });
-    } else setDelay(undefined);
-  }, [contentText]);
-
-  useInterval(showContent, delay);
-
-  const stopHandler = useCallback(() => {
-    setDelay(undefined);
-    index = 0;
-    setContentText(content);
-  }, []);
-
-  return (
-    <div className="textInfoPanel" onDoubleClick={stopHandler}>
-      <div className="title" title={title}>
-        {title}
-      </div>
-      <div className="content">
-        <Scrollbars autoHide autoHideTimeout={1000} autoHideDuration={400}>
-          {contentText}
-        </Scrollbars>
-      </div>
-    </div>
-  );
-}
-
-export default TextInfoPanel;
--- a/src/components/map/Layout/Legends/Legend41.jsx
+++ b/src/components/map/Layout/Legends/Legend41.jsx
@ -1,70 +0,0 @@
-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 LegendLab() {
-  return (
-    <div className={styles.legend}>
-      <div className="legend-title">拉布拉多海海表温度夏季年代际异常值</div>
-      <div className="colorbar">
-        {colorBar.map((color, index) => {
-          return (
-            <div
-              key={`colorbar-item-${index}`}
-              className="colorbar-item"
-              style={{ backgroundColor: color }}
-              title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
-                -3.2 +
-                (index + 1) * 0.2
-              ).toFixed(1)}`}
-            />
-          );
-        })}
-      </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 LegendLab;
--- a/src/components/map/Layout/Legends/Legend42.jsx
+++ b/src/components/map/Layout/Legends/Legend42.jsx
@ -1,105 +0,0 @@
-import { useSelector } from "react-redux";
-import styles from "./index.module.less";
-
-const colorBar = [
-  "#ffc53d",
-  "#ffd666",
-  "#ffe58f",
-  "#fff1b8",
-  "#fffbe6",
-  "#e6f7ff",
-  "#bae7ff",
-  "#91d5ff",
-  "#69c0ff",
-  "#40a9ff",
-];
-
-const colorBar2 = [
-  "#73d13d",
-  "#95de64",
-  "#b7eb8f",
-  "#d9f7be",
-  "#f6ffed",
-  "#fff1f0",
-  "#ffccc7",
-  "#ffa39e",
-  "#ff7875",
-  "#ff4d4f",
-];
-
-function Legend42() {
-  return (
-    <div>
-      <div className={styles.verticalLegend} style={{ bottom: 476 }}>
-        <div className="legend-title">青藏高原感热通量</div>
-        <div style={{ flex: 1, width: "100%", display: "flex", gap: 8 }}>
-          <div className="legend-text">
-            {[-0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5].map(
-              (item, index) => {
-                return (
-                  <div
-                    key={`legend-text-item-${index}`}
-                    className="legend-text-item"
-                  >
-                    {item}
-                  </div>
-                );
-              }
-            )}
-          </div>
-          <div className="colorbar">
-            {colorBar2.map((color, index) => {
-              return (
-                <div
-                  key={`colorbar-item-${index}`}
-                  className="colorbar-item"
-                  style={{ backgroundColor: color }}
-                  title={`${(-0.5 + index * 0.1).toFixed(1)}~${(
-                    -0.5 +
-                    (index + 1) * 0.1
-                  ).toFixed(1)}`}
-                />
-              );
-            })}
-          </div>
-        </div>
-      </div>
-      <div className={styles.verticalLegend}>
-        <div className="legend-title">青藏高原降水量</div>
-        <div style={{ flex: 1, width: "100%", display: "flex", gap: 8 }}>
-          <div className="legend-text">
-            {[-0.5, -0.4, -0.3, -0.2, -0.1, 0, 0.1, 0.2, 0.3, 0.4, 0.5].map(
-              (item, index) => {
-                return (
-                  <div
-                    key={`legend-text-item-${index}`}
-                    className="legend-text-item"
-                  >
-                    {item}
-                  </div>
-                );
-              }
-            )}
-          </div>
-          <div className="colorbar">
-            {colorBar.map((color, index) => {
-              return (
-                <div
-                  key={`colorbar-item-${index}`}
-                  className="colorbar-item"
-                  style={{ backgroundColor: color }}
-                  title={`${(-0.5 + index * 0.1).toFixed(1)}~${(
-                    -0.5 +
-                    (index + 1) * 0.1
-                  ).toFixed(1)}`}
-                />
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default Legend42;
--- a/src/components/map/Layout/Legends/Legend45.jsx
+++ b/src/components/map/Layout/Legends/Legend45.jsx
@ -1,64 +0,0 @@
-import styles from "./index.module.less";
-
-// 4.5 三极联动影响东亚夏季风
-const colorBar45 = [
-  "#7272ff",
-  "#8585ff",
-  "#fff",
-  "#ffafaf",
-  "#ff9c9c",
-  "#ff8787",
-  "#ff7474",
-  "#ff6060",
-  "#ff4b4b",
-  "#ff3838",
-  "#ff2323",
-];
-
-const legendText45 = [
-  -0.02,
-  -0.01,
-  0.01,
-  0.02,
-  0.03,
-  0.05,
-  0.1,
-  0.15,
-  0.2,
-  0.25,
-  "",
-];
-
-function Legend45() {
-  return (
-    <div className={styles.legend}>
-      <div className="legend-title">三极联动影响东亚夏季风</div>
-      <div className="colorbar">
-        {colorBar45.map((color, index) => {
-          return (
-            <div
-              key={`colorbar-item-${index}`}
-              className="colorbar-item"
-              style={{ backgroundColor: color }}
-              title={`${(-3.2 + index * 0.2).toFixed(1)}~${(
-                -3.2 +
-                (index + 1) * 0.2
-              ).toFixed(1)}`}
-            />
-          );
-        })}
-      </div>
-      <div className="legend-text">
-        {legendText45.map((item, index) => {
-          return (
-            <div key={`legend-text-item-${index}`} className="legend-text-item">
-              {item}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export default Legend45;
--- a/src/components/map/Layout/Legends/index.jsx
+++ b/src/components/map/Layout/Legends/index.jsx
@ -1,19 +0,0 @@
-import { useParams } from "react-router-dom";
-import Legend41 from "./Legend41";
-import Legend42 from "./Legend42";
-import Legend45 from "./Legend45";
-import { useSelector } from "react-redux";
-
-function Legends() {
-  const { type } = useParams();
-  const { toolbar } = useSelector((state) => state.data);
-
-  if (!toolbar.showPanel) return <></>;
-
-  if (type === "1") return <Legend41 />;
-  if (type === "2") return <Legend42 />;
-  else if (type === "5") return <Legend45 />;
-  else return <></>;
-}
-
-export default Legends;
--- a/src/components/map/Layout/Legends/index.module.less
+++ b/src/components/map/Layout/Legends/index.module.less
@ -1,109 +0,0 @@
-.legend :global {
-  position: absolute;
-  bottom: 40px;
-  width: 50%;
-  left: 25%;
-  // height: 40px;
-
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background-color: #1f485690;
-  border: 1px solid #04fbfd;
-  border-radius: 8px;
-  padding: 8px;
-
-  .legend-title {
-    color: #04fbfd;
-  }
-
-  .colorbar {
-    width: 100%;
-    height: 14px;
-    display: flex;
-    margin: 8px 0;
-
-    .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: 100%;
-    height: 20px;
-    margin-left: 8px;
-
-    .legend-text-item {
-      flex: 1;
-      text-align: right;
-      font-weight: 600;
-      color: white;
-      -webkit-text-stroke: #04fbfd 1px;
-    }
-  }
-}
-
-.verticalLegend :global {
-  position: absolute;
-  bottom: 168px;
-  right: 0;
-  height: 300px;
-  width: 130px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  background-color: #1f485690;
-  border: 1px solid #04fbfd;
-  border-radius: 8px;
-  padding: 8px;
-
-  .legend-title {
-    color: #04fbfd;
-  }
-
-  .colorbar {
-    width: 100px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-
-    .colorbar-item {
-      flex: 1;
-      border: 2px black solid;
-      border-left: none;
-      border-right: none;
-      height: 25px;
-      width: 25px;
-
-      &:not(:nth-child(1)) {
-        border-top: none;
-      }
-    }
-  }
-
-  .legend-text {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    width: 100%;
-
-    .legend-text-item {
-      flex: 1;
-      text-align: right;
-      font-weight: 600;
-      color: white;
-      -webkit-text-stroke: #04fbfd 1px;
-    }
-  }
-}
--- a/src/components/map/Layout/Picker.jsx
+++ b/src/components/map/Layout/Picker.jsx
@ -20,18 +20,12 @@ function Picker() {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const longitudeString = Cesium.Math.toDegrees(
        cartographic.longitude
-      ).toFixed(2);
+      ).toFixed(4);
      const latitudeString = Cesium.Math.toDegrees(
        cartographic.latitude
-      ).toFixed(2);
+      ).toFixed(4);
      setLon(longitudeString);
      setLat(latitudeString);
-      // console.log("longitudeString, :>> ", longitudeString, latitudeString);
-      //   entity.position = cartesian;
-      //   entity.label.show = true;
-      //   entity.label.text =
-      //     `Lon: ${`   ${longitudeString}`.slice(-7)}\u00B0` +
-      //     `\nLat: ${`   ${latitudeString}`.slice(-7)}\u00B0`;
    } else {
      //   entity.label.show = false;
    }
@ -42,8 +36,8 @@ function Picker() {
      className="picker"
      style={{ color: "white", position: "absolute", top: 0, right: 0 }}
    >
-      <p>
-        longitudeString, latitudeString {lon}, {lat}
+      <p style={{ fontFamily: "cursive" }}>
+        经度：{lon}°；纬度：{lat}°；
      </p>
    </div>
  );
--- a/src/components/map/Layout/index
+++ b/src/components/map/Layout/index
@ -1,56 +0,0 @@
-import { Viewer } from "resium";
-import CustomClock from "./CustomClock";
-import CustomFlyTo from "./CustomFlyTo";
-import CustomToolbar from "./CustomToolbar";
-import InfoLayout from "./InfoLayout";
-import Picker from "./Picker";
-import Legend from "./Legends";
-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 DynamicImageryLayer from "./DynamicImageryLayer";
-import Circles from "./Entities/Circles";
-import Site from "./Entities/Site";
-import styles from "./index.module.less";
-
-function MapLayout() {
-  return (
-    <Viewer
-      className={styles.cesiumContainer}
-      full
-      homeButton={false}
-      sceneModePicker={false}
-      navigationHelpButton={false}
-      shouldAnimate={false}
-      // infoBox={false}
-      timeline={false}
-      fullscreenButton={false}
-      geocoder={false}
-      baseLayerPicker={false}
-      animation={false}
-    >
-      <CustomClock />
-      <CustomFlyTo />
-      <CustomToolbar />
-      <Point />
-      <PlateauPolygon />
-      <InfoLayout />
-      <Cyclone />
-      <Barotropic />
-      {/* <Watervapor /> */}
-      <WavePoint />
-      <Updraft />
-      <Picker />
-      <Legend />
-      <DynamicImageryLayer />
-      <Circles />
-      <Site />
-    </Viewer>
-  );
-}
-
-export default MapLayout;
--- a/src/components/map/Layout/index.module.less
+++ b/src/components/map/Layout/index.module.less
@ -157,6 +157,26 @@
          color: white;
        }
      }
+
+      .ant-form-item-control {
+        .ant-select-multiple {
+          max-height: 300px;
+          overflow-y: scroll;
+
+          &::-webkit-scrollbar {
+            width: 6px;
+            height: 1px;
+          }
+          &::-webkit-scrollbar-thumb {
+            border-radius: 6px;
+            background: #04fbfd;
+          }
+          &::-webkit-scrollbar-track {
+            border-radius: 6px;
+            background: none;
+          }
+        }
+      }
    }

    .chart-info-panel {
--- a/src/models/data.js
+++ b/src/models/data.js
@ -1,9 +1,8 @@
 export const data = {
  state: {
    showSite: false,
-    toolbar: {
-      showPanel: undefined,
-    },
+    showPanelHighlight: false,
+    toolbar: {},
    imageLayer: {
      labrador: undefined,
      indianOcean: undefined,
--- a/yarn.lock
+++ b/yarn.lock
@ -5462,6 +5462,7 @@ __metadata:
    ahooks: ^3.7.8
    antd: 4.24.9
    cesium: ^1.108.0
+    classnames: ^2.3.2
    craco-cesium: ^1.2.0
    craco-less: ^3.0.1
    echarts: ^5.0.2