From 4d6495491942b4709718a42047f79993e4c84b03 Mon Sep 17 00:00:00 2001
From: Aifeilong <2993607249@qq.com>
Date: Thu, 14 Sep 2023 09:48:22 +0800
Subject: [PATCH] fix
---
.pnp.cjs | 71 ++++++
package.json | 3 +
src/components/HomeLayout/NavBar.jsx | 2 +
src/components/HomeLayout/index.module.less | 12 +-
src/components/PolygonLayout/Barotorpic.jsx | 30 +++
.../PolygonLayout/CustomFlyTo copy.jsx | 60 +++++
src/components/PolygonLayout/CustomFlyTo.jsx | 38 +--
.../PolygonLayout/CustomToolbar.jsx | 92 ++++++++
src/components/PolygonLayout/Cyclone.jsx | 21 ++
.../InfoLayout/ChartInfoPanel/SstAnnomary.jsx | 131 +++++++++++
.../InfoLayout/ChartInfoPanel/TPTT.jsx | 115 +++++++++
.../ChartInfoPanel/TripolarTemperature.jsx | 184 +++++++++++++++
.../InfoLayout/ChartInfoPanel/index.jsx | 18 ++
.../InfoLayout/TextInfoPanel/First.jsx | 0
.../InfoLayout/TextInfoPanel/Second.jsx | 0
.../InfoLayout/TextInfoPanel/Third.jsx | 0
.../InfoLayout/TextInfoPanel/index.jsx | 5 +
.../PolygonLayout/InfoLayout/index.jsx | 14 ++
.../InfoLayout/index.module.less | 52 ++++
.../PolygonLayout/PlateauPolygon.jsx | 2 +-
src/components/PolygonLayout/Point copy.jsx | 132 +++++++++++
src/components/PolygonLayout/Point.jsx | 222 +++++++-----------
src/components/PolygonLayout/Udraft.jsx | 18 ++
src/components/PolygonLayout/Watervapor.jsx | 33 +++
src/components/PolygonLayout/WavePoint.jsx | 2 +
src/components/PolygonLayout/index.jsx | 33 ++-
.../PolygonLayout/index.module.less | 2 +
yarn.lock | 51 +++-
28 files changed, 1173 insertions(+), 170 deletions(-)
create mode 100644 src/components/PolygonLayout/Barotorpic.jsx
create mode 100644 src/components/PolygonLayout/CustomFlyTo copy.jsx
create mode 100644 src/components/PolygonLayout/CustomToolbar.jsx
create mode 100644 src/components/PolygonLayout/Cyclone.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TPTT.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/ChartInfoPanel/index.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/TextInfoPanel/First.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/TextInfoPanel/Second.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/TextInfoPanel/Third.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/TextInfoPanel/index.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/index.jsx
create mode 100644 src/components/PolygonLayout/InfoLayout/index.module.less
create mode 100644 src/components/PolygonLayout/Point copy.jsx
create mode 100644 src/components/PolygonLayout/Udraft.jsx
create mode 100644 src/components/PolygonLayout/Watervapor.jsx
diff --git a/.pnp.cjs b/.pnp.cjs
index bdb9f9b..78faf36 100755
--- a/.pnp.cjs
+++ b/.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});
diff --git a/package.json b/package.json
index 4767cff..2997f86 100644
--- a/package.json
+++ b/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": {
diff --git a/src/components/HomeLayout/NavBar.jsx b/src/components/HomeLayout/NavBar.jsx
index bc71cd9..cc69e71 100644
--- a/src/components/HomeLayout/NavBar.jsx
+++ b/src/components/HomeLayout/NavBar.jsx
@@ -14,6 +14,8 @@ function NavBar() {
+
+
);
}
diff --git a/src/components/HomeLayout/index.module.less b/src/components/HomeLayout/index.module.less
index 4cf50f1..dfc73ca 100644
--- a/src/components/HomeLayout/index.module.less
+++ b/src/components/HomeLayout/index.module.less
@@ -66,11 +66,15 @@
height: 72px;
padding: 0 12px;
color: #fff;
- display: flex;
- align-items: center;
- gap: 8px;
+ // display: flex;
+ // justify-content: space-evenly;
+ // 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;
diff --git a/src/components/PolygonLayout/Barotorpic.jsx b/src/components/PolygonLayout/Barotorpic.jsx
new file mode 100644
index 0000000..c21d819
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default Barotropic;
diff --git a/src/components/PolygonLayout/CustomFlyTo copy.jsx b/src/components/PolygonLayout/CustomFlyTo copy.jsx
new file mode 100644
index 0000000..f21c035
--- /dev/null
+++ b/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 ;
+}
+
+export default CustomFlyTo;
diff --git a/src/components/PolygonLayout/CustomFlyTo.jsx b/src/components/PolygonLayout/CustomFlyTo.jsx
index 4393136..c84678e 100644
--- a/src/components/PolygonLayout/CustomFlyTo.jsx
+++ b/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 ;
diff --git a/src/components/PolygonLayout/CustomToolbar.jsx b/src/components/PolygonLayout/CustomToolbar.jsx
new file mode 100644
index 0000000..fe1a8f4
--- /dev/null
+++ b/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 (
+
+
+ 返回首页
+
+
+ );
+}
+
+export default CustomToolbar;
diff --git a/src/components/PolygonLayout/Cyclone.jsx b/src/components/PolygonLayout/Cyclone.jsx
new file mode 100644
index 0000000..e9a4d83
--- /dev/null
+++ b/src/components/PolygonLayout/Cyclone.jsx
@@ -0,0 +1,21 @@
+import { Entity, PointGraphics, useCesium } from "resium";
+
+function Cyclone({ position }) {
+ const { viewer } = useCesium();
+
+ return (
+
+
+
+ );
+}
+
+export default Cyclone;
diff --git a/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx b/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx
new file mode 100644
index 0000000..8dce435
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default SstAnnomary;
diff --git a/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TPTT.jsx b/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TPTT.jsx
new file mode 100644
index 0000000..588482a
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default TPTT;
diff --git a/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx b/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx
new file mode 100644
index 0000000..c02d97f
--- /dev/null
+++ b/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 (
+
+
+
+ );
+}
+
+export default TripolarTemperature;
diff --git a/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/index.jsx b/src/components/PolygonLayout/InfoLayout/ChartInfoPanel/index.jsx
new file mode 100644
index 0000000..43676e6
--- /dev/null
+++ b/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 ;
+ case "tripolar":
+ return ;
+ case "tptt":
+ return ;
+ default:
+ break;
+ }
+}
+
+export default ChartInfoPanel;
diff --git a/src/components/PolygonLayout/InfoLayout/TextInfoPanel/First.jsx b/src/components/PolygonLayout/InfoLayout/TextInfoPanel/First.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/PolygonLayout/InfoLayout/TextInfoPanel/Second.jsx b/src/components/PolygonLayout/InfoLayout/TextInfoPanel/Second.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/PolygonLayout/InfoLayout/TextInfoPanel/Third.jsx b/src/components/PolygonLayout/InfoLayout/TextInfoPanel/Third.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/PolygonLayout/InfoLayout/TextInfoPanel/index.jsx b/src/components/PolygonLayout/InfoLayout/TextInfoPanel/index.jsx
new file mode 100644
index 0000000..04a26fe
--- /dev/null
+++ b/src/components/PolygonLayout/InfoLayout/TextInfoPanel/index.jsx
@@ -0,0 +1,5 @@
+function TextInfoPanel() {
+ return ;
+}
+
+export default TextInfoPanel;
diff --git a/src/components/PolygonLayout/InfoLayout/index.jsx b/src/components/PolygonLayout/InfoLayout/index.jsx
new file mode 100644
index 0000000..b909c9e
--- /dev/null
+++ b/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 (
+
+
+
+
+ );
+}
+
+export default InfoLayout;
diff --git a/src/components/PolygonLayout/InfoLayout/index.module.less b/src/components/PolygonLayout/InfoLayout/index.module.less
new file mode 100644
index 0000000..0a8471a
--- /dev/null
+++ b/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 {
+ // }
+ }
+}
diff --git a/src/components/PolygonLayout/PlateauPolygon.jsx b/src/components/PolygonLayout/PlateauPolygon.jsx
index ecdf58b..cf439f9 100644
--- a/src/components/PolygonLayout/PlateauPolygon.jsx
+++ b/src/components/PolygonLayout/PlateauPolygon.jsx
@@ -6,7 +6,7 @@ function PlateauPolygon() {
return (
-
+
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 (
+ {
+ // 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,
+ }}
+ >
+ {/* */}
+ {/* */}
+
+ );
+}
+
+export default Point;
diff --git a/src/components/PolygonLayout/Point.jsx b/src/components/PolygonLayout/Point.jsx
index e75dc5d..50c4f86 100644
--- a/src/components/PolygonLayout/Point.jsx
+++ b/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 { Select } from "antd";
-import styles from "./index.module.less";
+import { useInterval } from "ahooks";
+import { flatten } from "lodash-es";
-const data = [];
-const height = 20000;
-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,
- });
-}
+const height = 9000 * 100;
+// 从拉布拉多海上升
+const step1 = [
+ { longitude: -55, latitude: 58, height: 1000000, time: 0 },
+ // { longitude: -70, latitude: -60, height, time: 10 },
+];
+// 从拉布拉多海上空移动到目的地
+const step2 = [
+ // { longitude: -30, latitude: -55, height, time: 20 },
+ // { longitude: 30, latitude: -40, height, time: 30 },
+ // { longitude: 65, latitude: -35, height, time: 40 },
+];
+// 从目的地下降
+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,
- interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
+ interpolationDegree: 1,
+ interpolationAlgorithm: Cesium.LinearApproximation,
});
- const navigateHandler = useCallback(() => {
- navigate("/home", { replace: true });
- }, [navigate]);
+ const animate = useCallback(() => {
+ const { currentTime, startTime, shouldAnimate } = viewer.clock;
+ if (!shouldAnimate) return;
+ const entity = viewer.entities.getById("point");
+ const position = entity.position;
+ // console.log("entity :>> ", entity, position);
- const handleChange = (value) => {
- setValue(value);
- if (!viewer) return;
- if (value === "overhead") {
- // 俯视
- viewer.trackedEntity = entityRef.current.cesiumElement;
- const destination = entityRef.current.cesiumElement.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 = 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,
- });
+ const time = Math.floor(currentTime.secondsOfDay - startTime.secondsOfDay);
+ if (time < 10) {
+ // entity.position._value.z = position._value.z + 9000 * 10;
+ } else if (10 < time < 50) {
+ if (time === 20) {
+ }
+ if (time === 30) {
+ }
+ if (time === 40) {
+ }
+ } else if (50 < time < 60) {
}
- };
+ }, [viewer]);
+ useInterval(animate, 1000);
return (
-
-
-
- 返回首页
-
-
- {
- // 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,
+
-
-
-
+ ])
+ }
+ 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,
+ }}
+ >
+
+
);
}
diff --git a/src/components/PolygonLayout/Udraft.jsx b/src/components/PolygonLayout/Udraft.jsx
new file mode 100644
index 0000000..4304ee5
--- /dev/null
+++ b/src/components/PolygonLayout/Udraft.jsx
@@ -0,0 +1,18 @@
+import { Entity, PolylineGraphics } from "resium";
+import { Cartesian3 } from "cesium";
+
+function Updraft() {
+ return (
+
+
+
+ );
+}
+
+export default Updraft;
diff --git a/src/components/PolygonLayout/Watervapor.jsx b/src/components/PolygonLayout/Watervapor.jsx
new file mode 100644
index 0000000..bfdc6e9
--- /dev/null
+++ b/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 (
+
+
+
+
+
+ );
+}
+
+export default Watervapor;
diff --git a/src/components/PolygonLayout/WavePoint.jsx b/src/components/PolygonLayout/WavePoint.jsx
index 1cf2e8e..68b0e9d 100644
--- a/src/components/PolygonLayout/WavePoint.jsx
+++ b/src/components/PolygonLayout/WavePoint.jsx
@@ -42,6 +42,7 @@ function WavePoint({
const point1 = (
+ {/* */}
+
+
+
+ {/* */}
+
+
+
);
}
diff --git a/src/components/PolygonLayout/index.module.less b/src/components/PolygonLayout/index.module.less
index 041508b..5ff6df1 100644
--- a/src/components/PolygonLayout/index.module.less
+++ b/src/components/PolygonLayout/index.module.less
@@ -1,4 +1,6 @@
.cesiumContainer :global {
+ pointer-events: auto;
+
.cesium-viewer {
.cesium-viewer-bottom {
display: none;
diff --git a/yarn.lock b/yarn.lock
index 4034285..e19f3e7 100644
--- a/yarn.lock
+++ b/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