Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
C
cesium-frame
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
jlc
cesium-frame
Commits
3c7834d2
Commit
3c7834d2
authored
Aug 06, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:指定连接类型案例的修改
parent
e5dafbfa
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
162 additions
and
9 deletions
+162
-9
SpecifyConnectionType.png
src/assets/SpecifyConnectionType.png
+0
-0
specifyConnectionType-function.js
...e/specifyConnectionType/specifyConnectionType-function.js
+145
-2
specifyConnectionType.vue
...s/visible/specifyConnectionType/specifyConnectionType.vue
+16
-6
ElementMap.js
src/views/ElementMap.js
+1
-1
No files found.
src/assets/SpecifyConnectionType.png
0 → 100644
View file @
3c7834d2
502 KB
src/examples/visible/specifyConnectionType/specifyConnectionType-function.js
View file @
3c7834d2
...
...
@@ -91,9 +91,153 @@ export class SpecifyConnectionType {
});
}
// 连接方式为圆锥
useCone
()
{
function
createCone
(
viewer
,
satellitePositionProperty
,
stationPosition
,
color
,
maxDistance
)
{
return
viewer
.
scene
.
primitives
.
add
(
new
Cesium
.
Primitive
({
geometryInstances
:
new
Cesium
.
GeometryInstance
({
geometry
:
Cesium
.
EllipsoidGeometry
.
createGeometry
(
new
Cesium
.
EllipsoidGeometry
({
vertexFormat
:
Cesium
.
PerInstanceColorAppearance
.
VERTEX_FORMAT
,
radii
:
new
Cesium
.
Cartesian3
(
50000
,
50000
,
100000
)
// 圆锥的半径和长度
})),
modelMatrix
:
Cesium
.
Matrix4
.
IDENTITY
,
attributes
:
{
color
:
Cesium
.
ColorGeometryInstanceAttribute
.
fromColor
(
color
)
},
id
:
'Cone'
}),
appearance
:
new
Cesium
.
PerInstanceColorAppearance
({
translucent
:
true
,
closed
:
false
}),
releaseGeometryInstances
:
false
,
shadows
:
Cesium
.
ShadowMode
.
DISABLED
}));
}
// 获取测站位置
const
stationOnePosition
=
Cesium
.
Cartesian3
.
fromDegrees
(...
this
.
stationOne
.
position
);
const
stationTwoPosition
=
Cesium
.
Cartesian3
.
fromDegrees
(...
this
.
stationTwo
.
position
);
const
stationThreePosition
=
Cesium
.
Cartesian3
.
fromDegrees
(...
this
.
stationThree
.
position
);
// 最大连接显示距离
const
maxDistance
=
5000000
;
// 创建圆锥
this
.
connections
.
push
(
createCone
(
this
.
viewer
,
this
.
satelliteEntity
.
position
,
stationOnePosition
,
Cesium
.
Color
.
BLUE
,
maxDistance
));
this
.
connections
.
push
(
createCone
(
this
.
viewer
,
this
.
satelliteEntity
.
position
,
stationTwoPosition
,
Cesium
.
Color
.
GREEN
,
maxDistance
));
this
.
connections
.
push
(
createCone
(
this
.
viewer
,
this
.
satelliteEntity
.
position
,
stationThreePosition
,
Cesium
.
Color
.
YELLOW
,
maxDistance
));
}
// 切换圆锥的显示和隐藏
toggleCone
()
{
if
(
this
.
visible
)
{
this
.
connections
.
forEach
(
connection
=>
{
this
.
viewer
.
scene
.
primitives
.
remove
(
connection
);
});
this
.
connections
=
[];
}
else
{
this
.
useCone
();
}
this
.
visible
=
!
this
.
visible
;
}
// 连接方式为脉冲线
useTransmitLine
()
{
function
createConnection
(
viewer
,
satellitePositionProperty
,
stationPosition
,
color
,
maxDistance
)
{
const
positions
=
new
Cesium
.
CallbackProperty
((
time
)
=>
{
const
satellitePosition
=
satellitePositionProperty
.
getValue
(
time
);
const
distance
=
Cesium
.
Cartesian3
.
distance
(
satellitePosition
,
stationPosition
);
if
(
distance
>
maxDistance
)
{
return
[];
// 返回空数组隐藏连线
}
return
[
satellitePosition
,
stationPosition
];
},
false
);
const
FlowingLineMaterialGLSL
=
"float SPEED_STEP = 0.01;
\
n"
+
"vec4 drawLight(float xPos, vec2 st, float headOffset, float tailOffset, float widthOffset){
\
n"
+
"float lineLength = smoothstep(xPos + headOffset, xPos, st.x) - smoothstep(xPos, xPos - tailOffset, st.x);
\
n"
+
"float lineWidth = smoothstep(widthOffset, 0.5, st.y) - smoothstep(0.5, 1.0 - widthOffset, st.y);
\
n"
+
"return vec4(lineLength * lineWidth);
\
n"
+
"}
\
n"
+
"czm_material czm_getMaterial(czm_materialInput materialInput)
\
n"
+
"{
\
n"
+
"czm_material m = czm_getDefaultMaterial(materialInput);
\
n"
+
"float sinTime = sin(czm_frameNumber * SPEED_STEP * speed);
\
n"
+
"vec4 v4_core;
\
n"
+
"vec4 v4_color;
\
n"
+
"float xPos = 0.0;
\
n"
+
"if (sinTime < 0.0){
\
n"
+
"xPos = cos(czm_frameNumber * SPEED_STEP * speed)+ 1.0 - tailsize;
\
n"
+
"}else{
\
n"
+
"xPos = -cos(czm_frameNumber * SPEED_STEP * speed)+ 1.0 - tailsize;
\
n"
+
"}
\
n"
+
"v4_color = drawLight(xPos, materialInput.st, headsize, tailsize, widthoffset);
\
n"
+
"v4_core = drawLight(xPos, materialInput.st, coresize, coresize*2.0, widthoffset*2.0);
\
n"
+
"m.diffuse = color.xyz + v4_core.xyz*v4_core.w*0.8;
\
n"
+
"m.alpha = pow(v4_color.w, 3.0);
\
n"
+
"return m;
\
n"
+
"}
\
n"
;
const
FlowingLineMaterial
=
new
Cesium
.
Material
({
fabric
:
{
type
:
"FlowingLineMaterial"
,
uniforms
:
{
color
:
color
,
speed
:
1.5
,
headsize
:
0.05
,
tailsize
:
0.5
,
widthoffset
:
0.1
,
coresize
:
0.05
,
},
source
:
FlowingLineMaterialGLSL
,
},
});
return
viewer
.
scene
.
primitives
.
add
(
new
Cesium
.
Primitive
({
geometryInstances
:
new
Cesium
.
GeometryInstance
({
geometry
:
new
Cesium
.
PolylineGeometry
({
positions
:
positions
,
width
:
20.0
,
vertexFormat
:
Cesium
.
VertexFormat
.
ALL
,
}),
}),
appearance
:
new
Cesium
.
PolylineMaterialAppearance
({
material
:
FlowingLineMaterial
,
}),
}));
}
// 获取测站位置
const
stationOnePosition
=
Cesium
.
Cartesian3
.
fromDegrees
(...
this
.
stationOne
.
position
);
const
stationTwoPosition
=
Cesium
.
Cartesian3
.
fromDegrees
(...
this
.
stationTwo
.
position
);
const
stationThreePosition
=
Cesium
.
Cartesian3
.
fromDegrees
(...
this
.
stationThree
.
position
);
// 最大连接显示距离
const
maxDistance
=
5000000
;
// 创建连线
this
.
connections
.
push
(
createConnection
(
this
.
viewer
,
this
.
satelliteEntity
.
position
,
stationOnePosition
,
Cesium
.
Color
.
BLUE
,
maxDistance
));
this
.
connections
.
push
(
createConnection
(
this
.
viewer
,
this
.
satelliteEntity
.
position
,
stationTwoPosition
,
Cesium
.
Color
.
GREEN
,
maxDistance
));
this
.
connections
.
push
(
createConnection
(
this
.
viewer
,
this
.
satelliteEntity
.
position
,
stationThreePosition
,
Cesium
.
Color
.
YELLOW
,
maxDistance
));
}
// 切换脉冲线的显示和隐藏
toggleTransmitLine
()
{
if
(
this
.
visible
)
{
this
.
connections
.
forEach
(
connection
=>
{
this
.
viewer
.
scene
.
primitives
.
remove
(
connection
);
});
this
.
connections
=
[];
}
else
{
this
.
useTransmitLine
();
}
this
.
visible
=
!
this
.
visible
;
}
// 连接方式为静态线
useStaticLines
()
{
// 创建连线函数
function
createConnection
(
viewer
,
satellitePositionProperty
,
stationPosition
,
color
,
maxDistance
)
{
return
viewer
.
entities
.
add
({
polyline
:
{
...
...
@@ -144,7 +288,6 @@ export class SpecifyConnectionType {
// 连接方式为虚线
useDashedLine
()
{
// 创建连线函数
function
createConnection
(
viewer
,
satellitePositionProperty
,
stationPosition
,
color
,
maxDistance
)
{
return
viewer
.
entities
.
add
({
polyline
:
{
...
...
src/examples/visible/specifyConnectionType/specifyConnectionType.vue
View file @
3c7834d2
...
...
@@ -2,11 +2,11 @@
<div
id=
"cesiumContainer"
class=
"cesium-container"
></div>
<div
class=
"btn-class"
>
<button>
多个起点的脉冲线
</button>
<button>
圆锥
</button>
<button
@
click=
"cone"
>
圆锥
</button>
<button>
脉冲圆锥
</button>
<button
>
一个脉冲的
线
</button>
<button
@
click=
"
S
taticLines"
>
静态线
</button>
<button
@
click=
"
D
ashedLine"
>
虚线
</button>
<button
@
click=
"transmitLine"
>
脉冲
线
</button>
<button
@
click=
"
s
taticLines"
>
静态线
</button>
<button
@
click=
"
d
ashedLine"
>
虚线
</button>
</div>
</
template
>
...
...
@@ -98,13 +98,23 @@ onMounted(() => {
document
.
head
.
appendChild
(
link
);
});
// 连接方式为脉冲圆锥类方法的调用
function
cone
()
{
satellite
.
toggleCone
();
}
// 连接方式为脉冲线类方法的调用
function
transmitLine
()
{
satellite
.
toggleTransmitLine
();
}
// 连接方式为静态线类方法的调用
function
S
taticLines
()
{
function
s
taticLines
()
{
satellite
.
toggleStaticLines
();
}
// 连接方式为虚线类方法的调用
function
D
ashedLine
()
{
function
d
ashedLine
()
{
satellite
.
toggleDashedLine
();
}
</
script
>
...
...
src/views/ElementMap.js
View file @
3c7834d2
...
...
@@ -90,7 +90,7 @@ export const elementMovingMap = {
export
const
elementVisibleMap
=
{
指定连接类型
:
{
title
:
'指定连接类型'
,
pngUrl
:
'/src/assets/
RocketLaunchIntoOrbit
.png'
pngUrl
:
'/src/assets/
SpecifyConnectionType
.png'
}
}
...
...
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