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
80c534dc
Commit
80c534dc
authored
Aug 01, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:多颜色线案例代码结构的修改
parent
c47e4eab
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
104 additions
and
99 deletions
+104
-99
multiLine-function.js
src/examples/graphicElement/multiLine/multiLine-function.js
+80
-96
multiLine.vue
src/examples/graphicElement/multiLine/multiLine.vue
+24
-3
No files found.
src/examples/graphicElement/multiLine/multiLine-function.js
View file @
80c534dc
export
function
addMultiLine
()
{
export
function
addMultiLine
(
viewer
)
{
const
script
=
document
.
createElement
(
'script'
);
const
czml
=
[
script
.
src
=
'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js'
;
{
script
.
onload
=
()
=>
{
id
:
"document"
,
window
.
Cesium
.
Ion
.
defaultAccessToken
=
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
name
:
"CZML Geometries: Polyline"
,
version
:
"1.0"
,
const
viewer
=
new
window
.
Cesium
.
Viewer
(
'cesiumContainer'
,
{
},
infoBox
:
false
,
{
});
id
:
"redLine"
,
name
:
"Red line clamped to terain"
,
const
czml
=
[
polyline
:
{
{
positions
:
{
id
:
"document"
,
cartographicDegrees
:
[
-
75
,
35
,
0
,
-
125
,
35
,
0
],
name
:
"CZML Geometries: Polyline"
,
},
version
:
"1.0"
,
material
:
{
},
solidColor
:
{
{
color
:
{
id
:
"redLine"
,
rgba
:
[
255
,
0
,
0
,
255
],
name
:
"Red line clamped to terain"
,
polyline
:
{
positions
:
{
cartographicDegrees
:
[
-
75
,
35
,
0
,
-
125
,
35
,
0
],
},
material
:
{
solidColor
:
{
color
:
{
rgba
:
[
255
,
0
,
0
,
255
],
},
},
},
width
:
5
,
clampToGround
:
true
,
},
},
},
},
{
},
id
:
"blueLine"
,
width
:
5
,
name
:
"Glowing blue line on the surface"
,
clampToGround
:
true
,
polyline
:
{
},
positions
:
{
},
cartographicDegrees
:
[
-
75
,
37
,
0
,
-
125
,
37
,
0
],
{
},
id
:
"blueLine"
,
material
:
{
name
:
"Glowing blue line on the surface"
,
polylineGlow
:
{
polyline
:
{
color
:
{
positions
:
{
rgba
:
[
100
,
149
,
237
,
255
],
cartographicDegrees
:
[
-
75
,
37
,
0
,
-
125
,
37
,
0
],
},
},
glowPower
:
0.2
,
material
:
{
taperPower
:
0.5
,
polylineGlow
:
{
},
color
:
{
},
rgba
:
[
100
,
149
,
237
,
255
],
width
:
10
,
},
},
glowPower
:
0.2
,
taperPower
:
0.5
,
},
},
{
},
id
:
"orangeLine"
,
width
:
10
,
name
:
},
"Orange line with black outline at height and following the surface"
,
},
polyline
:
{
{
positions
:
{
id
:
"orangeLine"
,
cartographicDegrees
:
[
-
75
,
39
,
250000
,
-
125
,
39
,
250000
],
name
:
},
"Orange line with black outline at height and following the surface"
,
material
:
{
polyline
:
{
polylineOutline
:
{
positions
:
{
color
:
{
cartographicDegrees
:
[
-
75
,
39
,
250000
,
-
125
,
39
,
250000
],
rgba
:
[
255
,
165
,
0
,
255
],
},
},
material
:
{
outlineColor
:
{
polylineOutline
:
{
rgba
:
[
0
,
0
,
0
,
255
],
color
:
{
},
rgba
:
[
255
,
165
,
0
,
255
],
outlineWidth
:
2
,
},
},
outlineColor
:
{
},
rgba
:
[
0
,
0
,
0
,
255
],
width
:
5
,
},
},
outlineWidth
:
2
,
},
},
{
},
id
:
"dashedLine"
,
width
:
5
,
name
:
"Blue dashed line"
,
}
,
polyline
:
{
},
positions
:
{
{
cartographicDegrees
:
[
-
75
,
45
,
500000
,
-
125
,
45
,
500000
]
,
id
:
"dashedLine"
,
}
,
name
:
"Blue dashed line"
,
material
:
{
polyline
:
{
polylineDash
:
{
positions
:
{
color
:
{
cartographicDegrees
:
[
-
75
,
45
,
500000
,
-
125
,
45
,
500000
],
rgba
:
[
0
,
255
,
255
,
255
]
,
}
,
},
material
:
{
},
polylineDash
:
{
},
color
:
{
width
:
4
,
rgba
:
[
0
,
255
,
255
,
255
]
,
},
},
},
},
];
},
width
:
4
,
const
dataSourcePromise
=
Cesium
.
CzmlDataSource
.
load
(
czml
);
},
viewer
.
dataSources
.
add
(
dataSourcePromise
);
},
viewer
.
zoomTo
(
dataSourcePromise
);
];
};
document
.
head
.
appendChild
(
script
);
const
dataSourcePromise
=
Cesium
.
CzmlDataSource
.
load
(
czml
);
viewer
.
dataSources
.
add
(
dataSourcePromise
);
const
link
=
document
.
createElement
(
'link'
);
viewer
.
zoomTo
(
dataSourcePromise
);
link
.
rel
=
'stylesheet'
;
link
.
href
=
'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css'
;
document
.
head
.
appendChild
(
link
);
}
}
src/examples/graphicElement/multiLine/multiLine.vue
View file @
80c534dc
<
template
>
<
template
>
<div
id=
"cesiumContainer"
class=
"cesium-container"
></div>
<div
id=
"cesiumContainer"
class=
"cesium-container"
></div>
</
template
>
</
template
>
<
script
setup
>
<
script
setup
>
import
{
onMounted
}
from
'vue'
;
import
{
onMounted
}
from
'vue'
;
import
{
addMultiLine
}
from
'./function'
;
import
{
addMultiLine
}
from
'./function'
;
let
viewer
;
onMounted
(()
=>
{
onMounted
(()
=>
{
addMultiLine
()
const
script
=
document
.
createElement
(
'script'
);
script
.
src
=
'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js'
;
script
.
onload
=
()
=>
{
window
.
Cesium
.
Ion
.
defaultAccessToken
=
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
viewer
=
new
window
.
Cesium
.
Viewer
(
'cesiumContainer'
,
{
infoBox
:
false
,
});
addMultiLine
(
viewer
)
};
document
.
head
.
appendChild
(
script
);
const
link
=
document
.
createElement
(
'link'
);
link
.
rel
=
'stylesheet'
;
link
.
href
=
'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css'
;
document
.
head
.
appendChild
(
link
);
});
});
</
script
>
</
script
>
<
style
>
<
style
>
.cesium-container
{
.cesium-container
{
width
:
100%
;
width
:
100%
;
height
:
100vh
;
height
:
100vh
;
}
}
</
style
>
</
style
>
\ No newline at end of file
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