baol/cesium-arrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Aifeilong 2023-10-13 18:12:40 +08:00
parent 5bce476972
commit aa5d0ccf0f
6 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/domain/One/Labels.jsx
View File

@ -8,6 +8,7 @@ function Labels() {
const [showOne, setShowOne] = useState(false);
const [showTwo, setShowTwo] = useState(false);
const [showThree, setShowThree] = useState(false);
const showAnimate = useCallback(() => {
const { currentTime, stopTime } = viewer.clock;
@ -18,10 +19,15 @@ function Labels() {
if (leftTime < 20) {
setShowOne(true);
} else if (showOne) setShowOne(false);
if (leftTime < 5) {
if (leftTime < 15) {
setShowTwo(true);
} else if (showTwo) setShowTwo(false);
}, [showOne, showTwo, viewer]);
if (leftTime < 5) {
setShowThree(true);
} else if (showThree) setShowThree(false);
}, [showOne, showTwo, showThree, viewer]);
useInterval(showAnimate, 300);
@ -40,7 +46,7 @@ function Labels() {
</Entity>
<Entity show={showOne} position={Cartesian3.fromDegrees(-20, 55, 0)}>
<LabelGraphics
text={"北大西洋至欧洲地区大气环流异常"}
text={"北大西洋大气环流异常"}
font="24px Helvetica"
fillColor={Color.SKYBLUE}
outlineColor={Color.BLACK}
@ -49,7 +55,18 @@ function Labels() {
eyeOffset={new Cartesian2(0, 200000)}
/>
</Entity>
<Entity show={showTwo} position={Cartesian3.fromDegrees(98, 48, 0)}>
<Entity show={showTwo} position={Cartesian3.fromDegrees(31, 48, 0)}>
<LabelGraphics
text={"欧洲地区大气环流异常"}
font="24px Helvetica"
fillColor={Color.SKYBLUE}
outlineColor={Color.BLACK}
outlineWidth={2}
style={LabelStyle.FILL_AND_OUTLINE}
eyeOffset={new Cartesian2(0, 200000)}
/>
</Entity>
<Entity show={showThree} position={Cartesian3.fromDegrees(98, 48, 0)}>
<LabelGraphics
text={"barotropic"}
font="24px Helvetica"
@ -60,7 +77,7 @@ function Labels() {
eyeOffset={new Cartesian2(0, 1200000)}
/>
</Entity>
<Entity show={showTwo} position={Cartesian3.fromDegrees(90, 27, 0)}>
<Entity show={showThree} position={Cartesian3.fromDegrees(90, 27, 0)}>
<LabelGraphics
text={"青藏高原夏季出现年代际增温"}
font="24px Helvetica"

8
src/components/domain/Three/SceneOne/index.module.less
View File

@ -39,7 +39,7 @@
padding: 12px;
border: 1px solid #04fbfd;
color: #02f9ff !important;
background-color: #1f485690;
background-color: #000000e7;
pointer-events: auto;
font-size: 18px;
text-indent: 2em;
@ -71,7 +71,7 @@
padding: 12px;
border: 1px solid #04fbfd;
color: #02f9ff !important;
background-color: #1f485690;
background-color: #000000e7;
border-radius: 8px;
.ant-form-item-label {
@ -108,7 +108,7 @@
padding: 12px;
border: 1px solid #04fbfd;
color: #02f9ff !important;
background-color: #1f485690;
background-color: #000000e7;
transition: all 0.3s ease-in-out;
border-radius: 8px;
}
@ -126,7 +126,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #1f485690;
background-color: #000000e7;
border: 1px solid #04fbfd;
border-radius: 8px;
padding: 8px;

2
src/components/domain/Three/SceneTwo/index.module.less
View File

@ -9,7 +9,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #1f485690;
background-color: #000000e7;
border: 1px solid #04fbfd;
border-radius: 8px;
padding: 8px;

2
src/components/domain/Three/index.module.less
View File

@ -20,7 +20,7 @@
padding: 12px;
border: 1px solid #04fbfd;
color: #02f9ff !important;
background-color: #1f485690;
background-color: #000000e7;
transition: all 0.3s ease-in-out;
border-radius: 8px;
}

2
src/components/domain/Two/index.module.less
View File

@ -5,7 +5,7 @@
right: 12px;
bottom: 14px;
display: grid;
background-color: #1f485690;
background-color: #000000e7;
border: 1px solid #04fbfd;
border-radius: 8px;
padding: 8px;

12
src/components/map/Layout/index.module.less
View File

@ -51,7 +51,7 @@
padding: 12px;
border: 1px solid #04fbfd;
color: #02f9ff !important;
background-color: #1f485690;
background-color: #000000e7;
pointer-events: auto;
font-size: 18px;
text-indent: 2em;
@ -86,7 +86,7 @@
padding: 12px;
border: 1px solid #04fbfd;
color: #02f9ff !important;
background-color: #1f485690;
background-color: #000000e7;
border-radius: 8px;
.ant-form-item-label {
@ -123,7 +123,7 @@
padding: 12px;
border: 1px solid #04fbfd;
color: #02f9ff !important;
background-color: #1f485690;
background-color: #000000e7;
transition: all 0.3s ease-in-out;
border-radius: 8px;
}
@ -146,7 +146,7 @@
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
background-color: #1f485690;
background-color: #000000e7;
border: 1px solid #04fbfd;
border-radius: 8px;
padding: 8px;
@ -175,7 +175,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #1f485690;
background-color: #000000e7;
border: 1px solid #04fbfd;
border-radius: 8px;
padding: 8px;
@ -228,7 +228,7 @@
display: flex;
flex-direction: column;
align-items: center;
background-color: #1f485690;
background-color: #000000e7;
border: 1px solid #04fbfd;
border-radius: 8px;
padding: 8px;