diff --git a/src/App.js b/src/App.js
index 4fd10ca..59a2029 100644
--- a/src/App.js
+++ b/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() {
}>
}>
}>
+ }>
} />
);
diff --git a/src/components/domain/Four/ChartPanel.jsx b/src/components/domain/Four/ChartPanel.jsx
new file mode 100644
index 0000000..4197b77
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default ChartPanel;
diff --git a/src/components/domain/Four/CustomFlyTo.jsx b/src/components/domain/Four/CustomFlyTo.jsx
new file mode 100644
index 0000000..9b37ed6
--- /dev/null
+++ b/src/components/domain/Four/CustomFlyTo.jsx
@@ -0,0 +1,11 @@
+import { Cartesian3 } from "cesium";
+import { CameraFlyTo } from "resium";
+
+export default function CustomFlyTo() {
+ return (
+
+ );
+}
diff --git a/src/components/domain/Four/FormPanel.jsx b/src/components/domain/Four/FormPanel.jsx
new file mode 100644
index 0000000..cf066d2
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
diff --git a/src/components/domain/Four/RectangleLayer.jsx b/src/components/domain/Four/RectangleLayer.jsx
new file mode 100644
index 0000000..deb8e62
--- /dev/null
+++ b/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) => (
+
+
+
+ ));
+}
diff --git a/src/components/domain/Four/index.jsx b/src/components/domain/Four/index.jsx
new file mode 100644
index 0000000..00d65a7
--- /dev/null
+++ b/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 (
+
+ 三极联动影响青藏高原上层温度
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less
index c6622f7..6c6114e 100644
--- a/src/components/map/Layout/index.module.less
+++ b/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%;