{colorBar.map((color, index) => {
diff --git a/src/components/domain/Three/SceneOne/ViewerOne.jsx b/src/components/domain/Three/SceneOne/ViewerOne.jsx
new file mode 100644
index 0000000..8720bd5
--- /dev/null
+++ b/src/components/domain/Three/SceneOne/ViewerOne.jsx
@@ -0,0 +1,31 @@
+import { CameraFlyTo } from "resium";
+import { Cartesian3 } from "cesium";
+import MapLayout from "@/components/map/Layout";
+import CustomToolbar from "@/components/common/CustomToolbar";
+import CustomClock from "@/components/common/CustomClock";
+import LandImageLayer from "../LandImageLayer";
+import WavePoint from "@/components/common/WavePoint";
+
+function ViewerOne({ children }) {
+ return (
+
+ );
+}
+
+export default ViewerOne;
diff --git a/src/components/domain/Three/SceneOne/ViewerThree.jsx b/src/components/domain/Three/SceneOne/ViewerThree.jsx
new file mode 100644
index 0000000..3d8c0d5
--- /dev/null
+++ b/src/components/domain/Three/SceneOne/ViewerThree.jsx
@@ -0,0 +1,21 @@
+import { CameraFlyTo } from "resium";
+import { Cartesian3 } from "cesium";
+import MapLayout from "@/components/map/Layout";
+import WavePoint from "@/components/common/WavePoint";
+
+function ViewerThree({ children }) {
+ return (
+
+ );
+}
+
+export default ViewerThree;
diff --git a/src/components/domain/Three/SceneOne/ViewerTwo.jsx b/src/components/domain/Three/SceneOne/ViewerTwo.jsx
new file mode 100644
index 0000000..b37a635
--- /dev/null
+++ b/src/components/domain/Three/SceneOne/ViewerTwo.jsx
@@ -0,0 +1,28 @@
+import { CameraFlyTo } from "resium";
+import { Cartesian3 } from "cesium";
+import MapLayout from "@/components/map/Layout";
+import OceanImageLayer from "../OceanImageLayer";
+import WavePoint from "@/components/common/WavePoint";
+
+function ViewerTwo({ children }) {
+ return (
+
+ );
+}
+
+export default ViewerTwo;
diff --git a/src/components/domain/Three/SceneOne/index.jsx b/src/components/domain/Three/SceneOne/index.jsx
new file mode 100644
index 0000000..e35433b
--- /dev/null
+++ b/src/components/domain/Three/SceneOne/index.jsx
@@ -0,0 +1,28 @@
+import TextInfoPanel from "@/components/common/TextInfoPanel";
+import ChartPanel from "../ChartPanel";
+import Legend from "../Legend";
+import ViewerOne from "./ViewerOne";
+import ViewerTwo from "./ViewerTwo";
+import ViewerThree from "./ViewerThree";
+import styles from "./index.module.less";
+
+function SceneOne() {
+ return (
+
+ );
+}
+
+export default SceneOne;
diff --git a/src/components/domain/Three/SceneOne/index.module.less b/src/components/domain/Three/SceneOne/index.module.less
new file mode 100644
index 0000000..ff55c5b
--- /dev/null
+++ b/src/components/domain/Three/SceneOne/index.module.less
@@ -0,0 +1,21 @@
+.sceneOne :global {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ background-color: gray;
+
+ .domain-viewers {
+ width: 100%;
+ height: calc(100% - 250px);
+ display: flex;
+
+ .domain-viewer {
+ flex: 1;
+ position: relative;
+
+ .title {
+ pointer-events: none;
+ }
+ }
+ }
+}
diff --git a/src/components/domain/Three/SceneSwitch.jsx b/src/components/domain/Three/SceneSwitch.jsx
new file mode 100644
index 0000000..7b29f62
--- /dev/null
+++ b/src/components/domain/Three/SceneSwitch.jsx
@@ -0,0 +1,15 @@
+import { Button } from "antd";
+
+function SceneSwitch({ scene, setScene }) {
+ const switchHandler = () => {
+ setScene(scene === 1 ? 2 : 1);
+ };
+
+ return (
+
+ );
+}
+
+export default SceneSwitch;
diff --git a/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx b/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx
new file mode 100644
index 0000000..f78a9c6
--- /dev/null
+++ b/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx
@@ -0,0 +1,110 @@
+import ReactECharts from "echarts-for-react";
+
+const years = [];
+
+for (let year = 1950; year <= 2020; year++) {
+ years.push(year);
+}
+
+const SATData = [];
+const SSTData = [];
+
+function SceneChartPanel() {
+ const option = {
+ title: {
+ // text: "Stacked Line",
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ legend: {
+ data: ["SAT_SVD1", "SST_SVD1"],
+ textStyle: { color: "#04fbfd", cursor: "point" },
+ },
+ animationDuration: 10 * 1000,
+ animationEasing: "cubicInOut",
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ boundaryGap: false,
+ data: years,
+ axisLine: {
+ onZero: false,
+ symbol: ["none", "arrow"],
+ symbolOffser: [0, 10],
+ lineStyle: {
+ color: "#04fbfd",
+ },
+ },
+ },
+ yAxis: {
+ type: "value",
+ min: -3.0,
+ max: 2.0,
+ interval: 1.0,
+ splitNumber: 5,
+ splitLine: { show: false },
+ axisLine: {
+ onZero: false,
+ show: true,
+ symbol: ["none", "arrow"],
+ symbolOffset: [0, 10],
+ lineStyle: {
+ color: "#04fbfd",
+ },
+ },
+ axisLabel: {
+ show: true,
+ },
+ axisTick: { show: true },
+ scale: true,
+ },
+ dataZoom: { type: "inside", start: 0, end: 100 },
+ series: [
+ {
+ name: "SAT_SVD1",
+ type: "line",
+ stack: "Total",
+ data: SATData,
+ smooth: true,
+ color: "red",
+ symbol: "none",
+ itemStyle: {
+ color: "red",
+ },
+ },
+ {
+ name: "SST_SVD1",
+ type: "line",
+ // stack: "Total",
+ data: SSTData,
+ smooth: true,
+ color: "blue",
+ symbol: "none",
+ itemStyle: {
+ color: "blue",
+ },
+ },
+ ],
+ };
+
+ return (
+
+ );
+}
+
+export default SceneChartPanel;
diff --git a/src/components/domain/Three/SceneTwo/index.jsx b/src/components/domain/Three/SceneTwo/index.jsx
new file mode 100644
index 0000000..8daf094
--- /dev/null
+++ b/src/components/domain/Three/SceneTwo/index.jsx
@@ -0,0 +1,20 @@
+import Legend from "../Legend";
+import ViewerOne from "../SceneOne/ViewerOne";
+import SceneChartPanel from "./SceneChartPanel";
+
+function SceneTwo() {
+ return (
+
+ );
+}
+
+export default SceneTwo;
diff --git a/src/components/domain/Three/index.jsx b/src/components/domain/Three/index.jsx
index 90e974c..dcfd669 100644
--- a/src/components/domain/Three/index.jsx
+++ b/src/components/domain/Three/index.jsx
@@ -1,64 +1,16 @@
-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 ChartPanel from "./ChartPanel";
-import LandImageLayer from "./LandImageLayer";
-import OceanImageLayer from "./OceanImageLayer";
-import WavePoint from "@/components/common/WavePoint";
-import { CameraFlyTo } from "resium";
-import { Cartesian3 } from "cesium";
-import Legend from "./Legend";
+import { useState } from "react";
+import styles from "./index.module.less";
+import SceneOne from "./SceneOne";
+import SceneTwo from "./SceneTwo";
+import SceneSwitch from "./SceneSwitch";
+
+export default function DomainThree() {
+ const [scene, setScene] = useState(1);
-export default function DomainOne() {
return (
-
-
-
-
- 两极协同—连接南极和北极的热带大西洋经向模的媒介作用
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/*
*/}
+
+ {scene === 1 ? : }
+
);
}
diff --git a/src/components/domain/Three/index.module.less b/src/components/domain/Three/index.module.less
index c9cc1bf..d966335 100644
--- a/src/components/domain/Three/index.module.less
+++ b/src/components/domain/Three/index.module.less
@@ -1,6 +1,148 @@
+.domainThree :global {
+ height: 100%;
+
+ .scene_two {
+ display: flex;
+ height: 100%;
+
+ .domain-viewer {
+ flex: 1;
+ position: relative;
+
+ .title {
+ pointer-events: none;
+ }
+
+ .chart-info-panel {
+ width: 100%;
+ height: 100%;
+ pointer-events: auto;
+ padding: 12px;
+ border: 1px solid #04fbfd;
+ color: #02f9ff !important;
+ background-color: #1f485690;
+ transition: all 0.3s ease-in-out;
+ }
+ }
+ }
+
+ .scene-switch {
+ position: absolute;
+ left: 8px;
+ top: 8px;
+ }
+
+ .left-panel {
+ position: absolute;
+ left: 12px;
+ bottom: 12px;
+ width: 450px;
+ display: flex;
+ flex-direction: column;
+ height: 230px;
+
+ .top-panel {
+ flex: 1;
+ }
+
+ .bottom-panel {
+ flex: 1;
+ }
+
+ .text-info-panel {
+ width: 100%;
+ height: 100%;
+ padding: 12px;
+ border: 1px solid #04fbfd;
+ color: #02f9ff !important;
+ background-color: #1f485690;
+ pointer-events: auto;
+ font-size: 18px;
+ text-indent: 2em;
+ line-height: 1.5;
+ z-index: 999;
+ }
+ }
+
+ .right-panel {
+ position: absolute;
+ right: 12px;
+ bottom: 12px;
+ width: 450px;
+ height: 230px;
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+
+ .top-panel {
+ flex: 1;
+ }
+
+ .bottom-panel {
+ flex: 1;
+ }
+
+ .form-panel {
+ width: 100%;
+ height: 100%;
+ pointer-events: auto;
+ padding: 12px;
+ border: 1px solid #04fbfd;
+ color: #02f9ff !important;
+ background-color: #1f485690;
+
+ .ant-form-item-label {
+ label {
+ 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: #00a2a2;
+ }
+ &::-webkit-scrollbar-track {
+ border-radius: 6px;
+ background: none;
+ }
+ }
+ }
+ }
+
+ .chart-info-panel {
+ width: 100%;
+ height: 100%;
+ pointer-events: auto;
+ padding: 12px;
+ border: 1px solid #04fbfd;
+ color: #02f9ff !important;
+ background-color: #1f485690;
+ transition: all 0.3s ease-in-out;
+ }
+
+ .highlight {
+ outline: 4px solid #04fbfd;
+ box-shadow: 0 0 30px #04e0fd;
+ }
+ }
+
+ .one {
+ top: 50%;
+ }
+}
+
.legend :global {
position: absolute;
- bottom: 40px;
+ bottom: 270px;
width: 50%;
left: 25%;
z-index: 1000;
@@ -26,7 +168,6 @@
.colorbar-item {
flex: 1;
height: 100%;
- // border-radius: 8px;
border: 1px black solid;
&:not(:nth-child(1)) {
diff --git a/src/components/domain/Two/Circles.jsx b/src/components/domain/Two/Circles.jsx
index 8a00819..a6804ad 100644
--- a/src/components/domain/Two/Circles.jsx
+++ b/src/components/domain/Two/Circles.jsx
@@ -1,27 +1,46 @@
import { Fragment, useState } from "react";
-import { Entity, EllipsoidGraphics, useCesium, PolylineGraphics } from "resium";
+import {
+ Entity,
+ EllipsoidGraphics,
+ useCesium,
+ PolylineGraphics,
+ LabelGraphics,
+} from "resium";
import { useInterval, useThrottleFn } from "ahooks";
import { useDispatch } from "react-redux";
+import {
+ Cartesian3,
+ Color,
+ Math as CesiumMath,
+ LabelStyle,
+ PolylineDashMaterialProperty,
+ Cartesian2,
+} from "cesium";
const lowCircle = (
);
+
const highCircle = (
);
+// const labelText={
+// '5月南极涛动','Rossby波列' , '印度洋海温异常（信号存储）', '6月青藏高原降水（80个站点）和加热'
+// }
+
function Circles() {
const { viewer } = useCesium();
const dispatch = useDispatch();
@@ -56,7 +75,7 @@ function Circles() {
currentTime.secondsOfDay - startTime.secondsOfDay
);
if (!shouldAnimate) return;
- if (_time === 40) {
+ if (_time === 20) {
showInfo();
} else if (_time === 0) {
closeInfo();
@@ -75,14 +94,12 @@ function Circles() {
{circle}
-
- {show && (
- )}
+
{circle}
+
+
+
);
};
@@ -115,35 +143,35 @@ function Circles() {
diff --git a/src/components/domain/Two/Cloud.jsx b/src/components/domain/Two/Cloud.jsx
index e46c1d1..92187db 100644
--- a/src/components/domain/Two/Cloud.jsx
+++ b/src/components/domain/Two/Cloud.jsx
@@ -1,30 +1,31 @@
-import { useCesium } from "resium";
+import { Cartesian2, Cartesian3, Math } from "cesium";
+import { CloudCollection, useCesium } from "resium";
function Cloud() {
const { viewer } = useCesium();
const scene = viewer.scene;
- const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 50);
+ const position = Cartesian3.fromDegrees(-123.0744619, 44.0503706, 50);
- Cesium.Math.setRandomNumberSeed(2.5);
+ Math.setRandomNumberSeed(2.5);
function getRandomNumberInRange(minValue, maxValue) {
- return minValue + Cesium.Math.nextRandomNumber() * (maxValue - minValue);
+ return minValue + Math.nextRandomNumber() * (maxValue - minValue);
}
- const clouds = new Cesium.CloudCollection();
+ const clouds = new CloudCollection();
// manually position clouds in the mountains
function createBackLayerClouds() {
clouds.add({
- position: Cesium.Cartesian3.fromDegrees(-122.6908, 45.496, 300),
- scale: new Cesium.Cartesian2(1500, 250),
- maximumSize: new Cesium.Cartesian3(50, 15, 13),
+ position: new Cartesian3.fromDegrees(-122.6908, 45.496, 300),
+ scale: new Cartesian2(1500, 250),
+ maximumSize: new Cartesian3(50, 15, 13),
slice: 0.3,
});
clouds.add({
- position: Cesium.Cartesian3.fromDegrees(-122.72, 45.5, 335),
- scale: new Cesium.Cartesian2(1500, 300),
- maximumSize: new Cesium.Cartesian3(50, 12, 15),
+ position: new Cartesian3.fromDegrees(-122.72, 45.5, 335),
+ scale: new Cartesian2(1500, 300),
+ maximumSize: new Cartesian3(50, 12, 15),
slice: 0.36,
});
}
@@ -53,9 +54,9 @@ function Cloud() {
aspectRatio = getRandomNumberInRange(1.5, 2.1);
cloudHeight = getRandomNumberInRange(5, 20);
clouds.add({
- position: Cesium.Cartesian3.fromDegrees(long, lat, height),
- scale: new Cesium.Cartesian2(scaleX, scaleY),
- maximumSize: new Cesium.Cartesian3(
+ position: Cartesian3.fromDegrees(long, lat, height),
+ scale: new Cartesian2(scaleX, scaleY),
+ maximumSize: new Cartesian3(
aspectRatio * cloudHeight,
cloudHeight,
depth
@@ -65,19 +66,19 @@ function Cloud() {
}
}
// manually position clouds in front
- const scratch = new Cesium.Cartesian3();
+ const scratch = new Cartesian3();
function createFrontLayerClouds() {
clouds.add({
- position: Cesium.Cartesian3.fromDegrees(-122.666, 45.5126, 97),
- scale: new Cesium.Cartesian2(400, 150),
- maximumSize: new Cesium.Cartesian3(25, 12, 15),
+ position: Cartesian3.fromDegrees(-122.666, 45.5126, 97),
+ scale: new Cartesian2(400, 150),
+ maximumSize: new Cartesian3(25, 12, 15),
slice: 0.36,
});
clouds.add({
- position: Cesium.Cartesian3.fromDegrees(-122.6665, 45.5262, 76),
- scale: new Cesium.Cartesian2(450, 200),
- maximumSize: new Cesium.Cartesian3(25, 14, 12),
+ position: Cartesian3.fromDegrees(-122.6665, 45.5262, 76),
+ scale: new Cartesian2(450, 200),
+ maximumSize: new Cartesian3(25, 14, 12),
slice: 0.3,
});
}
diff --git a/src/components/domain/Two/CustomFlyTo.jsx b/src/components/domain/Two/CustomFlyTo.jsx
index 7df0181..3930010 100644
--- a/src/components/domain/Two/CustomFlyTo.jsx
+++ b/src/components/domain/Two/CustomFlyTo.jsx
@@ -1,112 +1,137 @@
+import { Cartesian3, EasingFunction, Math } from "cesium";
import { useDispatch } from "react-redux";
import { useCesium } from "resium";
function CustomFlyTo() {
const dispatch = useDispatch();
- const { viewer } = useCesium();
- const { camera } = viewer;
+ const { viewer, camera } = useCesium();
- 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);
- },
- };
+ function cameraFlyToLine() {
+ // // 南极
+ // const antarcticalOptions = {
+ // destination: Cartesian3.fromDegrees(88, -89, 1600000),
+ // orientation: {
+ // heading: Math.toRadians(15.0),
+ // pitch: Math.toRadians(-60),
+ // roll: 0.0,
+ // },
+ // duration: 5,
+ // complete: function () {
+ // camera.flyTo(area1Options);
+ // },
+ // easingFunction: EasingFunction.LINEAR_NONE,
+ // };
const area1Options = {
- destination: Cesium.Cartesian3.fromDegrees(-110, -60, 6000000),
+ destination: Cartesian3.fromDegrees(-110, -86, 10000000),
duration: 5,
- complete: function () {
- setTimeout(function () {
- camera.flyTo(area2Options);
- }, 1000);
+ orientation: {
+ heading: 6,
+ pitch: -1.3,
+ roll: -6,
},
+ complete: function () {
+ viewer.clock.shouldAnimate = true;
+ dispatch.data.updateToolbar({ showPanel: true });
+ setTimeout(() => {
+ camera.flyTo(area2Options);
+ }, 5000);
+ },
+ easingFunction: EasingFunction.LINEAR_NONE,
};
const area2Options = {
- destination: Cesium.Cartesian3.fromDegrees(-30, -55, 6000000),
+ destination: Cartesian3.fromDegrees(-30, -65, 10000000),
duration: 5,
complete: function () {
- setTimeout(function () {
- camera.flyTo(area3Options);
- }, 1000);
+ camera.flyTo(area3Options);
+ },
+ easingFunction: EasingFunction.LINEAR_NONE,
+ orientation: {
+ heading: 6,
+ pitch: -1.3,
+ roll: -6,
},
};
const area3Options = {
- destination: Cesium.Cartesian3.fromDegrees(30, -40, 6000000),
+ destination: Cartesian3.fromDegrees(30, -40, 10000000),
duration: 5,
complete: function () {
- setTimeout(function () {
- camera.flyTo(area4Options);
- }, 1000);
+ camera.flyTo(area4Options);
},
+ easingFunction: EasingFunction.LINEAR_NONE,
};
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),
+ destination: Cartesian3.fromDegrees(65, -55, 10000000),
duration: 5,
orientation: {
- heading: Cesium.Math.toRadians(-15.0),
- pitch: -Cesium.Math.PI_OVER_FOUR,
- roll: 0.0,
+ heading: 6,
+ pitch: -1.3,
+ roll: -6,
},
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),
+ destination: Cartesian3.fromDegrees(90, -12, 14000000),
});
- }, 40 * 1000);
+ }, 5 * 1000);
},
+ easingFunction: EasingFunction.LINEAR_NONE,
};
- if (adjustPitch) {
- antarcticalOptions.pitchAdjustHeight = 1000;
- plateauOptions.pitchAdjustHeight = 1000;
- sideViewOptions.pitchAdjustHeight = 1000;
- }
- camera.flyTo(sideViewOptions);
+ const area5Options = {
+ destination: Cartesian3.fromDegrees(95, -30, 10000000),
+ duration: 5,
+ complete: function () {
+ // camera.flyTo(sideViewOptions);
+ setTimeout(() => {
+ camera.flyTo({
+ duration: 5,
+ destination: Cartesian3.fromDegrees(90, -12, 14000000),
+ });
+ }, 5 * 1000);
+ },
+ easingFunction: EasingFunction.LINEAR_NONE,
+ };
+
+ // 侧边
+ // const sideViewOptions = {
+ // destination: Cartesian3.fromDegrees(80, -60, 16000000),
+ // // destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000),
+ // duration: 5,
+ // orientation: {
+ // heading: Math.toRadians(-10.0),
+ // pitch: Math.toRadians(-92),
+ // roll: 6.0,
+ // },
+ // complete: () => {
+ // viewer.clock.shouldAnimate = true;
+ // dispatch.data.updateToolbar({ showPanel: true });
+ // setTimeout(() => {
+ // camera.flyTo({
+ // duration: 5,
+ // destination: Cartesian3.fromDegrees(90, -12, 14000000),
+ // });
+ // }, 40 * 1000);
+ // },
+ // };
+
+ const xx = {
+ destination: Cartesian3.fromDegrees(65, -55, 10000000),
+ duration: 5,
+ orientation: {
+ heading: 6,
+ pitch: -1.3,
+ roll: -6,
+ },
+
+ easingFunction: EasingFunction.LINEAR_NONE,
+ };
+
+ camera.flyTo(area1Options);
}
cameraFlyToLine();
return <>;
diff --git a/src/components/domain/Two/Labels.jsx b/src/components/domain/Two/Labels.jsx
new file mode 100644
index 0000000..caebeda
--- /dev/null
+++ b/src/components/domain/Two/Labels.jsx
@@ -0,0 +1,34 @@
+import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium";
+import { Fragment } from "react";
+import { Entity, LabelGraphics } from "resium";
+
+function Labels() {
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Labels;
diff --git a/src/components/domain/Two/MoistureTransport.jsx b/src/components/domain/Two/MoistureTransport.jsx
index d3125d5..cee5a09 100644
--- a/src/components/domain/Two/MoistureTransport.jsx
+++ b/src/components/domain/Two/MoistureTransport.jsx
@@ -1,4 +1,5 @@
import { useInterval } from "ahooks";
+import { Cartesian3, Color, PolylineArrowMaterialProperty } from "cesium";
import { Fragment, useCallback, useState } from "react";
import { Entity, PolylineGraphics, useCesium } from "resium";
@@ -23,26 +24,24 @@ function MoistureTransport() {
diff --git a/src/components/domain/Two/PlateauPolygon.jsx b/src/components/domain/Two/PlateauPolygon.jsx
index e47886b..760d71f 100644
--- a/src/components/domain/Two/PlateauPolygon.jsx
+++ b/src/components/domain/Two/PlateauPolygon.jsx
@@ -1,6 +1,7 @@
import { useCallback, useState } from "react";
import { Entity, PolygonGraphics, useCesium } from "resium";
import { useInterval } from "ahooks";
+import { Cartesian3, Color } from "cesium";
function PlateauPolygon() {
const { viewer } = useCesium();
@@ -12,7 +13,7 @@ function PlateauPolygon() {
stopTime.secondsOfDay - currentTime.secondsOfDay
);
- if (leftTime < 20) {
+ if (leftTime < 5) {
setShow(true);
} else if (show) setShow(false);
}, [show]);
@@ -22,11 +23,11 @@ function PlateauPolygon() {
return (
);
diff --git a/src/components/domain/Two/Point.jsx b/src/components/domain/Two/Point.jsx
index f60eb24..4054904 100644
--- a/src/components/domain/Two/Point.jsx
+++ b/src/components/domain/Two/Point.jsx
@@ -1,16 +1,26 @@
import { useState } from "react";
import { Entity, PointGraphics, useCesium } from "resium";
import { useInterval } from "ahooks";
+import {
+ Cartesian3,
+ Color,
+ JulianDate,
+ LinearApproximation,
+ SampledPositionProperty,
+ TimeInterval,
+ TimeIntervalCollection,
+ VelocityOrientationProperty,
+} from "cesium";
// 从南极到青藏高原
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 },
+ { longitude: -110, latitude: -60, height: 1000000, time: 5 },
+ { longitude: -30, latitude: -55, height: 1000000, time: 10 },
+ { longitude: 30, latitude: -40, height: 1000000, time: 15 },
+ { longitude: 65, latitude: -35, height: 1000000, time: 20 },
+ { longitude: 95, latitude: -30, height: 1000000, time: 27 },
+ { longitude: 95, latitude: -30, height: 0, time: 30 },
];
function Point() {
@@ -21,7 +31,7 @@ function Point() {
const start = viewer.clock.startTime;
const stop = viewer.clock.stopTime;
- const pathMaterial = new Cesium.Color(4 / 255, 251 / 255, 253 / 255);
+ const pathMaterial = new Color(4 / 255, 251 / 255, 253 / 255);
useInterval(() => {
if (viewer.clock?.shouldAnimate) setDelay(undefined);
@@ -33,14 +43,10 @@ function Point() {
* {SampledPositionProperty|*}
*/
function createProperty(source) {
- let property = new Cesium.SampledPositionProperty();
+ let property = new 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(
+ let time = JulianDate.addSeconds(start, source[i].time, new JulianDate());
+ let position = Cartesian3.fromDegrees(
source[i].longitude,
source[i].latitude,
source[i].height
@@ -50,7 +56,7 @@ function Point() {
}
property.setInterpolationOptions({
interpolationDegree: 1,
- interpolationAlgorithm: Cesium.LinearApproximation,
+ interpolationAlgorithm: LinearApproximation,
});
return property;
}
@@ -62,14 +68,14 @@ function Point() {
id={"point"}
position={property}
availability={
- new Cesium.TimeIntervalCollection([
- new Cesium.TimeInterval({
+ new TimeIntervalCollection([
+ new TimeInterval({
start,
stop,
}),
])
}
- orientation={new Cesium.VelocityOrientationProperty(property)}
+ orientation={new VelocityOrientationProperty(property)}
path={{
resolution: 1,
material: pathMaterial,
@@ -81,8 +87,8 @@ function Point() {
>
diff --git a/src/components/domain/Two/Site/HeatFlux.jsx b/src/components/domain/Two/Site/HeatFlux.jsx
index 1d822fd..65e6972 100644
--- a/src/components/domain/Two/Site/HeatFlux.jsx
+++ b/src/components/domain/Two/Site/HeatFlux.jsx
@@ -1,5 +1,5 @@
import { Entity, EllipseGraphics } from "resium";
-import { Cartesian3 } from "cesium";
+import { Cartesian3, Color } from "cesium";
const fluxData = [
0.03256254, -0.23182425, -0.040055223, -0.03476936, -0.40450656, -0.18742515,
@@ -86,7 +86,7 @@ function HeatFlux({ position, index }) {
`}
>
diff --git a/src/components/domain/Two/index.jsx b/src/components/domain/Two/index.jsx
index 92e60d6..dcf8dda 100644
--- a/src/components/domain/Two/index.jsx
+++ b/src/components/domain/Two/index.jsx
@@ -13,6 +13,7 @@ import Circles from "./Circles";
import SurfaceAnomaly from "./SurfaceAnomaly";
import MoistureTransport from "./MoistureTransport";
import Sites from "./Site";
+import Labels from "./Labels";
export default function DomainTwo() {
return (
@@ -22,18 +23,19 @@ export default function DomainTwo() {
+
+
+
+
+
+
-
-
-
{/* */}
-
-
);
}
diff --git a/src/components/map/Layout/HeadingPitchRoll.jsx b/src/components/map/Layout/HeadingPitchRoll.jsx
new file mode 100644
index 0000000..335bd38
--- /dev/null
+++ b/src/components/map/Layout/HeadingPitchRoll.jsx
@@ -0,0 +1,16 @@
+import { useCesium } from "resium";
+
+function HeadingPitchRoll() {
+ const { camera } = useCesium();
+
+ camera.moveEnd?.addEventListener(function (event) {
+ const heading = camera.heading;
+ const pitch = camera.pitch;
+ const roll = camera.roll;
+ console.log("heading,pitch,roll :>> ", heading, pitch, roll);
+ });
+
+ return <>;
+}
+
+export default HeadingPitchRoll;
diff --git a/src/components/map/Layout/Picker.jsx b/src/components/map/Layout/Picker.jsx
index 681c3d0..b7828c7 100644
--- a/src/components/map/Layout/Picker.jsx
+++ b/src/components/map/Layout/Picker.jsx
@@ -1,3 +1,9 @@
+import {
+ Cartographic,
+ Math,
+ ScreenSpaceEventHandler,
+ ScreenSpaceEventType,
+} from "cesium";
import { useState } from "react";
import { useCesium } from "resium";
@@ -7,26 +13,22 @@ function Picker() {
const [lon, setLon] = useState();
const [lat, setLat] = useState();
- const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
+ const handler = new ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
const cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
if (cartesian) {
- const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
- const longitudeString = Cesium.Math.toDegrees(
- cartographic.longitude
- ).toFixed(4);
- const latitudeString = Cesium.Math.toDegrees(
- cartographic.latitude
- ).toFixed(4);
+ const cartographic = Cartographic.fromCartesian(cartesian);
+ const longitudeString = Math.toDegrees(cartographic.longitude).toFixed(4);
+ const latitudeString = Math.toDegrees(cartographic.latitude).toFixed(4);
setLon(longitudeString);
setLat(latitudeString);
} else {
// entity.label.show = false;
}
- }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+ }, ScreenSpaceEventType.MOUSE_MOVE);
if (!lon && !lat) return <>;
diff --git a/src/components/map/Layout/index.jsx b/src/components/map/Layout/index.jsx
index aba3d89..a7cc3ea 100644
--- a/src/components/map/Layout/index.jsx
+++ b/src/components/map/Layout/index.jsx
@@ -1,20 +1,10 @@
import { Entity, PointGraphics, Viewer } from "resium";
import styles from "./index.module.less";
-import { useMemo } from "react";
-import { BingMapsImageryProvider, BingMapsStyle } from "cesium";
+import { Cartesian3, Color } from "cesium";
import Picker from "./Picker";
+import HeadingPitchRoll from "./HeadingPitchRoll";
function MapLayout({ children, className, ...rest }) {
- const imageryProvider = useMemo(
- () =>
- new BingMapsImageryProvider({
- url: "https://dev.virtualearth.net",
- key: "Ahv1KDJwbpJl4V8zklaRXcoueWXoNLo16osJiU4Zk07vc-VNNzJ0gB81TZyPqNFz",
- mapStyle: BingMapsStyle.AERIAL,
- }),
- []
- );
-
return (
-
-
+
+
+ {/* */}
{children}
);
diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less
index 6500a14..0598a99 100644
--- a/src/components/map/Layout/index.module.less
+++ b/src/components/map/Layout/index.module.less
@@ -63,7 +63,7 @@
color: #02f9ff !important;
background-color: #1f485690;
pointer-events: auto;
- font-size: 16px;
+ font-size: 18px;
text-indent: 2em;
line-height: 1.5;
z-index: 999;
From 682236db91291274586c033849c634655cb8befb Mon Sep 17 00:00:00 2001
From: Aifeilong <2993607249@qq.com>
Date: Thu, 12 Oct 2023 18:02:30 +0800
Subject: [PATCH 2/3] fix
---
src/components/domain/Two/Circles.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/domain/Two/Circles.jsx b/src/components/domain/Two/Circles.jsx
index a6804ad..67b1750 100644
--- a/src/components/domain/Two/Circles.jsx
+++ b/src/components/domain/Two/Circles.jsx
@@ -131,7 +131,7 @@ function Circles() {
outlineColor={Color.BLACK}
outlineWidth={2}
style={LabelStyle.FILL_AND_OUTLINE}
- eyeOffset={new Cartesian2(0, 10000000)}
+ eyeOffset={new Cartesian2(0, 1000000)}
/>
From abce91fc07c3c7b5ffdc97807525d406902763bc Mon Sep 17 00:00:00 2001
From: Aifeilong <2993607249@qq.com>
Date: Thu, 12 Oct 2023 18:06:11 +0800
Subject: [PATCH 3/3] fix
---
src/components/domain/Two/IndiaOceanSST.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/domain/Two/IndiaOceanSST.jsx b/src/components/domain/Two/IndiaOceanSST.jsx
index b4a01a7..6cfa24c 100644
--- a/src/components/domain/Two/IndiaOceanSST.jsx
+++ b/src/components/domain/Two/IndiaOceanSST.jsx
@@ -12,7 +12,7 @@ function IndianOceanSST() {
() =>
new WebMapServiceImageryProvider({
url: url,
- layers: "phitrellis:india_ocean_sst",
+ layers: "phitrellis:4_2_Indian_Ocean_sst",
parameters: {
service: "WMS",
format: "image/png",