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
0b630c3d
Commit
0b630c3d
authored
Aug 01, 2024
by
jlc
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update:矩形空间网格案例代码的修改
parent
85ed5a72
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
85 additions
and
80 deletions
+85
-80
rectangularSpaceGrid-function.js
...Set/rectangularSpaceGrid/rectangularSpaceGrid-function.js
+61
-77
rectangularSpaceGrid.vue
...es/sceneSet/rectangularSpaceGrid/rectangularSpaceGrid.vue
+24
-3
No files found.
src/examples/sceneSet/rectangularSpaceGrid/rectangularSpaceGrid-function.js
View file @
0b630c3d
export
function
addRectangularSpaceGrid
()
{
export
function
addRectangularSpaceGrid
(
viewer
)
{
const
script
=
document
.
createElement
(
'script'
);
// 定义矩形的中心位置和尺寸
script
.
src
=
'https://cesium.com/downloads/cesiumjs/releases/1.99/Build/Cesium/Cesium.js'
;
const
center
=
Cesium
.
Cartesian3
.
fromDegrees
(
120
,
30
)
;
script
.
onload
=
()
=>
{
const
width
=
200000
;
// 矩形的宽度,单位为米
window
.
Cesium
.
Ion
.
defaultAccessToken
=
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3Njg4ZWU5Yi1iZDhiLTRhYmUtOTRiYS04YjM5NmUwNjVmMDMiLCJpZCI6MjI3MzQ3LCJpYXQiOjE3MjA1MjA4Mjh9.E5XW4LnwgfVAaBC-znaYr61m4yK0-j2qEQhi9qwFFPE'
const
height
=
200000
;
// 矩形的高度,单位为米
const
viewer
=
new
window
.
Cesium
.
Viewer
(
'cesiumContainer'
,
{
// 定义网格参数
infoBox
:
false
,
const
numHorizontalLines
=
10
;
// 水平线数量
});
const
numVerticalLines
=
10
;
// 垂直线数量
// 定义矩形的中心位置和尺寸
const
center
=
Cesium
.
Cartesian3
.
fromDegrees
(
120
,
30
);
const
width
=
200000
;
// 矩形的宽度,单位为米
const
height
=
200000
;
// 矩形的高度,单位为米
// 定义网格参数
const
numHorizontalLines
=
10
;
// 水平线数量
const
numVerticalLines
=
10
;
// 垂直线数量
// 计算每个网格单元的大小
// 计算每个网格单元的大小
const
horizontalSpacing
=
width
/
numHorizontalLines
;
const
horizontalSpacing
=
width
/
numHorizontalLines
;
const
verticalSpacing
=
height
/
numVerticalLines
;
const
verticalSpacing
=
height
/
numVerticalLines
;
// 创建水平线
for
(
let
i
=
0
;
i
<=
numHorizontalLines
;
i
++
)
{
const
yOffset
=
(
i
-
numHorizontalLines
/
2
)
*
horizontalSpacing
;
const
startPoint
=
Cesium
.
Cartesian3
.
add
(
center
,
new
Cesium
.
Cartesian3
(
-
width
/
2
,
yOffset
,
0
),
new
Cesium
.
Cartesian3
()
);
const
endPoint
=
Cesium
.
Cartesian3
.
add
(
center
,
new
Cesium
.
Cartesian3
(
width
/
2
,
yOffset
,
0
),
new
Cesium
.
Cartesian3
()
);
viewer
.
entities
.
add
({
name
:
`Horizontal Line
${
i
}
`
,
polyline
:
{
positions
:
[
startPoint
,
endPoint
],
width
:
1
,
material
:
Cesium
.
Color
.
WHITE
}
});
}
// 创建垂直
线
// 创建水平
线
for
(
let
i
=
0
;
i
<=
numVertic
alLines
;
i
++
)
{
for
(
let
i
=
0
;
i
<=
numHorizont
alLines
;
i
++
)
{
const
xOffset
=
(
i
-
numVerticalLines
/
2
)
*
vertic
alSpacing
;
const
yOffset
=
(
i
-
numHorizontalLines
/
2
)
*
horizont
alSpacing
;
const
startPoint
=
Cesium
.
Cartesian3
.
add
(
const
startPoint
=
Cesium
.
Cartesian3
.
add
(
center
,
center
,
new
Cesium
.
Cartesian3
(
xOffset
,
-
height
/
2
,
0
),
new
Cesium
.
Cartesian3
(
-
width
/
2
,
yOffset
,
0
),
new
Cesium
.
Cartesian3
()
new
Cesium
.
Cartesian3
()
);
);
const
endPoint
=
Cesium
.
Cartesian3
.
add
(
const
endPoint
=
Cesium
.
Cartesian3
.
add
(
center
,
center
,
new
Cesium
.
Cartesian3
(
xOffset
,
height
/
2
,
0
),
new
Cesium
.
Cartesian3
(
width
/
2
,
yOffset
,
0
),
new
Cesium
.
Cartesian3
()
new
Cesium
.
Cartesian3
()
);
);
viewer
.
entities
.
add
({
viewer
.
entities
.
add
({
name
:
`Vertic
al Line
${
i
}
`
,
name
:
`Horizont
al Line
${
i
}
`
,
polyline
:
{
polyline
:
{
positions
:
[
startPoint
,
endPoint
],
positions
:
[
startPoint
,
endPoint
],
width
:
1
,
width
:
1
,
material
:
Cesium
.
Color
.
WHITE
material
:
Cesium
.
Color
.
WHITE
}
}
});
});
}
}
viewer
.
camera
.
flyTo
({
// 创建垂直线
destination
:
Cesium
.
Cartesian3
.
fromDegrees
(
120
,
30
,
300000
),
for
(
let
i
=
0
;
i
<=
numVerticalLines
;
i
++
)
{
orientation
:
{
const
xOffset
=
(
i
-
numVerticalLines
/
2
)
*
verticalSpacing
;
heading
:
Cesium
.
Math
.
toRadians
(
0
),
const
startPoint
=
Cesium
.
Cartesian3
.
add
(
pitch
:
Cesium
.
Math
.
toRadians
(
-
90
),
center
,
roll
:
0.0
new
Cesium
.
Cartesian3
(
xOffset
,
-
height
/
2
,
0
),
new
Cesium
.
Cartesian3
()
);
const
endPoint
=
Cesium
.
Cartesian3
.
add
(
center
,
new
Cesium
.
Cartesian3
(
xOffset
,
height
/
2
,
0
),
new
Cesium
.
Cartesian3
()
);
viewer
.
entities
.
add
({
name
:
`Vertical Line
${
i
}
`
,
polyline
:
{
positions
:
[
startPoint
,
endPoint
],
width
:
1
,
material
:
Cesium
.
Color
.
WHITE
}
}
});
});
};
}
document
.
head
.
appendChild
(
script
);
const
link
=
document
.
createElement
(
'link'
);
viewer
.
camera
.
flyTo
({
link
.
rel
=
'stylesheet'
;
destination
:
Cesium
.
Cartesian3
.
fromDegrees
(
120
,
30
,
300000
),
link
.
href
=
'https://cesium.com/downloads/cesiumjs/releases/1.119/Build/Cesium/Widgets/widgets.css'
;
orientation
:
{
document
.
head
.
appendChild
(
link
);
heading
:
Cesium
.
Math
.
toRadians
(
0
),
pitch
:
Cesium
.
Math
.
toRadians
(
-
90
),
roll
:
0.0
}
});
}
}
src/examples/sceneSet/rectangularSpaceGrid/rectangularSpaceGrid.vue
View file @
0b630c3d
<
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
{
addRectangularSpaceGrid
}
from
'./function'
;
import
{
addRectangularSpaceGrid
}
from
'./function'
;
let
viewer
;
onMounted
(()
=>
{
onMounted
(()
=>
{
addRectangularSpaceGrid
()
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
,
});
addRectangularSpaceGrid
(
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