refactor

src/App.js

@@ -3,6 +3,7 @@ import HomeLayout from "@/components/home/Layout";
 import DomainOne from "@/components/domain/One";
 import DomainTwo from "@/components/domain/Two";
 import DomainThree from "@/components/domain/Three";
+import DomainFour from "@/components/domain/Four";
 import "./App.less";
 
 function App() {
@@ -12,6 +13,7 @@ function App() {
       <Route path="map/1" element={<DomainOne />}></Route>
       <Route path="map/2" element={<DomainTwo />}></Route>
       <Route path="map/3" element={<DomainThree />}></Route>
+      <Route path="map/4" element={<DomainFour />}></Route>
       <Route path="*" element={<Navigate to={"/"} replace={true} />} />
     </Routes>
   );

src/components/domain/Four/ChartPanel.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 ChartPanel() {
+  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="chart-info-panel">
+      <ReactECharts
+        option={option}
+        lazyUpdate={true}
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      />
+    </div>
+  );
+}
+
+export default ChartPanel;

src/components/domain/Four/CustomFlyTo.jsx

@@ -0,0 +1,11 @@
+import { Cartesian3 } from "cesium";
+import { CameraFlyTo } from "resium";
+
+export default function CustomFlyTo() {
+  return (
+    <CameraFlyTo
+      duration={5}
+      destination={Cartesian3.fromDegrees(93, 30, 16000000)}
+    />
+  );
+}

src/components/domain/Four/FormPanel.jsx

@@ -0,0 +1,59 @@
+import { Button, Form, Input, Select } from "antd";
+
+const layout = {
+  labelCol: { span: 8 },
+  wrapperCol: { span: 16 },
+};
+const tailLayout = {
+  wrapperCol: { offset: 8, span: 16 },
+};
+
+export default function FormPanel() {
+  const [form] = Form.useForm();
+
+  return (
+    <div className="form-panel">
+      <Form
+        {...layout}
+        form={form}
+        name="control-hooks"
+        initialValues={{
+          sic: "sic_s",
+        }}
+      >
+        <Form.Item name="sic" label="海冰密集度" rules={[{ required: true }]}>
+          <Select placeholder="请选择海冰密集度区域" mode="multiple">
+            <Option value="sic_s">南极附近海冰</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="sce" label="积雪范围" rules={[{ required: true }]}>
+          <Select placeholder="请选择积雪范围" mode="multiple">
+            <Option value="sc_ea">欧亚大陆积雪异常</Option>
+            <Option value="sc_tp">青藏高原积雪异常</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item name="st" label="地表温度范围" rules={[{ required: true }]}>
+          <Select placeholder="请选地表温度范围" mode="multiple">
+            <Option value="ts_1">ts_1</Option>
+            <Option value="ts_2">ts_2</Option>
+            <Option value="ts_3">ts_3</Option>
+            <Option value="ts_4">ts_4</Option>
+            <Option value="ts_5">ts_5</Option>
+            <Option value="ts_6">ts_6</Option>
+            <Option value="ts_7">ts_7</Option>
+            <Option value="ts_8">ts_8</Option>
+            <Option value="ts_9">ts_9</Option>
+            <Option value="ts_10">ts_10</Option>
+            <Option value="ts_11">ts_11</Option>
+            <Option value="ts_12">ts_12</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item {...tailLayout}>
+          <Button type="primary" htmlType="submit">
+            提交
+          </Button>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}

src/components/domain/Four/RectangleLayer.jsx

@@ -0,0 +1,38 @@
+import { Cartesian3, Rectangle, Color, Math as CesiumMath } from "cesium";
+import { Entity, RectangleGraphics } from "resium";
+const points = [
+  [13, -70, 30, -67],
+  [93, 29, 99, 35],
+  [68, 48, 76, 52],
+  [150, 60, 160, 70],
+  [130, 20, 140, 28],
+  [150, 12, 175, 22],
+  [-110, 20, -95, 35],
+  [10, -12, 45, -2],
+  [80, 10, 110, 20],
+  [-150, -10, -40, 5],
+  [65, -62, 90, -57],
+  [145, -30, 155, -20],
+  [165, -45, 180, -30],
+  [-140, -60, -110, -45],
+  [-70, -78, -50, -70],
+];
+export default function RectangleLayer() {
+  return points.map((p, i) => (
+    <Entity
+      key={`rectangle-${i}`}
+      name="RectangleGraphics"
+      description="RectangleGraphics!!"
+    >
+      <RectangleGraphics
+        coordinates={Rectangle.fromDegrees(...p)}
+        material={Color.PEACHPUFF.withAlpha(0.3)}
+        rotation={CesiumMath.toRadians(45)}
+        extrudedHeight={0}
+        height={0}
+        outline // height must be set for outline to display
+        outlineColor={Color.YELLOW}
+      />
+    </Entity>
+  ));
+}

src/components/domain/Four/index.jsx

@@ -0,0 +1,31 @@
+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 FormPanel from "./FormPanel";
+import ChartPanel from "./ChartPanel";
+import RectangleLayer from "./RectangleLayer";
+
+export default function DomainFour() {
+  return (
+    <MapLayout>
+      <div className="title">三极联动影响青藏高原上层温度</div>
+      <CustomToolbar />
+      <CustomClock />
+      <CustomFlyTo />
+      <div className="left-panel one">
+        <TextInfoPanel content="利用ERA5再分析数据，通过XGBoost和Light" />
+      </div>
+      <div className="right-panel">
+        <div className="top-panel">
+          <FormPanel />
+        </div>
+        <div className="bottom-panel">
+          <ChartPanel />
+        </div>
+      </div>
+      <RectangleLayer />
+    </MapLayout>
+  );
+}

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

@@ -132,6 +132,7 @@
     width: 450px;
     display: flex;
     flex-direction: column;
+    gap: 12px;
 
     .top-panel {
       flex: 1;
@@ -141,6 +142,16 @@
       flex: 1;
     }
 
+    .form-panel {
+      width: 100%;
+      height: 100%;
+      pointer-events: auto;
+      padding: 12px;
+      border: 1px solid #04fbfd;
+      color: #02f9ff !important;
+      background-color: #1f485690;
+    }
+
     .chart-info-panel {
       width: 100%;
       height: 100%;