Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
V
vue-cesium-lyc
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
lyc
vue-cesium-lyc
Commits
29b98d49
Commit
29b98d49
authored
Aug 28, 2024
by
lyc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
11
parent
eefd4ca3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
303 additions
and
15 deletions
+303
-15
App.vue
src/App.vue
+4
-2
dengyue.vue
src/components/dengyue.vue
+286
-0
raotaiyng.vue
src/components/raotaiyng.vue
+13
-13
No files found.
src/App.vue
View file @
29b98d49
...
...
@@ -21,6 +21,7 @@ import shiqushiti from './components/shiqushiti.vue'
import
kuosanquan
from
'./components/kuosanyuan.vue'
import
relitu
from
'./components/relitu.vue'
// import test from './components/test.vue'
import
dengyue
from
'./components/dengyue.vue'
//封装
import
point
from
'./encapsulation/point.vue'
...
...
@@ -33,7 +34,7 @@ import sensor from './encapsulation/sensor.vue'
export
default
{
name
:
'app'
,
components
:
{
boom
,
demo
,
draw
,
moon
,
fire
,
selt
,
sun
,
camera
,
dail
,
baozha
,
kedupan
,
raotaiyang
,
qq
,
setl
,
xyz
,
shiye
,
jiguang
,
shiqushiti
,
kuosanquan
,
relitu
,
boom
,
demo
,
draw
,
moon
,
fire
,
selt
,
sun
,
camera
,
dail
,
baozha
,
kedupan
,
raotaiyang
,
qq
,
setl
,
xyz
,
shiye
,
jiguang
,
shiqushiti
,
kuosanquan
,
relitu
,
dengyue
,
point
,
lineq
,
polygonq
,
sensor
}
}
...
...
@@ -51,7 +52,7 @@ export default {
<!--
<draw/>
-->
<!--
<camera/>
-->
<!--
<dail/>
-->
<
raotaiyang/
>
<
!--
<raotaiyang/>
--
>
<!--
<qq/>
-->
<!--
<xyz/>
-->
<!--
<setl/>
-->
...
...
@@ -62,6 +63,7 @@ export default {
<!--
<kuosanquan/>
-->
<!--
<relitu/>
-->
<!--
<test/>
-->
<dengyue/>
<!--
<point/>
-->
<!--
<polygonq/>
-->
...
...
src/components/dengyue.vue
0 → 100644
View file @
29b98d49
<
template
>
<div
id=
"cesiumContainer"
class=
"all"
></div>
</
template
>
<
script
setup
>
import
{
onMounted
}
from
'vue'
import
*
as
Cesium
from
'cesium'
import
{
ref
}
from
'vue'
onMounted
(()
=>
{
Cesium
.
Ion
.
defaultAccessToken
=
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const
viewer
=
new
Cesium
.
Viewer
(
"cesiumContainer"
,
{
infoBox
:
false
,
orderIndependentTranslucency
:
false
,
})
// 初始化时钟
const
start
=
Cesium
.
JulianDate
.
fromDate
(
new
Date
());
const
adjustedStart
=
Cesium
.
JulianDate
.
addHours
(
start
,
8
,
new
Cesium
.
JulianDate
());
const
stop
=
Cesium
.
JulianDate
.
addSeconds
(
adjustedStart
,
360
,
new
Cesium
.
JulianDate
());
viewer
.
clock
.
startTime
=
adjustedStart
.
clone
();
viewer
.
clock
.
stopTime
=
stop
.
clone
();
viewer
.
clock
.
currentTime
=
adjustedStart
.
clone
();
viewer
.
clock
.
clockRange
=
Cesium
.
ClockRange
.
LOOP_STOP
;
viewer
.
clock
.
multiplier
=
1
;
viewer
.
timeline
.
zoomTo
(
adjustedStart
,
stop
);
const
scene
=
viewer
.
scene
;
let
handler
;
// 定义轨道的相关参数
const
inclination
=
Cesium
.
Math
.
toRadians
(
0
);
// 轨道倾角(以弧度表示)
const
semiMajorAxis
=
38440000
;
// 半长轴(米),大约为月球到地球的平均距离
const
period
=
360
;
// 轨道周期(秒)
const
numberOfPoints
=
100
;
// 轨道上的点数
// 创建月球轨道
function
createMoonOrbit
(
inclination
,
semiMajorAxis
,
period
,
numberOfPoints
)
{
const
positions
=
[];
for
(
let
i
=
0
;
i
<=
numberOfPoints
;
i
++
)
{
const
meanAnomaly
=
(
2
*
Math
.
PI
/
period
)
*
(
i
*
period
/
numberOfPoints
);
const
trueAnomaly
=
meanAnomaly
;
// 简化处理,假设轨道是圆的
const
radius
=
semiMajorAxis
;
// 圆轨道的半径等于半长轴
const
x
=
radius
*
Math
.
cos
(
trueAnomaly
);
const
y
=
radius
*
Math
.
sin
(
trueAnomaly
)
*
Math
.
cos
(
inclination
);
const
z
=
radius
*
Math
.
sin
(
trueAnomaly
)
*
Math
.
sin
(
inclination
);
const
cartographic
=
Cesium
.
Cartographic
.
fromCartesian
(
Cesium
.
Cartesian3
.
fromElements
(
x
,
y
,
z
));
positions
.
push
(
cartographic
);
}
return
positions
;
}
const
moonOrbitPositions
=
createMoonOrbit
(
inclination
,
semiMajorAxis
,
period
,
numberOfPoints
);
const
cartesianPositions
=
moonOrbitPositions
.
map
(
position
=>
Cesium
.
Cartesian3
.
fromRadians
(
position
.
longitude
,
position
.
latitude
,
position
.
height
));
const
orbitPosition
=
new
Cesium
.
SampledPositionProperty
();
for
(
let
i
=
0
;
i
<=
numberOfPoints
;
i
++
)
{
const
time
=
Cesium
.
JulianDate
.
addSeconds
(
viewer
.
clock
.
startTime
,
i
*
period
/
numberOfPoints
,
new
Cesium
.
JulianDate
());
orbitPosition
.
addSample
(
time
,
cartesianPositions
[
i
]);
}
// 创建月球实体
const
moonEntity
=
viewer
.
entities
.
add
({
name
:
'Moon'
,
availability
:
new
Cesium
.
TimeIntervalCollection
([
new
Cesium
.
TimeInterval
({
start
:
start
,
stop
:
stop
})]),
position
:
orbitPosition
,
orientation
:
new
Cesium
.
VelocityOrientationProperty
(
orbitPosition
),
point
:
{
pixelSize
:
10
,
color
:
Cesium
.
Color
.
WHITE
},
// model: {
// uri: '/src/model/moon1.glb',
// minimumPixelSize: 100,
// scale: 200.0,
// },
path
:
{
resolution
:
1
,
material
:
new
Cesium
.
PolylineGlowMaterialProperty
({
glowPower
:
0.1
,
color
:
Cesium
.
Color
.
PINK
}),
width
:
5
}
});
moonEntity
.
position
.
setInterpolationOptions
({
interpolationDegree
:
5
,
interpolationAlgorithm
:
Cesium
.
LagrangePolynomialApproximation
});
//入轨轨道
function
animatedParabola
(
twoPoints
)
{
const
startPoint
=
[
twoPoints
[
0
],
twoPoints
[
1
],
twoPoints
[
2
]];
// 起点的经度、纬度、高度
const
step
=
10
;
// 自定义线段的数量,越多则越平滑
const
endPoint1
=
[
twoPoints
[
3
],
twoPoints
[
4
],
twoPoints
[
5
]];
// 终点的经度、纬度、高度
const
endPoint
=
[
startPoint
[
0
]
+
(
endPoint1
[
0
]
-
startPoint
[
0
])
*
2
,
startPoint
[
1
]
+
(
endPoint1
[
1
]
-
startPoint
[
1
])
*
2
,
startPoint
[
2
]
+
(
endPoint1
[
2
]
-
startPoint
[
2
])
*
2
]
const
dLon
=
(
endPoint
[
0
]
-
startPoint
[
0
])
/
step
;
// 经度差值
const
dLat
=
(
endPoint
[
1
]
-
startPoint
[
1
])
/
step
;
// 纬度差值
const
heigh
=
endPoint1
[
2
]
const
x2
=
10000
*
Math
.
sqrt
(
dLon
*
dLon
+
dLat
*
dLat
);
// 小数点扩大10000倍,提高精确度
const
a
=
heigh
/
(
x2
*
x2
);
// 抛物线函数中的a
let
pointsArray
=
[];
// 存储所有点的数组
function
y
(
x
,
height
)
{
// 模拟抛物线函数,求高度H
return
Math
.
floor
(
height
-
a
*
x
*
x
);
}
for
(
let
i
=
0
;
i
<=
step
/
2
;
i
++
)
{
// 逐“帧”计算点
const
lon
=
startPoint
[
0
]
+
dLon
*
i
;
// 更新经度
const
lat
=
startPoint
[
1
]
+
dLat
*
i
;
// 更新纬度
const
x
=
x2
*
(
2
*
i
/
step
-
1
);
// 求抛物线函数x
const
alt
=
y
(
x
,
heigh
);
// 求高度
pointsArray
.
push
(
Cesium
.
Cartesian3
.
fromDegrees
(
lon
,
lat
,
alt
));
}
return
pointsArray
;
}
// 使用示例:
let
trajectoryPoints
=
animatedParabola
([
-
10
,
0
,
0
,
-
1
,
0
,
1523000
]);
// const rugui=trajectoryPoints
// viewer.entities.add({
// polyline: {
// positions: rugui,
// width: 1,
// material: Cesium.Color.RED
// }
// })
// viewer.entities.add({ // 添加静态线
// polyline: {
// positions: trajectoryPoints,
// width: 1,
// material: Cesium.Color.RED
// },
// });
// console.log(trajectoryPoints)
const
height
=
7894493
const
inclination1
=
Cesium
.
Math
.
toRadians
(
0
);
let
satelliteOrbitPositions
=
createMoonOrbit
(
inclination1
,
height
,
period
,
numberOfPoints
);
let
satellitecartesianPositions
=
satelliteOrbitPositions
.
map
(
position
=>
Cesium
.
Cartesian3
.
fromRadians
(
position
.
longitude
,
position
.
latitude
,
position
.
height
));
// viewer.entities.add({
// polyline: {
// positions: satellitecartesianPositions,
// width: 1,
// material: Cesium.Color.YELLOW
// }
// })
trajectoryPoints
.
push
(...
satellitecartesianPositions
)
trajectoryPoints
.
splice
(
55
)
//椭圆轨道
var
center
=
Cesium
.
Cartesian3
.
fromDegrees
(
0
,
0
);
// 经度, 纬度
// 定义椭圆的半长轴和半短轴 (单位: 米)
var
semiMajorAxis1
=
23167246.5
;
// 半长轴
var
semiMinorAxis
=
15563623.2
;
// 半短轴
// 计算椭圆上的点
let
positions
=
[];
var
numberOfPoints1
=
100
;
// 椭圆上点的数量,越多则越平滑
for
(
var
i
=
0
;
i
<
numberOfPoints1
;
i
++
)
{
var
angle
=
2
*
Cesium
.
Math
.
PI
*
i
/
numberOfPoints1
;
var
x
=
semiMajorAxis1
*
Math
.
cos
(
angle
);
var
y
=
semiMinorAxis
*
Math
.
sin
(
angle
);
// 将局部坐标转换为WGS84坐标
var
ellipsoid
=
viewer
.
scene
.
globe
.
ellipsoid
;
var
cartographic
=
ellipsoid
.
cartesianToCartographic
(
Cesium
.
Cartesian3
.
add
(
center
,
Cesium
.
Cartesian3
.
fromElements
(
x
,
y
,
0
),
new
Cesium
.
Cartesian3
()));
// 转换为经纬度坐标
var
longitude
=
Cesium
.
Math
.
toDegrees
(
cartographic
.
longitude
);
var
latitude
=
Cesium
.
Math
.
toDegrees
(
cartographic
.
latitude
);
var
height1
=
cartographic
.
height
;
// 添加经纬度坐标
positions
.
push
(
longitude
,
latitude
,
height1
);
}
const
center2
=
Cesium
.
Cartesian3
.
fromDegrees
(
0
,
0
,
2516480.5
)
// 闭合路径
positions
.
push
(
positions
[
0
],
positions
[
1
],
positions
[
2
]);
positions
=
Cesium
.
Cartesian3
.
fromDegreesArrayHeights
(
positions
)
for
(
let
i
=
0
;
i
<=
100
;
i
++
)
{
positions
[
i
].
x
=
positions
[
i
].
x
+
center2
.
x
positions
[
i
].
y
=
positions
[
i
].
y
+
center2
.
y
positions
[
i
].
z
=
positions
[
i
].
z
+
center2
.
z
// positions1.push(satellite1)
}
// viewer.entities.add({
// polyline: {
// positions: positions,
// width: 1,
// material: Cesium.Color.BLUE
// }
// })
positions
=
positions
.
splice
(
50
)
trajectoryPoints
.
push
(...
positions
)
//卫星轨道实体及轨道线
const
satellitePositions
=
new
Cesium
.
SampledPositionProperty
();
for
(
let
i
=
0
;
i
<
trajectoryPoints
.
length
;
i
++
)
{
const
time
=
Cesium
.
JulianDate
.
addSeconds
(
viewer
.
clock
.
startTime
,
i
*
period
/
trajectoryPoints
.
length
,
new
Cesium
.
JulianDate
());
satellitePositions
.
addSample
(
time
,
trajectoryPoints
[
i
]);
}
const
satelliteEntity
=
viewer
.
entities
.
add
({
name
:
'satellite'
,
availability
:
new
Cesium
.
TimeIntervalCollection
([
new
Cesium
.
TimeInterval
({
start
:
start
,
stop
:
stop
})]),
position
:
satellitePositions
,
orientation
:
new
Cesium
.
VelocityOrientationProperty
(
orbitPosition
),
// point: {
// pixelSize: 10,
// color: Cesium.Color.WHITE
// },
model
:
{
uri
:
'/src/model/卫星.gltf'
,
minimumPixelSize
:
50
,
scale
:
60.0
,
},
path
:
{
resolution
:
1
,
material
:
new
Cesium
.
PolylineGlowMaterialProperty
({
glowPower
:
0.1
,
color
:
Cesium
.
Color
.
YELLOWGREEN
}),
width
:
5
}
});
satelliteEntity
.
position
.
setInterpolationOptions
({
interpolationDegree
:
5
,
interpolationAlgorithm
:
Cesium
.
LagrangePolynomialApproximation
});
})
</
script
>
<
style
>
.all
{
display
:
block
;
position
:
absolute
;
top
:
0
;
left
:
0
;
border
:
none
;
width
:
100%
;
height
:
100%
}
.cesium-viewer-bottom
{
display
:
none
;
}
button
{
position
:
absolute
;
top
:
50px
;
left
:
50px
;
z-index
:
88
;
}
</
style
>
src/components/raotaiyng.vue
View file @
29b98d49
...
...
@@ -127,19 +127,19 @@ onMounted(() => {
let
moonEquatorPositions
=
computeMoonPosition
(
numberOfPoints
,
currentPosition
);
function
qq
()
{
// 创建代表月球赤道轨道的实体
const
satelliteOrbitEntity
=
viewer
.
entities
.
add
({
polyline
:
{
positions
:
moonEquatorPositions
,
width
:
2
,
material
:
new
Cesium
.
PolylineGlowMaterialProperty
({
glowPower
:
0.1
,
color
:
Cesium
.
Color
.
PINK
}),
}
});
}
//
function qq() {
//
// 创建代表月球赤道轨道的实体
//
const satelliteOrbitEntity = viewer.entities.add({
//
polyline: {
//
positions: moonEquatorPositions,
//
width: 2,
//
material: new Cesium.PolylineGlowMaterialProperty({
//
glowPower: 0.1,
//
color: Cesium.Color.PINK
//
}),
//
}
//
});
//
}
// 创建代表卫星的实体
const
satelliteEntity
=
viewer
.
entities
.
add
({
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment