diff --git a/package.json b/package.json index d4b2bee..88ef6aa 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "ahooks": "^3.7.8", "antd": "4.24.9", "cesium": "^1.108.0", + "classnames": "^2.3.2", "craco-cesium": "^1.2.0", "craco-less": "^3.0.1", "echarts": "^5.0.2", diff --git a/src/components/common/CustomToolbar/index.jsx b/src/components/common/CustomToolbar/index.jsx index c384d11..fb7816e 100644 --- a/src/components/common/CustomToolbar/index.jsx +++ b/src/components/common/CustomToolbar/index.jsx @@ -82,7 +82,7 @@ function CustomToolbar() { }; }, []); - const isAtRightEdge = mouseX >= window.innerWidth - 10; + const isAtRightEdge = mouseX >= window.innerWidth - 20; const iaClose = mouseX + 320 <= window.innerWidth; useEffect(() => { diff --git a/src/components/common/CustomToolbar/index.module.less b/src/components/common/CustomToolbar/index.module.less index fa8a2d4..0034894 100644 --- a/src/components/common/CustomToolbar/index.module.less +++ b/src/components/common/CustomToolbar/index.module.less @@ -1,5 +1,5 @@ .drawerToolbar :global { - transition: all 0.3s ease; + transition: all 0.6s ease; .ant-drawer-content-wrapper { .ant-drawer-content { diff --git a/src/components/domain/Five/ChartPanel.jsx b/src/components/domain/Five/ChartPanel.jsx index 4197b77..e98be8e 100644 --- a/src/components/domain/Five/ChartPanel.jsx +++ b/src/components/domain/Five/ChartPanel.jsx @@ -50,6 +50,9 @@ function ChartPanel() { onZero: false, symbol: ["none", "arrow"], symbolOffser: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, }, yAxis: { @@ -64,6 +67,9 @@ function ChartPanel() { show: true, symbol: ["none", "arrow"], symbolOffset: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, axisLabel: { show: true, diff --git a/src/components/domain/Five/FormPanel.jsx b/src/components/domain/Five/FormPanel.jsx index 4e30750..9fb1726 100644 --- a/src/components/domain/Five/FormPanel.jsx +++ b/src/components/domain/Five/FormPanel.jsx @@ -1,4 +1,4 @@ -import { Button, Form, Input, Select } from "antd"; +import { Button, Form, Select } from "antd"; const layout = { labelCol: { span: 6 }, @@ -8,7 +8,50 @@ const tailLayout = { 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 }) { const [form] = Form.useForm(); @@ -63,7 +106,6 @@ export default function FormPanel({ setShow }) { ], }} onFinish={(values) => { - console.log("Success:", values); setShow(true); }} > @@ -75,51 +117,9 @@ export default function FormPanel({ setShow }) { + allowClear + options={options} + /> diff --git a/src/components/domain/Four/ChartPanel.jsx b/src/components/domain/Four/ChartPanel.jsx index 4197b77..e98be8e 100644 --- a/src/components/domain/Four/ChartPanel.jsx +++ b/src/components/domain/Four/ChartPanel.jsx @@ -50,6 +50,9 @@ function ChartPanel() { onZero: false, symbol: ["none", "arrow"], symbolOffser: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, }, yAxis: { @@ -64,6 +67,9 @@ function ChartPanel() { show: true, symbol: ["none", "arrow"], symbolOffset: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, axisLabel: { show: true, diff --git a/src/components/domain/Four/FormPanel.jsx b/src/components/domain/Four/FormPanel.jsx index b1aec62..ee5a8fe 100644 --- a/src/components/domain/Four/FormPanel.jsx +++ b/src/components/domain/Four/FormPanel.jsx @@ -38,7 +38,6 @@ export default function FormPanel({ setShow }) { ], }} onFinish={(values) => { - console.log("Success:", values); setShow(true); }} > diff --git a/src/components/domain/Four/index.jsx b/src/components/domain/Four/index.jsx index 3d1e91a..43e0751 100644 --- a/src/components/domain/Four/index.jsx +++ b/src/components/domain/Four/index.jsx @@ -30,7 +30,7 @@ XGBoos是基于梯度提升决策树方法的分类和回归模型。 LightGBM
{show && }
- + {/* */} ); diff --git a/src/components/domain/One/ChartPanel.jsx b/src/components/domain/One/ChartPanel.jsx index 3ab5150..d7f4e8f 100644 --- a/src/components/domain/One/ChartPanel.jsx +++ b/src/components/domain/One/ChartPanel.jsx @@ -1,4 +1,7 @@ import ReactECharts from "echarts-for-react"; +import cls from "classnames"; +import { useSelector } from "react-redux"; +import { useEffect, useState } from "react"; const years = []; @@ -27,6 +30,20 @@ const laBrudata = [ ]; 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 = { title: { // text: "Stacked Line", @@ -60,6 +77,9 @@ function ChartPanel() { onZero: false, symbol: ["none", "arrow"], symbolOffser: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, }, yAxis: { @@ -74,6 +94,9 @@ function ChartPanel() { show: true, symbol: ["none", "arrow"], symbolOffset: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, axisLabel: { show: true, @@ -115,7 +138,7 @@ function ChartPanel() { }; return ( -
+
"phitrellis:4_1_la_" + item); function LabradorImageLayer() { + const dispatch = useDispatch(); const { viewer } = useCesium(); const { imageLayer } = useSelector((state) => state.data); const [delay, setDelay] = useState(undefined); const [index, setIndex] = useState(0); - //viewer.clock?.shouldAnimate - useEffect(() => { const { labrador } = imageLayer; if (!!labrador) { @@ -46,12 +45,16 @@ function LabradorImageLayer() { key={`ImageryLayer-${index}`} imageryProvider={tempProvider} show={true} + style={{ color: Cesium.Color.RED }} /> ); }); useInterval(() => { setIndex((index) => index + 1); + if (index === 0) { + dispatch.data.update({ showPanelHighlight: true }); + } if (index >= nameList.length) { setTimeout(() => { @@ -59,6 +62,7 @@ function LabradorImageLayer() { setDelay(1000); }, (60 - nameList.length) * 1000); setDelay(undefined); + dispatch.data.update({ showPanelHighlight: false }); } }, delay); diff --git a/src/components/domain/One/index.jsx b/src/components/domain/One/index.jsx index f4e426c..d68bc2c 100644 --- a/src/components/domain/One/index.jsx +++ b/src/components/domain/One/index.jsx @@ -41,7 +41,7 @@ export default function DomainOne() { - + {/* */} ); } diff --git a/src/components/domain/Three/ChartPanel.jsx b/src/components/domain/Three/ChartPanel.jsx index f3fb75c..d34b750 100644 --- a/src/components/domain/Three/ChartPanel.jsx +++ b/src/components/domain/Three/ChartPanel.jsx @@ -105,6 +105,9 @@ function ChartPanel() { onZero: false, symbol: ["none", "arrow"], symbolOffser: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, }, yAxis: { @@ -119,6 +122,9 @@ function ChartPanel() { show: true, symbol: ["none", "arrow"], symbolOffset: [0, 10], + lineStyle: { + color: "#04fbfd", + }, }, axisLabel: { show: true, diff --git a/src/components/domain/Three/CustomFlyTo.jsx b/src/components/domain/Three/CustomFlyTo.jsx deleted file mode 100644 index c217d79..0000000 --- a/src/components/domain/Three/CustomFlyTo.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Cartesian3 } from "cesium"; -import { CameraFlyTo } from "resium"; - -export default function CustomFlyTo() { - return ( - - ); -} diff --git a/src/components/domain/Three/index.jsx b/src/components/domain/Three/index.jsx index a16cf6c..d35c643 100644 --- a/src/components/domain/Three/index.jsx +++ b/src/components/domain/Three/index.jsx @@ -2,7 +2,6 @@ import MapLayout from "@/components/map/Layout"; import CustomToolbar from "@/components/common/CustomToolbar"; import CustomClock from "@/components/common/CustomClock"; import TextInfoPanel from "@/components/common/TextInfoPanel"; -import CustomFlyTo from "./CustomFlyTo"; import ChartPanel from "./ChartPanel"; import LandImageLayer from "./LandImageLayer"; import OceanImageLayer from "./OceanImageLayer"; @@ -55,7 +54,7 @@ export default function DomainOne() {
- +
diff --git a/src/components/map/Layout/CustomFlyTo/AntarcticaFlytoQTP.jsx b/src/components/map/Layout/CustomFlyTo/AntarcticaFlytoQTP.jsx deleted file mode 100644 index 3bf3d38..0000000 --- a/src/components/map/Layout/CustomFlyTo/AntarcticaFlytoQTP.jsx +++ /dev/null @@ -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; diff --git a/src/components/map/Layout/CustomFlyTo/LabFlytoQTP.jsx b/src/components/map/Layout/CustomFlyTo/LabFlytoQTP.jsx deleted file mode 100644 index c6cac65..0000000 --- a/src/components/map/Layout/CustomFlyTo/LabFlytoQTP.jsx +++ /dev/null @@ -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; diff --git a/src/components/map/Layout/CustomFlyTo/index.jsx b/src/components/map/Layout/CustomFlyTo/index.jsx deleted file mode 100644 index 0e30149..0000000 --- a/src/components/map/Layout/CustomFlyTo/index.jsx +++ /dev/null @@ -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 ; - - case "2": - return ; - - case "3": - // 大西洋 - return ( - - ); - default: - // 青藏高原 - return ( - - ); - } -} - -export default CustomFlyTo; diff --git a/src/components/map/Layout/CustomToolbar.jsx b/src/components/map/Layout/CustomToolbar.jsx deleted file mode 100644 index a444bd1..0000000 --- a/src/components/map/Layout/CustomToolbar.jsx +++ /dev/null @@ -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 ( -
-
- 返回首页 -
- {/* node} - options={[ - { - value: true, - label: "开启展板", - }, - { - value: false, - label: "关闭展板", - }, - ]} - /> -
- ); -} - -export default CustomToolbar; diff --git a/src/components/map/Layout/Entities/Point/PathAntarcticaToQTP.jsx b/src/components/map/Layout/Entities/Point/PathAntarcticaToQTP.jsx deleted file mode 100644 index b5b70ac..0000000 --- a/src/components/map/Layout/Entities/Point/PathAntarcticaToQTP.jsx +++ /dev/null @@ -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 ( - - - - ); -} - -export default PathAntarcticaToQTP; diff --git a/src/components/map/Layout/Entities/Point/PathLabToQTP.jsx b/src/components/map/Layout/Entities/Point/PathLabToQTP.jsx deleted file mode 100644 index 09efdbe..0000000 --- a/src/components/map/Layout/Entities/Point/PathLabToQTP.jsx +++ /dev/null @@ -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 ( - - - - ); -} - -export default PathLabToQTP; diff --git a/src/components/map/Layout/Entities/Point/Point.jsx b/src/components/map/Layout/Entities/Point/Point.jsx deleted file mode 100644 index 4805054..0000000 --- a/src/components/map/Layout/Entities/Point/Point.jsx +++ /dev/null @@ -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 ( - - - - ); -} - -export default Point; diff --git a/src/components/map/Layout/Entities/Point/index.jsx b/src/components/map/Layout/Entities/Point/index.jsx deleted file mode 100644 index 9a1ff54..0000000 --- a/src/components/map/Layout/Entities/Point/index.jsx +++ /dev/null @@ -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" ? ( - - ) : type === "2" ? ( - - ) : ( - <> - ); -} - -export default PointLayout; diff --git a/src/components/map/Layout/Entities/WavePoint/Wavepoint.jsx b/src/components/map/Layout/Entities/WavePoint/Wavepoint.jsx deleted file mode 100644 index cfa3e45..0000000 --- a/src/components/map/Layout/Entities/WavePoint/Wavepoint.jsx +++ /dev/null @@ -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 = ( - - - - ); - - 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 = ( - - - - ); - }, data.eachInterval); - - return ( - - {point1} - {point2} - - ); -} - -export default WavePoint; diff --git a/src/components/map/Layout/Entities/WavePoint/index.jsx b/src/components/map/Layout/Entities/WavePoint/index.jsx deleted file mode 100644 index cab1f76..0000000 --- a/src/components/map/Layout/Entities/WavePoint/index.jsx +++ /dev/null @@ -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 ( - - - - - ); - // 南极 青藏高原 - else if (type === "2") - return ( - - - - - ); - else return <>; -} - -export default WavePoint; diff --git a/src/components/map/Layout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx b/src/components/map/Layout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx deleted file mode 100644 index 91192b4..0000000 --- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/SstAnnomary.jsx +++ /dev/null @@ -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 ( -
- -
- ); -} - -export default SstAnnomary; diff --git a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx b/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx deleted file mode 100644 index 0e09de7..0000000 --- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TPTT.jsx +++ /dev/null @@ -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 ( -
- -
- ); -} - -export default TPTT; diff --git a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx b/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx deleted file mode 100644 index 7c52ae3..0000000 --- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/TripolarTemperature.jsx +++ /dev/null @@ -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 ( -
- -
- ); -} - -export default TripolarTemperature; diff --git a/src/components/map/Layout/InfoLayout/ChartInfoPanel/index.jsx b/src/components/map/Layout/InfoLayout/ChartInfoPanel/index.jsx deleted file mode 100644 index 20a55d8..0000000 --- a/src/components/map/Layout/InfoLayout/ChartInfoPanel/index.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import SstAnnomary from "./SstAnnomary"; -import TripolarTemperature from "./TripolarTemperature"; -import TPTT from "./TPTT"; - -function ChartInfoPanel({ type }) { - switch (type) { - case "sst": - return ; - case "tripolar": - return ; - case "tptt": - return ; - default: - return <>; - } -} - -export default ChartInfoPanel; diff --git a/src/components/map/Layout/InfoLayout/TextInfoPanel/index.jsx b/src/components/map/Layout/InfoLayout/TextInfoPanel/index.jsx deleted file mode 100644 index 108d766..0000000 --- a/src/components/map/Layout/InfoLayout/TextInfoPanel/index.jsx +++ /dev/null @@ -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 ( -
-
- {title} -
-
- - {contentText} - -
-
- ); -} - -export default TextInfoPanel; diff --git a/src/components/map/Layout/Legends/Legend41.jsx b/src/components/map/Layout/Legends/Legend41.jsx deleted file mode 100644 index 050c2d3..0000000 --- a/src/components/map/Layout/Legends/Legend41.jsx +++ /dev/null @@ -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 ( -
-
拉布拉多海海表温度夏季年代际异常值
-
- {colorBar.map((color, index) => { - return ( -
- ); - })} -
-
- {[-2.4, -1.6, -0.8, 0, 0.8, 1.6, 2.4, ""].map((item, index) => { - return ( -
- {item} -
- ); - })} -
-
- ); -} - -export default LegendLab; diff --git a/src/components/map/Layout/Legends/Legend42.jsx b/src/components/map/Layout/Legends/Legend42.jsx deleted file mode 100644 index 08b00e2..0000000 --- a/src/components/map/Layout/Legends/Legend42.jsx +++ /dev/null @@ -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 ( -
-
-
青藏高原感热通量
-
-
- {[-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 ( -
- {item} -
- ); - } - )} -
-
- {colorBar2.map((color, index) => { - return ( -
- ); - })} -
-
-
-
-
青藏高原降水量
-
-
- {[-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 ( -
- {item} -
- ); - } - )} -
-
- {colorBar.map((color, index) => { - return ( -
- ); - })} -
-
-
-
- ); -} - -export default Legend42; diff --git a/src/components/map/Layout/Legends/Legend45.jsx b/src/components/map/Layout/Legends/Legend45.jsx deleted file mode 100644 index 27bb888..0000000 --- a/src/components/map/Layout/Legends/Legend45.jsx +++ /dev/null @@ -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 ( -
-
三极联动影响东亚夏季风
-
- {colorBar45.map((color, index) => { - return ( -
- ); - })} -
-
- {legendText45.map((item, index) => { - return ( -
- {item} -
- ); - })} -
-
- ); -} - -export default Legend45; diff --git a/src/components/map/Layout/Legends/index.jsx b/src/components/map/Layout/Legends/index.jsx deleted file mode 100644 index 05aedd1..0000000 --- a/src/components/map/Layout/Legends/index.jsx +++ /dev/null @@ -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 ; - if (type === "2") return ; - else if (type === "5") return ; - else return <>; -} - -export default Legends; diff --git a/src/components/map/Layout/Legends/index.module.less b/src/components/map/Layout/Legends/index.module.less deleted file mode 100644 index d5ffa87..0000000 --- a/src/components/map/Layout/Legends/index.module.less +++ /dev/null @@ -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; - } - } -} diff --git a/src/components/map/Layout/Picker.jsx b/src/components/map/Layout/Picker.jsx index 53cbe41..5d115a6 100644 --- a/src/components/map/Layout/Picker.jsx +++ b/src/components/map/Layout/Picker.jsx @@ -20,18 +20,12 @@ function Picker() { const cartographic = Cesium.Cartographic.fromCartesian(cartesian); const longitudeString = Cesium.Math.toDegrees( cartographic.longitude - ).toFixed(2); + ).toFixed(4); const latitudeString = Cesium.Math.toDegrees( cartographic.latitude - ).toFixed(2); + ).toFixed(4); setLon(longitudeString); 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 { // entity.label.show = false; } @@ -42,8 +36,8 @@ function Picker() { className="picker" style={{ color: "white", position: "absolute", top: 0, right: 0 }} > -

- longitudeString, latitudeString {lon}, {lat} +

+ 经度：{lon}°；纬度：{lat}°；

); diff --git a/src/components/map/Layout/index copy.jsx b/src/components/map/Layout/index copy.jsx deleted file mode 100644 index 632fd3d..0000000 --- a/src/components/map/Layout/index copy.jsx +++ /dev/null @@ -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 ( - - - - - - - - - - {/* */} - - - - - - - - - ); -} - -export default MapLayout; diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less index 7ca1291..f114b22 100644 --- a/src/components/map/Layout/index.module.less +++ b/src/components/map/Layout/index.module.less @@ -157,6 +157,26 @@ 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 { diff --git a/src/models/data.js b/src/models/data.js index bc69761..04f40bb 100644 --- a/src/models/data.js +++ b/src/models/data.js @@ -1,9 +1,8 @@ export const data = { state: { showSite: false, - toolbar: { - showPanel: undefined, - }, + showPanelHighlight: false, + toolbar: {}, imageLayer: { labrador: undefined, indianOcean: undefined, diff --git a/yarn.lock b/yarn.lock index 650c624..01d410d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5462,6 +5462,7 @@ __metadata: ahooks: ^3.7.8 antd: 4.24.9 cesium: ^1.108.0 + classnames: ^2.3.2 craco-cesium: ^1.2.0 craco-less: ^3.0.1 echarts: ^5.0.2