fix
This commit is contained in:
parent
2e389e43c6
commit
e73dec4a49
@ -17,6 +17,7 @@
|
|||||||
"ahooks": "^3.7.8",
|
"ahooks": "^3.7.8",
|
||||||
"antd": "4.24.9",
|
"antd": "4.24.9",
|
||||||
"cesium": "^1.108.0",
|
"cesium": "^1.108.0",
|
||||||
|
"classnames": "^2.3.2",
|
||||||
"craco-cesium": "^1.2.0",
|
"craco-cesium": "^1.2.0",
|
||||||
"craco-less": "^3.0.1",
|
"craco-less": "^3.0.1",
|
||||||
"echarts": "^5.0.2",
|
"echarts": "^5.0.2",
|
||||||
|
|||||||
@ -82,7 +82,7 @@ function CustomToolbar() {
|
|||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const isAtRightEdge = mouseX >= window.innerWidth - 10;
|
const isAtRightEdge = mouseX >= window.innerWidth - 20;
|
||||||
const iaClose = mouseX + 320 <= window.innerWidth;
|
const iaClose = mouseX + 320 <= window.innerWidth;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.drawerToolbar :global {
|
.drawerToolbar :global {
|
||||||
transition: all 0.3s ease;
|
transition: all 0.6s ease;
|
||||||
|
|
||||||
.ant-drawer-content-wrapper {
|
.ant-drawer-content-wrapper {
|
||||||
.ant-drawer-content {
|
.ant-drawer-content {
|
||||||
|
|||||||
@ -50,6 +50,9 @@ function ChartPanel() {
|
|||||||
onZero: false,
|
onZero: false,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffser: [0, 10],
|
symbolOffser: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@ -64,6 +67,9 @@ function ChartPanel() {
|
|||||||
show: true,
|
show: true,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffset: [0, 10],
|
symbolOffset: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { Button, Form, Input, Select } from "antd";
|
import { Button, Form, Select } from "antd";
|
||||||
|
|
||||||
const layout = {
|
const layout = {
|
||||||
labelCol: { span: 6 },
|
labelCol: { span: 6 },
|
||||||
@ -8,7 +8,50 @@ const tailLayout = {
|
|||||||
wrapperCol: { offset: 6, span: 16 },
|
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 }) {
|
export default function FormPanel({ setShow }) {
|
||||||
const [form] = Form.useForm();
|
const [form] = Form.useForm();
|
||||||
@ -63,7 +106,6 @@ export default function FormPanel({ setShow }) {
|
|||||||
],
|
],
|
||||||
}}
|
}}
|
||||||
onFinish={(values) => {
|
onFinish={(values) => {
|
||||||
console.log("Success:", values);
|
|
||||||
setShow(true);
|
setShow(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -75,51 +117,9 @@ export default function FormPanel({ setShow }) {
|
|||||||
<Select
|
<Select
|
||||||
placeholder="请选择模式名称"
|
placeholder="请选择模式名称"
|
||||||
mode="multiple"
|
mode="multiple"
|
||||||
options={[
|
allowClear
|
||||||
"ACCESS-CM2",
|
options={options}
|
||||||
"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>
|
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
|
|
||||||
<Form.Item {...tailLayout}>
|
<Form.Item {...tailLayout}>
|
||||||
|
|||||||
@ -50,6 +50,9 @@ function ChartPanel() {
|
|||||||
onZero: false,
|
onZero: false,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffser: [0, 10],
|
symbolOffser: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@ -64,6 +67,9 @@ function ChartPanel() {
|
|||||||
show: true,
|
show: true,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffset: [0, 10],
|
symbolOffset: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
@ -38,7 +38,6 @@ export default function FormPanel({ setShow }) {
|
|||||||
],
|
],
|
||||||
}}
|
}}
|
||||||
onFinish={(values) => {
|
onFinish={(values) => {
|
||||||
console.log("Success:", values);
|
|
||||||
setShow(true);
|
setShow(true);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@ -30,7 +30,7 @@ XGBoos是基于梯度提升决策树方法的分类和回归模型。 LightGBM
|
|||||||
</div>
|
</div>
|
||||||
<div className="bottom-panel">{show && <ChartPanel />}</div>
|
<div className="bottom-panel">{show && <ChartPanel />}</div>
|
||||||
</div>
|
</div>
|
||||||
<Legend />
|
{/* <Legend /> */}
|
||||||
<RectangleLayer />
|
<RectangleLayer />
|
||||||
</MapLayout>
|
</MapLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,4 +1,7 @@
|
|||||||
import ReactECharts from "echarts-for-react";
|
import ReactECharts from "echarts-for-react";
|
||||||
|
import cls from "classnames";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
const years = [];
|
const years = [];
|
||||||
|
|
||||||
@ -27,6 +30,20 @@ const laBrudata = [
|
|||||||
];
|
];
|
||||||
|
|
||||||
function ChartPanel() {
|
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 = {
|
const option = {
|
||||||
title: {
|
title: {
|
||||||
// text: "Stacked Line",
|
// text: "Stacked Line",
|
||||||
@ -60,6 +77,9 @@ function ChartPanel() {
|
|||||||
onZero: false,
|
onZero: false,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffser: [0, 10],
|
symbolOffser: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@ -74,6 +94,9 @@ function ChartPanel() {
|
|||||||
show: true,
|
show: true,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffset: [0, 10],
|
symbolOffset: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
@ -115,7 +138,7 @@ function ChartPanel() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="chart-info-panel highlight">
|
<div className={cls("chart-info-panel", { highlight: isHighlight })}>
|
||||||
<ReactECharts
|
<ReactECharts
|
||||||
option={option}
|
option={option}
|
||||||
lazyUpdate={true}
|
lazyUpdate={true}
|
||||||
|
|||||||
@ -31,7 +31,6 @@ function CustomFlyTo() {
|
|||||||
dispatch.data.updateImageLayer({
|
dispatch.data.updateImageLayer({
|
||||||
labrador: true,
|
labrador: true,
|
||||||
});
|
});
|
||||||
dispatch.data.updateToolbar({ showPanel: true });
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -1,8 +1,8 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
import { useEffect, useMemo, useState } from "react";
|
||||||
import { ImageryLayer, useCesium } from "resium";
|
import { ImageryLayer, useCesium } from "resium";
|
||||||
import { WebMapServiceImageryProvider } from "cesium";
|
import { Cesium3DTile, WebMapServiceImageryProvider } from "cesium";
|
||||||
import { useInterval } from "ahooks";
|
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 url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms";
|
||||||
const nameList = [
|
const nameList = [
|
||||||
@ -12,13 +12,12 @@ const nameList = [
|
|||||||
].map((item) => "phitrellis:4_1_la_" + item);
|
].map((item) => "phitrellis:4_1_la_" + item);
|
||||||
|
|
||||||
function LabradorImageLayer() {
|
function LabradorImageLayer() {
|
||||||
|
const dispatch = useDispatch();
|
||||||
const { viewer } = useCesium();
|
const { viewer } = useCesium();
|
||||||
const { imageLayer } = useSelector((state) => state.data);
|
const { imageLayer } = useSelector((state) => state.data);
|
||||||
const [delay, setDelay] = useState(undefined);
|
const [delay, setDelay] = useState(undefined);
|
||||||
const [index, setIndex] = useState(0);
|
const [index, setIndex] = useState(0);
|
||||||
|
|
||||||
//viewer.clock?.shouldAnimate
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const { labrador } = imageLayer;
|
const { labrador } = imageLayer;
|
||||||
if (!!labrador) {
|
if (!!labrador) {
|
||||||
@ -46,12 +45,16 @@ function LabradorImageLayer() {
|
|||||||
key={`ImageryLayer-${index}`}
|
key={`ImageryLayer-${index}`}
|
||||||
imageryProvider={tempProvider}
|
imageryProvider={tempProvider}
|
||||||
show={true}
|
show={true}
|
||||||
|
style={{ color: Cesium.Color.RED }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
useInterval(() => {
|
useInterval(() => {
|
||||||
setIndex((index) => index + 1);
|
setIndex((index) => index + 1);
|
||||||
|
if (index === 0) {
|
||||||
|
dispatch.data.update({ showPanelHighlight: true });
|
||||||
|
}
|
||||||
|
|
||||||
if (index >= nameList.length) {
|
if (index >= nameList.length) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@ -59,6 +62,7 @@ function LabradorImageLayer() {
|
|||||||
setDelay(1000);
|
setDelay(1000);
|
||||||
}, (60 - nameList.length) * 1000);
|
}, (60 - nameList.length) * 1000);
|
||||||
setDelay(undefined);
|
setDelay(undefined);
|
||||||
|
dispatch.data.update({ showPanelHighlight: false });
|
||||||
}
|
}
|
||||||
}, delay);
|
}, delay);
|
||||||
|
|
||||||
|
|||||||
@ -41,7 +41,7 @@ export default function DomainOne() {
|
|||||||
<EntityLegend />
|
<EntityLegend />
|
||||||
<Legend />
|
<Legend />
|
||||||
<LabradorImageLayer />
|
<LabradorImageLayer />
|
||||||
<TibetImageLayer />
|
{/* <TibetImageLayer /> */}
|
||||||
</MapLayout>
|
</MapLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -105,6 +105,9 @@ function ChartPanel() {
|
|||||||
onZero: false,
|
onZero: false,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffser: [0, 10],
|
symbolOffser: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
@ -119,6 +122,9 @@ function ChartPanel() {
|
|||||||
show: true,
|
show: true,
|
||||||
symbol: ["none", "arrow"],
|
symbol: ["none", "arrow"],
|
||||||
symbolOffset: [0, 10],
|
symbolOffset: [0, 10],
|
||||||
|
lineStyle: {
|
||||||
|
color: "#04fbfd",
|
||||||
|
},
|
||||||
},
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|||||||
@ -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)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -2,7 +2,6 @@ import MapLayout from "@/components/map/Layout";
|
|||||||
import CustomToolbar from "@/components/common/CustomToolbar";
|
import CustomToolbar from "@/components/common/CustomToolbar";
|
||||||
import CustomClock from "@/components/common/CustomClock";
|
import CustomClock from "@/components/common/CustomClock";
|
||||||
import TextInfoPanel from "@/components/common/TextInfoPanel";
|
import TextInfoPanel from "@/components/common/TextInfoPanel";
|
||||||
import CustomFlyTo from "./CustomFlyTo";
|
|
||||||
import ChartPanel from "./ChartPanel";
|
import ChartPanel from "./ChartPanel";
|
||||||
import LandImageLayer from "./LandImageLayer";
|
import LandImageLayer from "./LandImageLayer";
|
||||||
import OceanImageLayer from "./OceanImageLayer";
|
import OceanImageLayer from "./OceanImageLayer";
|
||||||
@ -55,7 +54,7 @@ export default function DomainOne() {
|
|||||||
<div className="right-panel one">
|
<div className="right-panel one">
|
||||||
<ChartPanel />
|
<ChartPanel />
|
||||||
</div>
|
</div>
|
||||||
<WavePoint stationLon={88} stationLat={-85} />
|
<WavePoint stationLon={88} stationLat={33} />
|
||||||
</MapLayout>
|
</MapLayout>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -20,18 +20,12 @@ function Picker() {
|
|||||||
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
||||||
const longitudeString = Cesium.Math.toDegrees(
|
const longitudeString = Cesium.Math.toDegrees(
|
||||||
cartographic.longitude
|
cartographic.longitude
|
||||||
).toFixed(2);
|
).toFixed(4);
|
||||||
const latitudeString = Cesium.Math.toDegrees(
|
const latitudeString = Cesium.Math.toDegrees(
|
||||||
cartographic.latitude
|
cartographic.latitude
|
||||||
).toFixed(2);
|
).toFixed(4);
|
||||||
setLon(longitudeString);
|
setLon(longitudeString);
|
||||||
setLat(latitudeString);
|
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 {
|
} else {
|
||||||
// entity.label.show = false;
|
// entity.label.show = false;
|
||||||
}
|
}
|
||||||
@ -42,8 +36,8 @@ function Picker() {
|
|||||||
className="picker"
|
className="picker"
|
||||||
style={{ color: "white", position: "absolute", top: 0, right: 0 }}
|
style={{ color: "white", position: "absolute", top: 0, right: 0 }}
|
||||||
>
|
>
|
||||||
<p>
|
<p style={{ fontFamily: "cursive" }}>
|
||||||
longitudeString, latitudeString {lon}, {lat}
|
经度：{lon}°；纬度：{lat}°；
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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;
|
|
||||||
@ -157,6 +157,26 @@
|
|||||||
color: white;
|
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 {
|
.chart-info-panel {
|
||||||
|
|||||||
@ -1,9 +1,8 @@
|
|||||||
export const data = {
|
export const data = {
|
||||||
state: {
|
state: {
|
||||||
showSite: false,
|
showSite: false,
|
||||||
toolbar: {
|
showPanelHighlight: false,
|
||||||
showPanel: undefined,
|
toolbar: {},
|
||||||
},
|
|
||||||
imageLayer: {
|
imageLayer: {
|
||||||
labrador: undefined,
|
labrador: undefined,
|
||||||
indianOcean: undefined,
|
indianOcean: undefined,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user