diff --git a/src/components/common/CustomClock/index.jsx b/src/components/common/CustomClock/index.jsx index bc2865a..22ac3be 100644 --- a/src/components/common/CustomClock/index.jsx +++ b/src/components/common/CustomClock/index.jsx @@ -1,9 +1,10 @@ +import { ClockRange, JulianDate } from "cesium"; import { Clock } from "resium"; // 起始时间 -const start = Cesium.JulianDate.fromDate(new Date()); +const start = JulianDate.fromDate(new Date()); // 结束时间 -const stop = Cesium.JulianDate.addSeconds(start, 60, new Cesium.JulianDate()); +const stop = JulianDate.addSeconds(start, 30, new JulianDate()); function CustomClock() { return ( @@ -13,7 +14,7 @@ function CustomClock() { startTime={start.clone()} stopTime={stop.clone()} currentTime={start.clone()} - clockRange={Cesium.ClockRange.LOOP_STOP} + clockRange={ClockRange.LOOP_STOP} // onTick={(clock) => { // if (!clock.shouldAnimate) return; // }} diff --git a/src/components/common/WavePoint/index.jsx b/src/components/common/WavePoint/index.jsx index 6742841..66ff5b3 100644 --- a/src/components/common/WavePoint/index.jsx +++ b/src/components/common/WavePoint/index.jsx @@ -1,6 +1,14 @@ import { Fragment } from "react"; -import { Entity, EllipseGraphics } from "resium"; +import { Entity, EllipseGraphics, LabelGraphics } from "resium"; import wave from "@/assets/wave.png"; +import { + CallbackProperty, + Cartesian2, + Cartesian3, + Color, + ImageMaterialProperty, + LabelStyle, +} from "cesium"; function WavePoint({ stationLon, @@ -10,6 +18,7 @@ function WavePoint({ eachInterval = 1500, maxR = 3600 * 100, color = "WHITE", + labelText, }) { const data = { stationLon, // 经度 @@ -43,25 +52,21 @@ function WavePoint({ const point1 = ( {point1} {point2} + + {labelText && ( + + {" "} + + )} ); } diff --git a/src/components/domain/Four/Labels.jsx b/src/components/domain/Four/Labels.jsx new file mode 100644 index 0000000..5f60bc3 --- /dev/null +++ b/src/components/domain/Four/Labels.jsx @@ -0,0 +1,80 @@ +import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium"; +import { Fragment } from "react"; +import { Entity, LabelGraphics } from "resium"; + +const points = [ + { + position: [13, -70, 30, -67], + name: "sic_s", + }, + { + position: [93, 29, 99, 35], + name: "sc_tp", + }, + { + position: [68, 48, 76, 52], + name: "sc_ea", + }, + { + position: [150, 60, 160, 70], + name: "ts_ac", + }, + { + position: [130, 20, 140, 28], + name: "ts_wp", + }, + { + position: [150, 12, 175, 22], + name: "ts_np", + }, + { + position: [-110, 20, -95, 35], + name: "ts_arn", + }, + { + position: [10, -12, 45, -2], + name: "ts_af", + }, + { position: [80, 10, 110, 20], name: "ts_io" }, + { position: [-150, -10, -40, 5], name: "ts_ep" }, + { position: [65, -62, 90, -57], name: "ts_aa" }, + { + position: [145, -30, 155, -20], + name: "ts_ea", + }, + { position: [165, -45, 180, -30], name: "ts_nz" }, + { position: [-140, -60, -110, -45], name: "ts_sp" }, + { position: [-70, -78, -50, -70], name: "ts_wd" }, +]; + +function Labels() { + return ( + + {points.map((point, index) => { + const { position, name } = point; + const [x, y, z, m] = position; + const lon = (x + z) / 2; + const lat = (y + m) / 2; + + return ( + + + + ); + })} + + ); +} + +export default Labels; diff --git a/src/components/domain/Four/RectangleLayer.jsx b/src/components/domain/Four/RectangleLayer.jsx index 2fc119d..5e88465 100644 --- a/src/components/domain/Four/RectangleLayer.jsx +++ b/src/components/domain/Four/RectangleLayer.jsx @@ -1,21 +1,21 @@ import { Rectangle, Color, Math as CesiumMath } from "cesium"; import { Entity, RectangleGraphics } from "resium"; const points = [ - [13, -70, 30, -67], - [93, 29, 99, 35], - [68, 48, 76, 52], - [150, 60, 160, 70], - [130, 20, 140, 28], - [150, 12, 175, 22], - [-110, 20, -95, 35], - [10, -12, 45, -2], - [80, 10, 110, 20], - [-150, -10, -40, 5], - [65, -62, 90, -57], - [145, -30, 155, -20], - [165, -45, 180, -30], - [-140, -60, -110, -45], - [-70, -78, -50, -70], + [13, -70, 30, -67], //sic_s + [93, 29, 99, 35], //sc_tp + [68, 48, 76, 52], //sc_ea + [150, 60, 160, 70], //ts_ac + [130, 20, 140, 28], //wp + [150, 12, 175, 22], //np + [-110, 20, -95, 35], //arn + [10, -12, 45, -2], // af + [80, 10, 110, 20], // io + [-150, -10, -40, 5], //ep + [65, -62, 90, -57], // aa + [145, -30, 155, -20], // ea + [165, -45, 180, -30], // nz + [-140, -60, -110, -45], // sp + [-70, -78, -50, -70], // wd ]; export default function RectangleLayer() { return points.map((p, i) => ( diff --git a/src/components/domain/Four/index.jsx b/src/components/domain/Four/index.jsx index 43e0751..e2d70bf 100644 --- a/src/components/domain/Four/index.jsx +++ b/src/components/domain/Four/index.jsx @@ -8,6 +8,7 @@ import ChartPanel from "./ChartPanel"; import RectangleLayer from "./RectangleLayer"; import { useState } from "react"; import Legend from "./Legend"; +import Labels from "./Labels"; export default function DomainFour() { const [show, setShow] = useState(false); @@ -31,6 +32,7 @@ XGBoos是基于梯度提升决策树方法的分类和回归模型。 LightGBM
{show && }
{/* */} + ); diff --git a/src/components/domain/One/Barotorpic.jsx b/src/components/domain/One/Barotorpic.jsx index e492bb9..a18b571 100644 --- a/src/components/domain/One/Barotorpic.jsx +++ b/src/components/domain/One/Barotorpic.jsx @@ -1,6 +1,6 @@ import { useCallback, useState } from "react"; -import { Entity, LabelGraphics, EllipseGraphics, useCesium } from "resium"; -import { Color, Cartesian3, LabelStyle } from "cesium"; +import { Entity, EllipseGraphics, useCesium } from "resium"; +import { Color, Cartesian3 } from "cesium"; import { useInterval } from "ahooks"; function Barotropic() { @@ -14,7 +14,7 @@ function Barotropic() { stopTime.secondsOfDay - currentTime.secondsOfDay ); - if (leftTime < 10) { + if (leftTime < 5) { setShow(true); } else if (show) setShow(false); }, [show]); @@ -34,16 +34,6 @@ function Barotropic() { extrudedHeight={1000000.0} rotation={0} /> - ); } diff --git a/src/components/domain/One/CustomFlyTo.jsx b/src/components/domain/One/CustomFlyTo.jsx index 9ebf4b6..56aad37 100644 --- a/src/components/domain/One/CustomFlyTo.jsx +++ b/src/components/domain/One/CustomFlyTo.jsx @@ -1,75 +1,64 @@ +import { Cartesian3, EasingFunction, Math } from "cesium"; import { useDispatch } from "react-redux"; -import { Camera, useCesium } from "resium"; +import { useCesium } from "resium"; function CustomFlyTo() { const { viewer } = useCesium(); const { camera } = viewer; const dispatch = useDispatch(); - function cameraFlyToLine(adjustPitch) { + function cameraFlyToLine() { + const step1 = { + destination: Cartesian3.fromDegrees(-10, 50, 6000000), + duration: 5, + complete: () => { + camera.flyTo(step2); + }, + easingFunction: EasingFunction.LINEAR_NONE, + }; + + const step2 = { + destination: Cartesian3.fromDegrees(35, 49, 10000000), + duration: 8, + complete: () => { + camera.flyTo(barotorpic); + }, + easingFunction: EasingFunction.LINEAR_NONE, + }; + // barotorpic const barotorpic = { - destination: Cesium.Cartesian3.fromDegrees(80, 46, 15000000), - duration: 30, + destination: Cartesian3.fromDegrees(75, 48, 15000000), + duration: 7, complete: () => {}, + easingFunction: EasingFunction.LINEAR_NONE, + orientation: { + heading: 6.283, + pitch: -1.569, + roll: 0.45, + }, }; // 俯视看箭头上升 const sideViewOptions = { - destination: Cesium.Cartesian3.fromDegrees(-50, 46, 2000000), + destination: Cartesian3.fromDegrees(-50, 46, 2000000), duration: 5, orientation: { - heading: Cesium.Math.toRadians(-15.0), - pitch: -Cesium.Math.PI_OVER_FOUR, + heading: Math.toRadians(-15.0), + pitch: -Math.PI_OVER_FOUR, roll: 0.0, }, complete: () => { viewer.clock.shouldAnimate = true; setTimeout(function () { - camera.flyTo(barotorpic); - }, 1000); + camera.flyTo(step1); + }, 5000); dispatch.data.updateImageLayer({ labrador: 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(sideViewOptions); } cameraFlyToLine(); diff --git a/src/components/domain/One/Cyclone.jsx b/src/components/domain/One/Cyclone.jsx index 1ccc38f..7089e6a 100644 --- a/src/components/domain/One/Cyclone.jsx +++ b/src/components/domain/One/Cyclone.jsx @@ -1,6 +1,14 @@ import { Fragment, useCallback } from "react"; -import { Entity, ModelGraphics, useCesium } from "resium"; +import { Entity, LabelGraphics, ModelGraphics, useCesium } from "resium"; import arrowRound from "@/assets/arrow_round.glb"; +import { + CallbackProperty, + Cartesian2, + Cartesian3, + Color, + ColorBlendMode, + LabelStyle, +} from "cesium"; let totalSeconds = 60; let numberOfSamples = 120; @@ -44,18 +52,18 @@ function Cyclone() { return _time; }, [viewer]); - const anticycloneColor = Cesium.Color.fromCssColorString("#f70000"); - const cycloneColor = Cesium.Color.fromCssColorString("#00AC4D"); + const anticycloneColor = Color.fromCssColorString("#f70000"); + const cycloneColor = Color.fromCssColorString("#00AC4D"); return ( @@ -69,16 +77,26 @@ function Cyclone() { // }), // }} color={anticycloneColor} - colorBlendMode={Cesium.ColorBlendMode.REPLACE} + colorBlendMode={ColorBlendMode.REPLACE} + /> + @@ -86,16 +104,16 @@ function Cyclone() { uri={arrowRound} minimumPixelSize={128} color={cycloneColor} - colorBlendMode={Cesium.ColorBlendMode.REPLACE} + colorBlendMode={ColorBlendMode.REPLACE} /> @@ -103,16 +121,16 @@ function Cyclone() { uri={arrowRound} minimumPixelSize={128} color={anticycloneColor} - colorBlendMode={Cesium.ColorBlendMode.REPLACE} + colorBlendMode={ColorBlendMode.REPLACE} /> @@ -120,16 +138,16 @@ function Cyclone() { uri={arrowRound} minimumPixelSize={128} color={cycloneColor} - colorBlendMode={Cesium.ColorBlendMode.REPLACE} + colorBlendMode={ColorBlendMode.REPLACE} /> @@ -137,16 +155,16 @@ function Cyclone() { uri={arrowRound} minimumPixelSize={128} color={anticycloneColor} - colorBlendMode={Cesium.ColorBlendMode.REPLACE} + colorBlendMode={ColorBlendMode.REPLACE} /> @@ -154,7 +172,7 @@ function Cyclone() { uri={arrowRound} minimumPixelSize={128} color={anticycloneColor} - colorBlendMode={Cesium.ColorBlendMode.REPLACE} + colorBlendMode={ColorBlendMode.REPLACE} /> diff --git a/src/components/domain/One/JJAImageLayer.jsx b/src/components/domain/One/JJAImageLayer.jsx new file mode 100644 index 0000000..0ea73e3 --- /dev/null +++ b/src/components/domain/One/JJAImageLayer.jsx @@ -0,0 +1,55 @@ +import { Fragment, useMemo } from "react"; +import { ImageryLayer } from "resium"; +import { WebMapServiceImageryProvider } from "cesium"; + +const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; + +const name1 = "phitrellis:4_1_sst_JJA_G_dif"; +const name2 = "phitrellis:4_1_t2m_JJA_TP_dif "; + +function JJAImageLayer() { + const tempProvider1 = useMemo( + () => + new WebMapServiceImageryProvider({ + url: url, + layers: name1, + parameters: { + service: "WMS", + format: "image/png", + transparent: true, + }, + }), + [name1, url] + ); + + const tempProvider2 = useMemo( + () => + new WebMapServiceImageryProvider({ + url: url, + layers: name2, + parameters: { + service: "WMS", + format: "image/png", + transparent: true, + }, + }), + [name2, url] + ); + + return ( + + + + + ); +} + +export default JJAImageLayer; diff --git a/src/components/domain/One/Labels.jsx b/src/components/domain/One/Labels.jsx new file mode 100644 index 0000000..5be5ef7 --- /dev/null +++ b/src/components/domain/One/Labels.jsx @@ -0,0 +1,63 @@ +import { Entity, LabelGraphics, useCesium } from "resium"; +import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium"; +import { Fragment, useCallback, useState } from "react"; +import { useInterval } from "ahooks"; + +function Labels() { + const { viewer } = useCesium(); + + const [show, setShow] = useState(false); + + const showAnimate = useCallback(() => { + const { currentTime, stopTime } = viewer.clock; + const leftTime = Math.floor( + stopTime.secondsOfDay - currentTime.secondsOfDay + ); + + if (leftTime < 5) { + setShow(true); + } else if (show) setShow(false); + }, [show]); + + useInterval(showAnimate, 100); + + return ( + + + + + + + + + + + + ); +} + +export default Labels; diff --git a/src/components/domain/One/LabradorImageLayer.jsx b/src/components/domain/One/LabradorImageLayer.jsx deleted file mode 100644 index 79a67ac..0000000 --- a/src/components/domain/One/LabradorImageLayer.jsx +++ /dev/null @@ -1,67 +0,0 @@ -import { useEffect, useMemo, useState } from "react"; -import { ImageryLayer, useCesium } from "resium"; -import { WebMapServiceImageryProvider } from "cesium"; -import { useInterval } from "ahooks"; -import { useDispatch, useSelector } from "react-redux"; - -const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; -const nameList = [ - 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, - 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, - 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, -].map((item) => "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); - - useEffect(() => { - const { labrador } = imageLayer; - if (!!labrador) { - setDelay((60 / nameList.length) * 1000); - setIndex(0); - } - }, [imageLayer]); - - const layers = nameList.map((name, index) => { - const tempProvider = useMemo( - () => - new WebMapServiceImageryProvider({ - url: url, - layers: name, - parameters: { - service: "WMS", - format: "image/png", - transparent: true, - }, - }), - [name, url] - ); - - return ( - - ); - }); - - useInterval(() => { - setIndex((index) => index + 1); - - if (index >= nameList.length) { - setIndex(0); - setDelay((60 / nameList.length) * 1000); - } - }, delay); - - if (!viewer.clock?.shouldAnimate) return; - - return layers[index]; -} - -export default LabradorImageLayer; diff --git a/src/components/domain/One/Legend.jsx b/src/components/domain/One/Legend.jsx index e3e6d8c..30ef9b8 100644 --- a/src/components/domain/One/Legend.jsx +++ b/src/components/domain/One/Legend.jsx @@ -36,7 +36,7 @@ const colorBar = [ function Legend() { return (
-
拉布拉多海海表温度夏季年代际异常值
+
夏季温度年代际异常值
{colorBar.map((color, index) => { return ( diff --git a/src/components/domain/One/PlateauPolygon.jsx b/src/components/domain/One/PlateauPolygon.jsx index b593211..09f6f1f 100644 --- a/src/components/domain/One/PlateauPolygon.jsx +++ b/src/components/domain/One/PlateauPolygon.jsx @@ -1,6 +1,7 @@ import { useCallback, useState } from "react"; import { Entity, PolygonGraphics, useCesium } from "resium"; import { useInterval } from "ahooks"; +import { Cartesian3, Color } from "cesium"; function PlateauPolygon() { const { viewer } = useCesium(); @@ -22,11 +23,11 @@ function PlateauPolygon() { return ( ); diff --git a/src/components/domain/One/Point.jsx b/src/components/domain/One/Point.jsx index 3645b8f..47df405 100644 --- a/src/components/domain/One/Point.jsx +++ b/src/components/domain/One/Point.jsx @@ -1,14 +1,25 @@ import { useState } from "react"; import { Entity, PointGraphics, useCesium } from "resium"; import { useInterval } from "ahooks"; +import { + Cartesian3, + Color, + JulianDate, + LagrangePolynomialApproximation, + PolylineDashMaterialProperty, + SampledPositionProperty, + TimeInterval, + TimeIntervalCollection, + VelocityOrientationProperty, +} from "cesium"; // 从拉布拉多海到青藏高原 const dataLabToQTP = [ - { longitude: -62, latitude: 69, height: 1000000, time: 10 }, - { longitude: -20, latitude: 55, height: 1000000, time: 20 }, - { longitude: 29, latitude: 49, height: 1000000, time: 30 }, - { longitude: 62, latitude: 45, height: 1000000, time: 40 }, - { longitude: 98, latitude: 48, height: 1000000, time: 50 }, + { longitude: -62, latitude: 69, height: 1000000, time: 5 }, + { longitude: -20, latitude: 55, height: 1000000, time: 10 }, + { longitude: 29, latitude: 49, height: 1000000, time: 15 }, + { longitude: 62, latitude: 45, height: 1000000, time: 20 }, + { longitude: 98, latitude: 48, height: 1000000, time: 25 }, ]; function Point() { @@ -18,9 +29,9 @@ function Point() { const start = viewer.clock.startTime; const stop = viewer.clock.stopTime; - const pathMaterial = new Cesium.PolylineDashMaterialProperty({ + const pathMaterial = new PolylineDashMaterialProperty({ dashLength: 20, - color: new Cesium.Color(4 / 255, 251 / 255, 253 / 255), + color: new Color(4 / 255, 251 / 255, 253 / 255), }); useInterval(() => { @@ -33,14 +44,10 @@ function Point() { * {SampledPositionProperty|*} */ function createProperty(source) { - let property = new Cesium.SampledPositionProperty(); + let property = new SampledPositionProperty(); for (let i = 0; i < source.length; i++) { - let time = Cesium.JulianDate.addSeconds( - start, - source[i].time, - new Cesium.JulianDate() - ); - let position = Cesium.Cartesian3.fromDegrees( + let time = JulianDate.addSeconds(start, source[i].time, new JulianDate()); + let position = Cartesian3.fromDegrees( source[i].longitude, source[i].latitude, source[i].height @@ -50,7 +57,7 @@ function Point() { } property.setInterpolationOptions({ interpolationDegree: 10, - interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, + interpolationAlgorithm: LagrangePolynomialApproximation, }); return property; @@ -63,14 +70,14 @@ function Point() { id={"point"} position={property} availability={ - new Cesium.TimeIntervalCollection([ - new Cesium.TimeInterval({ + new TimeIntervalCollection([ + new TimeInterval({ start: start, stop: stop, }), ]) } - orientation={new Cesium.VelocityOrientationProperty(property)} + orientation={new VelocityOrientationProperty(property)} path={{ resolution: 1, material: pathMaterial, @@ -82,9 +89,9 @@ function Point() { > diff --git a/src/components/domain/One/TibetImageLayer.jsx b/src/components/domain/One/TibetImageLayer.jsx deleted file mode 100644 index 80d1319..0000000 --- a/src/components/domain/One/TibetImageLayer.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import { useEffect, useMemo, useState } from "react"; -import { ImageryLayer, useCesium } from "resium"; -import { WebMapServiceImageryProvider } from "cesium"; -import { useInterval } from "ahooks"; -import { useSelector } from "react-redux"; - -const url = "http://analysis.tpdc.ac.cn/gs/geoserver/phitrellis/wms"; -const nameList = [ - 1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989, 1990, 1991, 1992, - 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, - 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, -].map((item) => "phitrellis:4_1_tp_" + item); - -function TibetImageLayer() { - const { viewer } = useCesium(); - const { imageLayer } = useSelector((state) => state.data); - const [delay, setDelay] = useState(undefined); - const [index, setIndex] = useState(0); - - useEffect(() => { - const { labrador } = imageLayer; - if (!!labrador) { - setDelay((60 / nameList.length) * 1000); - setIndex(0); - } - }, [imageLayer]); - - const layers = nameList.map((name, index) => { - const tempProvider = useMemo( - () => - new WebMapServiceImageryProvider({ - url: url, - layers: name, - parameters: { - service: "WMS", - format: "image/png", - transparent: true, - }, - }), - [name, url] - ); - return ( - - ); - }); - - useInterval(() => { - setIndex((index) => index + 1); - - if (index >= nameList.length) { - setIndex(0); - setDelay((60 / nameList.length) * 1000); - } - }, delay); - - if (!viewer.clock?.shouldAnimate) return; - - return layers[index]; -} - -export default TibetImageLayer; diff --git a/src/components/domain/One/Updraft.jsx b/src/components/domain/One/Updraft.jsx index 05594e6..b52a65b 100644 --- a/src/components/domain/One/Updraft.jsx +++ b/src/components/domain/One/Updraft.jsx @@ -1,5 +1,11 @@ import { Entity, PolylineGraphics, useCesium } from "resium"; -import { Cartesian3 } from "cesium"; +import { + CallbackProperty, + Cartesian3, + Color, + Ellipsoid, + PolylineArrowMaterialProperty, +} from "cesium"; import { min } from "lodash-es"; function Updraft() { @@ -12,19 +18,19 @@ function Updraft() { > ); diff --git a/src/components/domain/One/WaterVaporPath.jsx b/src/components/domain/One/WaterVaporPath.jsx index ef6cbe7..e2d5459 100644 --- a/src/components/domain/One/WaterVaporPath.jsx +++ b/src/components/domain/One/WaterVaporPath.jsx @@ -1,3 +1,9 @@ +import { + Cartesian3, + Color, + PolylineArrowMaterialProperty, + PolylineDashMaterialProperty, +} from "cesium"; import { Fragment } from "react"; import { Entity, PolylineGraphics } from "resium"; @@ -6,13 +12,13 @@ function WaterVaporPath() { diff --git a/src/components/domain/One/index.jsx b/src/components/domain/One/index.jsx index f4e426c..93b5b5e 100644 --- a/src/components/domain/One/index.jsx +++ b/src/components/domain/One/index.jsx @@ -10,10 +10,10 @@ import Barotropic from "./Barotorpic"; import WavePoints from "./WavePoints"; import Updraft from "./Updraft"; import Legend from "./Legend"; -import LabradorImageLayer from "./LabradorImageLayer"; -import TibetImageLayer from "./TibetImageLayer"; +import JJAImageLayer from "./JJAImageLayer"; import ChartPanel from "./ChartPanel"; import EntityLegend from "./EntityLegend"; +import Labels from "./Labels"; // import WaterVaporPath from "./WaterVaporPath"; export default function DomainOne() { @@ -39,9 +39,9 @@ export default function DomainOne() { {/* */} + - - + ); } diff --git a/src/components/domain/Three/ChartPanel.jsx b/src/components/domain/Three/ChartPanel.jsx index d34b750..259fe5f 100644 --- a/src/components/domain/Three/ChartPanel.jsx +++ b/src/components/domain/Three/ChartPanel.jsx @@ -83,7 +83,7 @@ function ChartPanel() { data: ["南极", "北极", "青藏高原"], textStyle: { color: "#04fbfd", cursor: "point" }, }, - animationDuration: years.length * 500, + animationDuration: 10 * 1000, animationEasing: "cubicInOut", grid: { left: "3%", diff --git a/src/components/domain/Three/Legend.jsx b/src/components/domain/Three/Legend.jsx index 3e28a7b..d993760 100644 --- a/src/components/domain/Three/Legend.jsx +++ b/src/components/domain/Three/Legend.jsx @@ -21,9 +21,9 @@ const colorBar = [ "#FFB1B1", ]; -function Legend() { +function Legend({ style }) { return ( -
+
{colorBar.map((color, index) => { diff --git a/src/components/domain/Three/SceneOne/ViewerOne.jsx b/src/components/domain/Three/SceneOne/ViewerOne.jsx new file mode 100644 index 0000000..8720bd5 --- /dev/null +++ b/src/components/domain/Three/SceneOne/ViewerOne.jsx @@ -0,0 +1,31 @@ +import { CameraFlyTo } from "resium"; +import { Cartesian3 } from "cesium"; +import MapLayout from "@/components/map/Layout"; +import CustomToolbar from "@/components/common/CustomToolbar"; +import CustomClock from "@/components/common/CustomClock"; +import LandImageLayer from "../LandImageLayer"; +import WavePoint from "@/components/common/WavePoint"; + +function ViewerOne({ children }) { + return ( +
+ +
+ 两极协同—连接南极和北极的热带大西洋经向模的媒介作用 +
+ + + + + + + {children} + +
+ ); +} + +export default ViewerOne; diff --git a/src/components/domain/Three/SceneOne/ViewerThree.jsx b/src/components/domain/Three/SceneOne/ViewerThree.jsx new file mode 100644 index 0000000..3d8c0d5 --- /dev/null +++ b/src/components/domain/Three/SceneOne/ViewerThree.jsx @@ -0,0 +1,21 @@ +import { CameraFlyTo } from "resium"; +import { Cartesian3 } from "cesium"; +import MapLayout from "@/components/map/Layout"; +import WavePoint from "@/components/common/WavePoint"; + +function ViewerThree({ children }) { + return ( +
+ + + + {children} + +
+ ); +} + +export default ViewerThree; diff --git a/src/components/domain/Three/SceneOne/ViewerTwo.jsx b/src/components/domain/Three/SceneOne/ViewerTwo.jsx new file mode 100644 index 0000000..b37a635 --- /dev/null +++ b/src/components/domain/Three/SceneOne/ViewerTwo.jsx @@ -0,0 +1,28 @@ +import { CameraFlyTo } from "resium"; +import { Cartesian3 } from "cesium"; +import MapLayout from "@/components/map/Layout"; +import OceanImageLayer from "../OceanImageLayer"; +import WavePoint from "@/components/common/WavePoint"; + +function ViewerTwo({ children }) { + return ( +
+ + + + + {children} + +
+ ); +} + +export default ViewerTwo; diff --git a/src/components/domain/Three/SceneOne/index.jsx b/src/components/domain/Three/SceneOne/index.jsx new file mode 100644 index 0000000..e35433b --- /dev/null +++ b/src/components/domain/Three/SceneOne/index.jsx @@ -0,0 +1,28 @@ +import TextInfoPanel from "@/components/common/TextInfoPanel"; +import ChartPanel from "../ChartPanel"; +import Legend from "../Legend"; +import ViewerOne from "./ViewerOne"; +import ViewerTwo from "./ViewerTwo"; +import ViewerThree from "./ViewerThree"; +import styles from "./index.module.less"; + +function SceneOne() { + return ( +
+
+ + + +
+
+ +
+
+ +
+ +
+ ); +} + +export default SceneOne; diff --git a/src/components/domain/Three/SceneOne/index.module.less b/src/components/domain/Three/SceneOne/index.module.less new file mode 100644 index 0000000..ff55c5b --- /dev/null +++ b/src/components/domain/Three/SceneOne/index.module.less @@ -0,0 +1,21 @@ +.sceneOne :global { + display: flex; + width: 100%; + height: 100%; + background-color: gray; + + .domain-viewers { + width: 100%; + height: calc(100% - 250px); + display: flex; + + .domain-viewer { + flex: 1; + position: relative; + + .title { + pointer-events: none; + } + } + } +} diff --git a/src/components/domain/Three/SceneSwitch.jsx b/src/components/domain/Three/SceneSwitch.jsx new file mode 100644 index 0000000..7b29f62 --- /dev/null +++ b/src/components/domain/Three/SceneSwitch.jsx @@ -0,0 +1,15 @@ +import { Button } from "antd"; + +function SceneSwitch({ scene, setScene }) { + const switchHandler = () => { + setScene(scene === 1 ? 2 : 1); + }; + + return ( + + ); +} + +export default SceneSwitch; diff --git a/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx b/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx new file mode 100644 index 0000000..f78a9c6 --- /dev/null +++ b/src/components/domain/Three/SceneTwo/SceneChartPanel.jsx @@ -0,0 +1,110 @@ +import ReactECharts from "echarts-for-react"; + +const years = []; + +for (let year = 1950; year <= 2020; year++) { + years.push(year); +} + +const SATData = []; +const SSTData = []; + +function SceneChartPanel() { + const option = { + title: { + // text: "Stacked Line", + }, + tooltip: { + trigger: "axis", + }, + legend: { + data: ["SAT_SVD1", "SST_SVD1"], + textStyle: { color: "#04fbfd", cursor: "point" }, + }, + animationDuration: 10 * 1000, + animationEasing: "cubicInOut", + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + xAxis: { + type: "category", + boundaryGap: false, + data: years, + axisLine: { + onZero: false, + symbol: ["none", "arrow"], + symbolOffser: [0, 10], + lineStyle: { + color: "#04fbfd", + }, + }, + }, + yAxis: { + type: "value", + min: -3.0, + max: 2.0, + interval: 1.0, + splitNumber: 5, + splitLine: { show: false }, + axisLine: { + onZero: false, + show: true, + symbol: ["none", "arrow"], + symbolOffset: [0, 10], + lineStyle: { + color: "#04fbfd", + }, + }, + axisLabel: { + show: true, + }, + axisTick: { show: true }, + scale: true, + }, + dataZoom: { type: "inside", start: 0, end: 100 }, + series: [ + { + name: "SAT_SVD1", + type: "line", + stack: "Total", + data: SATData, + smooth: true, + color: "red", + symbol: "none", + itemStyle: { + color: "red", + }, + }, + { + name: "SST_SVD1", + type: "line", + // stack: "Total", + data: SSTData, + smooth: true, + color: "blue", + symbol: "none", + itemStyle: { + color: "blue", + }, + }, + ], + }; + + return ( +
+ +
+ ); +} + +export default SceneChartPanel; diff --git a/src/components/domain/Three/SceneTwo/index.jsx b/src/components/domain/Three/SceneTwo/index.jsx new file mode 100644 index 0000000..8daf094 --- /dev/null +++ b/src/components/domain/Three/SceneTwo/index.jsx @@ -0,0 +1,20 @@ +import Legend from "../Legend"; +import ViewerOne from "../SceneOne/ViewerOne"; +import SceneChartPanel from "./SceneChartPanel"; + +function SceneTwo() { + return ( +
+ +
+
+ +
+
+ + +
+ ); +} + +export default SceneTwo; diff --git a/src/components/domain/Three/index.jsx b/src/components/domain/Three/index.jsx index 8109040..dcfd669 100644 --- a/src/components/domain/Three/index.jsx +++ b/src/components/domain/Three/index.jsx @@ -1,64 +1,16 @@ -import MapLayout from "@/components/map/Layout"; -import CustomToolbar from "@/components/common/CustomToolbar"; -import CustomClock from "@/components/common/CustomClock"; -import TextInfoPanel from "@/components/common/TextInfoPanel"; -import ChartPanel from "./ChartPanel"; -import LandImageLayer from "./LandImageLayer"; -import OceanImageLayer from "./OceanImageLayer"; -import WavePoint from "@/components/common/WavePoint"; -import { CameraFlyTo } from "resium"; -import { Cartesian3 } from "cesium"; -import Legend from "./Legend"; +import { useState } from "react"; +import styles from "./index.module.less"; +import SceneOne from "./SceneOne"; +import SceneTwo from "./SceneTwo"; +import SceneSwitch from "./SceneSwitch"; + +export default function DomainThree() { + const [scene, setScene] = useState(1); -export default function DomainOne() { return ( -
-
- -
- 两极协同—连接南极和北极的热带大西洋经向模的媒介作用 -
- - - -
- -
- - {/* */} - -
-
- - - - - -
-
- - -
- -
- - -
- {/* */} +
+ {scene === 1 ? : } +
); } diff --git a/src/components/domain/Three/index.module.less b/src/components/domain/Three/index.module.less index c9cc1bf..d966335 100644 --- a/src/components/domain/Three/index.module.less +++ b/src/components/domain/Three/index.module.less @@ -1,6 +1,148 @@ +.domainThree :global { + height: 100%; + + .scene_two { + display: flex; + height: 100%; + + .domain-viewer { + flex: 1; + position: relative; + + .title { + pointer-events: none; + } + + .chart-info-panel { + width: 100%; + height: 100%; + pointer-events: auto; + padding: 12px; + border: 1px solid #04fbfd; + color: #02f9ff !important; + background-color: #1f485690; + transition: all 0.3s ease-in-out; + } + } + } + + .scene-switch { + position: absolute; + left: 8px; + top: 8px; + } + + .left-panel { + position: absolute; + left: 12px; + bottom: 12px; + width: 450px; + display: flex; + flex-direction: column; + height: 230px; + + .top-panel { + flex: 1; + } + + .bottom-panel { + flex: 1; + } + + .text-info-panel { + width: 100%; + height: 100%; + padding: 12px; + border: 1px solid #04fbfd; + color: #02f9ff !important; + background-color: #1f485690; + pointer-events: auto; + font-size: 18px; + text-indent: 2em; + line-height: 1.5; + z-index: 999; + } + } + + .right-panel { + position: absolute; + right: 12px; + bottom: 12px; + width: 450px; + height: 230px; + display: flex; + flex-direction: column; + gap: 12px; + + .top-panel { + flex: 1; + } + + .bottom-panel { + flex: 1; + } + + .form-panel { + width: 100%; + height: 100%; + pointer-events: auto; + padding: 12px; + border: 1px solid #04fbfd; + color: #02f9ff !important; + background-color: #1f485690; + + .ant-form-item-label { + label { + color: white; + } + } + + .ant-form-item-control { + .ant-select-multiple { + max-height: 300px; + overflow-y: scroll; + + &::-webkit-scrollbar { + width: 6px; + height: 1px; + } + &::-webkit-scrollbar-thumb { + border-radius: 6px; + background: #00a2a2; + } + &::-webkit-scrollbar-track { + border-radius: 6px; + background: none; + } + } + } + } + + .chart-info-panel { + width: 100%; + height: 100%; + pointer-events: auto; + padding: 12px; + border: 1px solid #04fbfd; + color: #02f9ff !important; + background-color: #1f485690; + transition: all 0.3s ease-in-out; + } + + .highlight { + outline: 4px solid #04fbfd; + box-shadow: 0 0 30px #04e0fd; + } + } + + .one { + top: 50%; + } +} + .legend :global { position: absolute; - bottom: 40px; + bottom: 270px; width: 50%; left: 25%; z-index: 1000; @@ -26,7 +168,6 @@ .colorbar-item { flex: 1; height: 100%; - // border-radius: 8px; border: 1px black solid; &:not(:nth-child(1)) { diff --git a/src/components/domain/Two/Circles.jsx b/src/components/domain/Two/Circles.jsx index 8a00819..67b1750 100644 --- a/src/components/domain/Two/Circles.jsx +++ b/src/components/domain/Two/Circles.jsx @@ -1,27 +1,46 @@ import { Fragment, useState } from "react"; -import { Entity, EllipsoidGraphics, useCesium, PolylineGraphics } from "resium"; +import { + Entity, + EllipsoidGraphics, + useCesium, + PolylineGraphics, + LabelGraphics, +} from "resium"; import { useInterval, useThrottleFn } from "ahooks"; import { useDispatch } from "react-redux"; +import { + Cartesian3, + Color, + Math as CesiumMath, + LabelStyle, + PolylineDashMaterialProperty, + Cartesian2, +} from "cesium"; const lowCircle = ( ); + const highCircle = ( ); +// const labelText={ +// '5月南极涛动','Rossby波列' , '印度洋海温异常（信号存储）', '6月青藏高原降水（80个站点）和加热' +// } + function Circles() { const { viewer } = useCesium(); const dispatch = useDispatch(); @@ -56,7 +75,7 @@ function Circles() { currentTime.secondsOfDay - startTime.secondsOfDay ); if (!shouldAnimate) return; - if (_time === 40) { + if (_time === 20) { showInfo(); } else if (_time === 0) { closeInfo(); @@ -75,14 +94,12 @@ function Circles() { {circle} - - {show && ( - )} + {circle} + + + ); }; @@ -115,35 +143,35 @@ function Circles() { diff --git a/src/components/domain/Two/Cloud.jsx b/src/components/domain/Two/Cloud.jsx index e46c1d1..92187db 100644 --- a/src/components/domain/Two/Cloud.jsx +++ b/src/components/domain/Two/Cloud.jsx @@ -1,30 +1,31 @@ -import { useCesium } from "resium"; +import { Cartesian2, Cartesian3, Math } from "cesium"; +import { CloudCollection, useCesium } from "resium"; function Cloud() { const { viewer } = useCesium(); const scene = viewer.scene; - const position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 50); + const position = Cartesian3.fromDegrees(-123.0744619, 44.0503706, 50); - Cesium.Math.setRandomNumberSeed(2.5); + Math.setRandomNumberSeed(2.5); function getRandomNumberInRange(minValue, maxValue) { - return minValue + Cesium.Math.nextRandomNumber() * (maxValue - minValue); + return minValue + Math.nextRandomNumber() * (maxValue - minValue); } - const clouds = new Cesium.CloudCollection(); + const clouds = new CloudCollection(); // manually position clouds in the mountains function createBackLayerClouds() { clouds.add({ - position: Cesium.Cartesian3.fromDegrees(-122.6908, 45.496, 300), - scale: new Cesium.Cartesian2(1500, 250), - maximumSize: new Cesium.Cartesian3(50, 15, 13), + position: new Cartesian3.fromDegrees(-122.6908, 45.496, 300), + scale: new Cartesian2(1500, 250), + maximumSize: new Cartesian3(50, 15, 13), slice: 0.3, }); clouds.add({ - position: Cesium.Cartesian3.fromDegrees(-122.72, 45.5, 335), - scale: new Cesium.Cartesian2(1500, 300), - maximumSize: new Cesium.Cartesian3(50, 12, 15), + position: new Cartesian3.fromDegrees(-122.72, 45.5, 335), + scale: new Cartesian2(1500, 300), + maximumSize: new Cartesian3(50, 12, 15), slice: 0.36, }); } @@ -53,9 +54,9 @@ function Cloud() { aspectRatio = getRandomNumberInRange(1.5, 2.1); cloudHeight = getRandomNumberInRange(5, 20); clouds.add({ - position: Cesium.Cartesian3.fromDegrees(long, lat, height), - scale: new Cesium.Cartesian2(scaleX, scaleY), - maximumSize: new Cesium.Cartesian3( + position: Cartesian3.fromDegrees(long, lat, height), + scale: new Cartesian2(scaleX, scaleY), + maximumSize: new Cartesian3( aspectRatio * cloudHeight, cloudHeight, depth @@ -65,19 +66,19 @@ function Cloud() { } } // manually position clouds in front - const scratch = new Cesium.Cartesian3(); + const scratch = new Cartesian3(); function createFrontLayerClouds() { clouds.add({ - position: Cesium.Cartesian3.fromDegrees(-122.666, 45.5126, 97), - scale: new Cesium.Cartesian2(400, 150), - maximumSize: new Cesium.Cartesian3(25, 12, 15), + position: Cartesian3.fromDegrees(-122.666, 45.5126, 97), + scale: new Cartesian2(400, 150), + maximumSize: new Cartesian3(25, 12, 15), slice: 0.36, }); clouds.add({ - position: Cesium.Cartesian3.fromDegrees(-122.6665, 45.5262, 76), - scale: new Cesium.Cartesian2(450, 200), - maximumSize: new Cesium.Cartesian3(25, 14, 12), + position: Cartesian3.fromDegrees(-122.6665, 45.5262, 76), + scale: new Cartesian2(450, 200), + maximumSize: new Cartesian3(25, 14, 12), slice: 0.3, }); } diff --git a/src/components/domain/Two/CustomFlyTo.jsx b/src/components/domain/Two/CustomFlyTo.jsx index 7df0181..3930010 100644 --- a/src/components/domain/Two/CustomFlyTo.jsx +++ b/src/components/domain/Two/CustomFlyTo.jsx @@ -1,112 +1,137 @@ +import { Cartesian3, EasingFunction, Math } from "cesium"; import { useDispatch } from "react-redux"; import { useCesium } from "resium"; function CustomFlyTo() { const dispatch = useDispatch(); - const { viewer } = useCesium(); - const { camera } = viewer; + const { viewer, camera } = useCesium(); - function cameraFlyToLine(adjustPitch) { - // 南极 - const antarcticalOptions = { - destination: Cesium.Cartesian3.fromDegrees(88, -89, 1600000), - orientation: { - heading: Cesium.Math.toRadians(15.0), - pitch: Cesium.Math.toRadians(-60), - roll: 0.0, - }, - duration: 10, - complete: function () { - setTimeout(() => { - camera.flyTo(plateauOptions); - }, 1000); - }, - }; + function cameraFlyToLine() { + // // 南极 + // const antarcticalOptions = { + // destination: Cartesian3.fromDegrees(88, -89, 1600000), + // orientation: { + // heading: Math.toRadians(15.0), + // pitch: Math.toRadians(-60), + // roll: 0.0, + // }, + // duration: 5, + // complete: function () { + // camera.flyTo(area1Options); + // }, + // easingFunction: EasingFunction.LINEAR_NONE, + // }; const area1Options = { - destination: Cesium.Cartesian3.fromDegrees(-110, -60, 6000000), + destination: Cartesian3.fromDegrees(-110, -86, 10000000), duration: 5, - complete: function () { - setTimeout(function () { - camera.flyTo(area2Options); - }, 1000); + orientation: { + heading: 6, + pitch: -1.3, + roll: -6, }, + complete: function () { + viewer.clock.shouldAnimate = true; + dispatch.data.updateToolbar({ showPanel: true }); + setTimeout(() => { + camera.flyTo(area2Options); + }, 5000); + }, + easingFunction: EasingFunction.LINEAR_NONE, }; const area2Options = { - destination: Cesium.Cartesian3.fromDegrees(-30, -55, 6000000), + destination: Cartesian3.fromDegrees(-30, -65, 10000000), duration: 5, complete: function () { - setTimeout(function () { - camera.flyTo(area3Options); - }, 1000); + camera.flyTo(area3Options); + }, + easingFunction: EasingFunction.LINEAR_NONE, + orientation: { + heading: 6, + pitch: -1.3, + roll: -6, }, }; const area3Options = { - destination: Cesium.Cartesian3.fromDegrees(30, -40, 6000000), + destination: Cartesian3.fromDegrees(30, -40, 10000000), duration: 5, complete: function () { - setTimeout(function () { - camera.flyTo(area4Options); - }, 1000); + camera.flyTo(area4Options); }, + easingFunction: EasingFunction.LINEAR_NONE, }; const area4Options = { - destination: Cesium.Cartesian3.fromDegrees(65, -35, 6000000), - duration: 5, - complete: function () { - setTimeout(function () { - camera.flyTo(sideViewOptions); - }, 1000); - }, - }; - - // 青藏高原 - const plateauOptions = { - destination: Cesium.Cartesian3.fromDegrees(90, 20, 1600000), + destination: Cartesian3.fromDegrees(65, -55, 10000000), duration: 5, orientation: { - heading: Cesium.Math.toRadians(-15.0), - pitch: -Cesium.Math.PI_OVER_FOUR, - roll: 0.0, + heading: 6, + pitch: -1.3, + roll: -6, }, complete: function () { - setTimeout(function () { - camera.flyTo(sideViewOptions); - }, 1000); - }, - }; - - // 侧边 - const sideViewOptions = { - destination: Cesium.Cartesian3.fromDegrees(80, -60, 16000000), - // destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000), - duration: 5, - orientation: { - heading: Cesium.Math.toRadians(-10.0), - pitch: Cesium.Math.toRadians(-92), - roll: 6.0, - }, - complete: () => { - viewer.clock.shouldAnimate = true; - dispatch.data.updateToolbar({ showPanel: true }); setTimeout(() => { camera.flyTo({ duration: 5, - destination: Cesium.Cartesian3.fromDegrees(90, -12, 14000000), + destination: Cartesian3.fromDegrees(90, -12, 14000000), }); - }, 40 * 1000); + }, 5 * 1000); }, + easingFunction: EasingFunction.LINEAR_NONE, }; - if (adjustPitch) { - antarcticalOptions.pitchAdjustHeight = 1000; - plateauOptions.pitchAdjustHeight = 1000; - sideViewOptions.pitchAdjustHeight = 1000; - } - camera.flyTo(sideViewOptions); + const area5Options = { + destination: Cartesian3.fromDegrees(95, -30, 10000000), + duration: 5, + complete: function () { + // camera.flyTo(sideViewOptions); + setTimeout(() => { + camera.flyTo({ + duration: 5, + destination: Cartesian3.fromDegrees(90, -12, 14000000), + }); + }, 5 * 1000); + }, + easingFunction: EasingFunction.LINEAR_NONE, + }; + + // 侧边 + // const sideViewOptions = { + // destination: Cartesian3.fromDegrees(80, -60, 16000000), + // // destination: Cesium.Cartesian3.fromDegrees(130, -10.5, 20000000), + // duration: 5, + // orientation: { + // heading: Math.toRadians(-10.0), + // pitch: Math.toRadians(-92), + // roll: 6.0, + // }, + // complete: () => { + // viewer.clock.shouldAnimate = true; + // dispatch.data.updateToolbar({ showPanel: true }); + // setTimeout(() => { + // camera.flyTo({ + // duration: 5, + // destination: Cartesian3.fromDegrees(90, -12, 14000000), + // }); + // }, 40 * 1000); + // }, + // }; + + const xx = { + destination: Cartesian3.fromDegrees(65, -55, 10000000), + duration: 5, + orientation: { + heading: 6, + pitch: -1.3, + roll: -6, + }, + + easingFunction: EasingFunction.LINEAR_NONE, + }; + + camera.flyTo(area1Options); } cameraFlyToLine(); return <>; diff --git a/src/components/domain/Two/IndiaOceanSST.jsx b/src/components/domain/Two/IndiaOceanSST.jsx index b4a01a7..6cfa24c 100644 --- a/src/components/domain/Two/IndiaOceanSST.jsx +++ b/src/components/domain/Two/IndiaOceanSST.jsx @@ -12,7 +12,7 @@ function IndianOceanSST() { () => new WebMapServiceImageryProvider({ url: url, - layers: "phitrellis:india_ocean_sst", + layers: "phitrellis:4_2_Indian_Ocean_sst", parameters: { service: "WMS", format: "image/png", diff --git a/src/components/domain/Two/Labels.jsx b/src/components/domain/Two/Labels.jsx new file mode 100644 index 0000000..caebeda --- /dev/null +++ b/src/components/domain/Two/Labels.jsx @@ -0,0 +1,34 @@ +import { Cartesian2, Cartesian3, Color, LabelStyle } from "cesium"; +import { Fragment } from "react"; +import { Entity, LabelGraphics } from "resium"; + +function Labels() { + return ( + + + + + + + + + ); +} + +export default Labels; diff --git a/src/components/domain/Two/MoistureTransport.jsx b/src/components/domain/Two/MoistureTransport.jsx index d3125d5..cee5a09 100644 --- a/src/components/domain/Two/MoistureTransport.jsx +++ b/src/components/domain/Two/MoistureTransport.jsx @@ -1,4 +1,5 @@ import { useInterval } from "ahooks"; +import { Cartesian3, Color, PolylineArrowMaterialProperty } from "cesium"; import { Fragment, useCallback, useState } from "react"; import { Entity, PolylineGraphics, useCesium } from "resium"; @@ -23,26 +24,24 @@ function MoistureTransport() { diff --git a/src/components/domain/Two/PlateauPolygon.jsx b/src/components/domain/Two/PlateauPolygon.jsx index e47886b..760d71f 100644 --- a/src/components/domain/Two/PlateauPolygon.jsx +++ b/src/components/domain/Two/PlateauPolygon.jsx @@ -1,6 +1,7 @@ import { useCallback, useState } from "react"; import { Entity, PolygonGraphics, useCesium } from "resium"; import { useInterval } from "ahooks"; +import { Cartesian3, Color } from "cesium"; function PlateauPolygon() { const { viewer } = useCesium(); @@ -12,7 +13,7 @@ function PlateauPolygon() { stopTime.secondsOfDay - currentTime.secondsOfDay ); - if (leftTime < 20) { + if (leftTime < 5) { setShow(true); } else if (show) setShow(false); }, [show]); @@ -22,11 +23,11 @@ function PlateauPolygon() { return ( ); diff --git a/src/components/domain/Two/Point.jsx b/src/components/domain/Two/Point.jsx index f60eb24..4054904 100644 --- a/src/components/domain/Two/Point.jsx +++ b/src/components/domain/Two/Point.jsx @@ -1,16 +1,26 @@ import { useState } from "react"; import { Entity, PointGraphics, useCesium } from "resium"; import { useInterval } from "ahooks"; +import { + Cartesian3, + Color, + JulianDate, + LinearApproximation, + SampledPositionProperty, + TimeInterval, + TimeIntervalCollection, + VelocityOrientationProperty, +} from "cesium"; // 从南极到青藏高原 const dataAntarcticaToQTP = [ { longitude: -110, latitude: -60, height: 0, time: 0 }, - { longitude: -110, latitude: -60, height: 1000000, time: 10 }, - { longitude: -30, latitude: -55, height: 1000000, time: 20 }, - { longitude: 30, latitude: -40, height: 1000000, time: 30 }, - { longitude: 65, latitude: -35, height: 1000000, time: 40 }, - { longitude: 95, latitude: -30, height: 1000000, time: 50 }, - { longitude: 95, latitude: -30, height: 0, time: 60 }, + { longitude: -110, latitude: -60, height: 1000000, time: 5 }, + { longitude: -30, latitude: -55, height: 1000000, time: 10 }, + { longitude: 30, latitude: -40, height: 1000000, time: 15 }, + { longitude: 65, latitude: -35, height: 1000000, time: 20 }, + { longitude: 95, latitude: -30, height: 1000000, time: 27 }, + { longitude: 95, latitude: -30, height: 0, time: 30 }, ]; function Point() { @@ -21,7 +31,7 @@ function Point() { const start = viewer.clock.startTime; const stop = viewer.clock.stopTime; - const pathMaterial = new Cesium.Color(4 / 255, 251 / 255, 253 / 255); + const pathMaterial = new Color(4 / 255, 251 / 255, 253 / 255); useInterval(() => { if (viewer.clock?.shouldAnimate) setDelay(undefined); @@ -33,14 +43,10 @@ function Point() { * {SampledPositionProperty|*} */ function createProperty(source) { - let property = new Cesium.SampledPositionProperty(); + let property = new SampledPositionProperty(); for (let i = 0; i < source.length; i++) { - let time = Cesium.JulianDate.addSeconds( - start, - source[i].time, - new Cesium.JulianDate() - ); - let position = Cesium.Cartesian3.fromDegrees( + let time = JulianDate.addSeconds(start, source[i].time, new JulianDate()); + let position = Cartesian3.fromDegrees( source[i].longitude, source[i].latitude, source[i].height @@ -50,7 +56,7 @@ function Point() { } property.setInterpolationOptions({ interpolationDegree: 1, - interpolationAlgorithm: Cesium.LinearApproximation, + interpolationAlgorithm: LinearApproximation, }); return property; } @@ -62,14 +68,14 @@ function Point() { id={"point"} position={property} availability={ - new Cesium.TimeIntervalCollection([ - new Cesium.TimeInterval({ + new TimeIntervalCollection([ + new TimeInterval({ start, stop, }), ]) } - orientation={new Cesium.VelocityOrientationProperty(property)} + orientation={new VelocityOrientationProperty(property)} path={{ resolution: 1, material: pathMaterial, @@ -81,8 +87,8 @@ function Point() { > diff --git a/src/components/domain/Two/Site/HeatFlux.jsx b/src/components/domain/Two/Site/HeatFlux.jsx index 1d822fd..65e6972 100644 --- a/src/components/domain/Two/Site/HeatFlux.jsx +++ b/src/components/domain/Two/Site/HeatFlux.jsx @@ -1,5 +1,5 @@ import { Entity, EllipseGraphics } from "resium"; -import { Cartesian3 } from "cesium"; +import { Cartesian3, Color } from "cesium"; const fluxData = [ 0.03256254, -0.23182425, -0.040055223, -0.03476936, -0.40450656, -0.18742515, @@ -86,7 +86,7 @@ function HeatFlux({ position, index }) { `} > diff --git a/src/components/domain/Two/index.jsx b/src/components/domain/Two/index.jsx index 92e60d6..dcf8dda 100644 --- a/src/components/domain/Two/index.jsx +++ b/src/components/domain/Two/index.jsx @@ -13,6 +13,7 @@ import Circles from "./Circles"; import SurfaceAnomaly from "./SurfaceAnomaly"; import MoistureTransport from "./MoistureTransport"; import Sites from "./Site"; +import Labels from "./Labels"; export default function DomainTwo() { return ( @@ -22,18 +23,19 @@ export default function DomainTwo() { + + + + + +
- - - {/* */} - - ); } diff --git a/src/components/map/Layout/HeadingPitchRoll.jsx b/src/components/map/Layout/HeadingPitchRoll.jsx new file mode 100644 index 0000000..335bd38 --- /dev/null +++ b/src/components/map/Layout/HeadingPitchRoll.jsx @@ -0,0 +1,16 @@ +import { useCesium } from "resium"; + +function HeadingPitchRoll() { + const { camera } = useCesium(); + + camera.moveEnd?.addEventListener(function (event) { + const heading = camera.heading; + const pitch = camera.pitch; + const roll = camera.roll; + console.log("heading,pitch,roll :>> ", heading, pitch, roll); + }); + + return <>; +} + +export default HeadingPitchRoll; diff --git a/src/components/map/Layout/Picker.jsx b/src/components/map/Layout/Picker.jsx index 681c3d0..b7828c7 100644 --- a/src/components/map/Layout/Picker.jsx +++ b/src/components/map/Layout/Picker.jsx @@ -1,3 +1,9 @@ +import { + Cartographic, + Math, + ScreenSpaceEventHandler, + ScreenSpaceEventType, +} from "cesium"; import { useState } from "react"; import { useCesium } from "resium"; @@ -7,26 +13,22 @@ function Picker() { const [lon, setLon] = useState(); const [lat, setLat] = useState(); - const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas); + const handler = new ScreenSpaceEventHandler(scene.canvas); handler.setInputAction(function (movement) { const cartesian = viewer.camera.pickEllipsoid( movement.endPosition, scene.globe.ellipsoid ); if (cartesian) { - const cartographic = Cesium.Cartographic.fromCartesian(cartesian); - const longitudeString = Cesium.Math.toDegrees( - cartographic.longitude - ).toFixed(4); - const latitudeString = Cesium.Math.toDegrees( - cartographic.latitude - ).toFixed(4); + const cartographic = Cartographic.fromCartesian(cartesian); + const longitudeString = Math.toDegrees(cartographic.longitude).toFixed(4); + const latitudeString = Math.toDegrees(cartographic.latitude).toFixed(4); setLon(longitudeString); setLat(latitudeString); } else { // entity.label.show = false; } - }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); + }, ScreenSpaceEventType.MOUSE_MOVE); if (!lon && !lat) return <>; diff --git a/src/components/map/Layout/index.jsx b/src/components/map/Layout/index.jsx index aba3d89..a7cc3ea 100644 --- a/src/components/map/Layout/index.jsx +++ b/src/components/map/Layout/index.jsx @@ -1,20 +1,10 @@ import { Entity, PointGraphics, Viewer } from "resium"; import styles from "./index.module.less"; -import { useMemo } from "react"; -import { BingMapsImageryProvider, BingMapsStyle } from "cesium"; +import { Cartesian3, Color } from "cesium"; import Picker from "./Picker"; +import HeadingPitchRoll from "./HeadingPitchRoll"; function MapLayout({ children, className, ...rest }) { - const imageryProvider = useMemo( - () => - new BingMapsImageryProvider({ - url: "https://dev.virtualearth.net", - key: "Ahv1KDJwbpJl4V8zklaRXcoueWXoNLo16osJiU4Zk07vc-VNNzJ0gB81TZyPqNFz", - mapStyle: BingMapsStyle.AERIAL, - }), - [] - ); - return ( - - + + + {/* */} {children} ); diff --git a/src/components/map/Layout/index.module.less b/src/components/map/Layout/index.module.less index 6500a14..0598a99 100644 --- a/src/components/map/Layout/index.module.less +++ b/src/components/map/Layout/index.module.less @@ -63,7 +63,7 @@ color: #02f9ff !important; background-color: #1f485690; pointer-events: auto; - font-size: 16px; + font-size: 18px; text-indent: 2em; line-height: 1.5; z-index: 999;