easy-three-utils 0.0.332 → 0.0.334
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cesium/components/react/Timeline/index.module.less +45 -0
- package/cesium/components/react/Timeline/index.tsx +135 -0
- package/cesium/config/cesium.config.ts +55 -0
- package/cesium/config/cesium.dict.ts +21 -0
- package/cesium/index.ts +168 -75
- package/cesium/js/measure.js +19 -17
- package/cesium/js/measure1.ts +17 -3
- package/cesium/{cameraRecord.ts → testFunc/cameraRecord.ts} +3 -3
- package/cesium/utils/useDrawPolygon.ts +16 -2
- package/cesium/utils/useMeasure.ts +3 -2
- package/cesium/utils/usePath.ts +100 -0
- package/package.json +1 -1
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
.slider-box {
|
|
2
|
+
position: absolute;
|
|
3
|
+
z-index: 2;
|
|
4
|
+
bottom: 0;
|
|
5
|
+
width: 360px;
|
|
6
|
+
padding: 10px;
|
|
7
|
+
background: rgba(6, 38, 68, 0.7);
|
|
8
|
+
border: solid 1px #26a1ff;
|
|
9
|
+
display: flex;
|
|
10
|
+
left: calc(50vw - 180px);
|
|
11
|
+
|
|
12
|
+
.left-content {
|
|
13
|
+
color: white;
|
|
14
|
+
font-size: 13px;
|
|
15
|
+
writing-mode: vertical-rl;
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
padding-right: 12px;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.right-content {
|
|
22
|
+
flex: 1;
|
|
23
|
+
|
|
24
|
+
.time-text {
|
|
25
|
+
color: white;
|
|
26
|
+
font-size: 12px;
|
|
27
|
+
display: flex;
|
|
28
|
+
justify-content: flex-end;
|
|
29
|
+
width: 98%;
|
|
30
|
+
margin-bottom: 11px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.control-btn {
|
|
34
|
+
display: flex;
|
|
35
|
+
align-items: center;
|
|
36
|
+
justify-content: center;
|
|
37
|
+
|
|
38
|
+
img {
|
|
39
|
+
padding: 0 12px;
|
|
40
|
+
cursor: pointer;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import { Slider, ConfigProvider } from "antd";
|
|
3
|
+
import * as Cesium from "cesium";
|
|
4
|
+
import dayjs from 'dayjs';
|
|
5
|
+
import duration from 'dayjs/plugin/duration';
|
|
6
|
+
|
|
7
|
+
import { viewer } from '@/hooks/cesium'
|
|
8
|
+
|
|
9
|
+
import Styles from './index.module.less'
|
|
10
|
+
|
|
11
|
+
dayjs.extend(duration);
|
|
12
|
+
|
|
13
|
+
const Timeline: React.FC<{
|
|
14
|
+
cesiumStatus: boolean;
|
|
15
|
+
}> = (props) => {
|
|
16
|
+
const [percent, setPercent] = useState(0)
|
|
17
|
+
|
|
18
|
+
const theme = {
|
|
19
|
+
components: {
|
|
20
|
+
Slider: {
|
|
21
|
+
railBg: '#bfbfbf',
|
|
22
|
+
railHoverBg: '#bfbfbf',
|
|
23
|
+
trackBg: '#176fdbff'
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const setClockEvent = (clock: Cesium.Clock) => {
|
|
29
|
+
const totalSeconds = Cesium.JulianDate.secondsDifference(
|
|
30
|
+
clock.stopTime,
|
|
31
|
+
clock.startTime
|
|
32
|
+
)
|
|
33
|
+
const elapsedSeconds = Cesium.JulianDate.secondsDifference(
|
|
34
|
+
clock.currentTime,
|
|
35
|
+
clock.startTime
|
|
36
|
+
)
|
|
37
|
+
|
|
38
|
+
const timeDuration = dayjs.duration(elapsedSeconds, 'seconds')
|
|
39
|
+
const formattedTime = timeDuration.format('HH:mm:ss')
|
|
40
|
+
setCurrentTime(() => formattedTime)
|
|
41
|
+
|
|
42
|
+
const newPercent = (elapsedSeconds / totalSeconds) * 100
|
|
43
|
+
setPercent(() => newPercent);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
const addViewerClockEvent = () => {
|
|
47
|
+
viewer.clock.onTick.addEventListener(setClockEvent)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const removeViewerClockEvent = () => {
|
|
51
|
+
viewer.clock.onTick.addEventListener(setClockEvent)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
const onSliderChange = (value: number) => {
|
|
55
|
+
setPercent(() => value);
|
|
56
|
+
const totalSeconds = Cesium.JulianDate.secondsDifference(
|
|
57
|
+
viewer.clock.stopTime,
|
|
58
|
+
viewer.clock.startTime
|
|
59
|
+
);
|
|
60
|
+
const newTime = Cesium.JulianDate.addSeconds(
|
|
61
|
+
viewer.clock.startTime,
|
|
62
|
+
(value / 100) * totalSeconds,
|
|
63
|
+
new Cesium.JulianDate()
|
|
64
|
+
);
|
|
65
|
+
viewer.clock.currentTime = newTime;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
type TContronType = 'pause' | 'play' | 'stop'
|
|
69
|
+
const control = {
|
|
70
|
+
play: () => {
|
|
71
|
+
viewer.clock.shouldAnimate = true
|
|
72
|
+
},
|
|
73
|
+
pause: () => {
|
|
74
|
+
viewer.clock.shouldAnimate = false
|
|
75
|
+
},
|
|
76
|
+
stop: () => {
|
|
77
|
+
viewer.clock.currentTime = viewer.clock.startTime
|
|
78
|
+
viewer.clock.shouldAnimate = false
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
const [totalTime, setTotalTime] = useState('00:00:00')
|
|
83
|
+
const [currentTime, setCurrentTime] = useState('00:00:00')
|
|
84
|
+
const initTimeDisplay = () => {
|
|
85
|
+
const seconds = viewer.clock.stopTime.secondsOfDay - viewer.clock.startTime.secondsOfDay
|
|
86
|
+
const timeDuration = dayjs.duration(seconds, 'seconds')
|
|
87
|
+
const formattedTime = timeDuration.format('HH:mm:ss')
|
|
88
|
+
setTotalTime(() => formattedTime)
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
|
|
93
|
+
if (props.cesiumStatus) {
|
|
94
|
+
addViewerClockEvent()
|
|
95
|
+
initTimeDisplay()
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
return () => {
|
|
99
|
+
removeViewerClockEvent()
|
|
100
|
+
}
|
|
101
|
+
}, [props.cesiumStatus])
|
|
102
|
+
|
|
103
|
+
return (
|
|
104
|
+
<ConfigProvider theme={{
|
|
105
|
+
...theme
|
|
106
|
+
}}>
|
|
107
|
+
<div className={Styles['slider-box']}>
|
|
108
|
+
<div className={Styles['left-content']}>
|
|
109
|
+
推演控制
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div className={Styles['right-content']}>
|
|
113
|
+
<Slider
|
|
114
|
+
min={0}
|
|
115
|
+
max={100}
|
|
116
|
+
step={0.1}
|
|
117
|
+
value={percent}
|
|
118
|
+
onChange={(value: number) => onSliderChange(value)}
|
|
119
|
+
/>
|
|
120
|
+
<div className={Styles['time-text']}>{currentTime}/{totalTime}</div>
|
|
121
|
+
<div className={Styles['control-btn']}>
|
|
122
|
+
{
|
|
123
|
+
(['pause', 'play', 'stop'] as TContronType[]).map(item =>
|
|
124
|
+
<img key={item} onClick={() => control[item]()} src={require(`/image/${item}.png`)} />
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
</div>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
</ConfigProvider>
|
|
132
|
+
)
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
export default Timeline
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
|
|
2
|
+
import * as dict from './cesium.dict'
|
|
3
|
+
import * as Cesium from 'cesium'
|
|
4
|
+
|
|
5
|
+
export default {
|
|
6
|
+
//token&container
|
|
7
|
+
containerID: 'cesiumBox',
|
|
8
|
+
defaultAccessToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMjBmZGE5MS02ZTE1LTRjNzAtYmJjNS0zNTJhNmI1MDQ4YmQiLCJpZCI6OTQ5NzAsImlhdCI6MTY1MzM3ODM0Mn0.OcAxsSXF6VtqtI83SpUc5oL1fFxSFM60O3gp5YKyDeA',
|
|
9
|
+
|
|
10
|
+
//地形服务配置
|
|
11
|
+
imagery: {
|
|
12
|
+
status: dict.EImageryStatus.ENABLEDOFFLINE,
|
|
13
|
+
config: {
|
|
14
|
+
url: 'http://127.0.0.1:3001/{TileMatrix}/{TileCol}/{TileRow}.jpg',
|
|
15
|
+
layer: 'acimage',
|
|
16
|
+
format: 'image/jpeg',
|
|
17
|
+
tileMatrixSetID: 'wgs84',
|
|
18
|
+
style: 'default',
|
|
19
|
+
tilingScheme: new Cesium.GeographicTilingScheme(),
|
|
20
|
+
tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
|
|
21
|
+
maximumLevel: 20
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
terrain: {
|
|
25
|
+
status: dict.ETerrainStatus.ENABLEDOFFLINE,
|
|
26
|
+
config: {
|
|
27
|
+
url: 'http://127.0.0.1:3002'
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
//通用工具配置
|
|
32
|
+
debug: false, //帧数
|
|
33
|
+
shadows: false, //阴影
|
|
34
|
+
lighting: false, //太阳光
|
|
35
|
+
depthTerrain: true, //地形深度检测
|
|
36
|
+
controllerStyle: dict.EControllerStyle.THREE, //操控习惯
|
|
37
|
+
|
|
38
|
+
// cesium基础配置
|
|
39
|
+
cesiumOptions: {
|
|
40
|
+
contextOptions: {
|
|
41
|
+
requestWebgl1: true
|
|
42
|
+
},
|
|
43
|
+
animation: false,
|
|
44
|
+
baseLayerPicker: false,
|
|
45
|
+
fullscreenButton: false,
|
|
46
|
+
geocoder: false,
|
|
47
|
+
homeButton: false,
|
|
48
|
+
infoBox: false,
|
|
49
|
+
sceneModePicker: false,
|
|
50
|
+
selectionIndicator: false,
|
|
51
|
+
timeline: false,
|
|
52
|
+
navigationHelpButton: false,
|
|
53
|
+
navigationInstructionsInitiallyVisible: false
|
|
54
|
+
}
|
|
55
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
enum ETerrainStatus {
|
|
2
|
+
ENABLEDLINE = 'enabledLine',
|
|
3
|
+
ENABLEDOFFLINE = 'enabledOffline',
|
|
4
|
+
DISABLED = 'disabled'
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
enum EImageryStatus {
|
|
8
|
+
ENABLEDLINE = 'enabledLine',
|
|
9
|
+
ENABLEDOFFLINE = 'enabledOffline'
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
enum EControllerStyle {
|
|
13
|
+
CESIUM = 'cesium',
|
|
14
|
+
THREE = 'three'
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export {
|
|
18
|
+
ETerrainStatus,
|
|
19
|
+
EImageryStatus,
|
|
20
|
+
EControllerStyle
|
|
21
|
+
}
|
package/cesium/index.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import * as Cesium from 'cesium'
|
|
2
|
-
import
|
|
3
|
-
import * as
|
|
2
|
+
import config from './config/cesium.config'
|
|
3
|
+
import * as dict from './config/cesium.dict'
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
import * as hooks from './utils'
|
|
6
6
|
|
|
7
|
-
import type { IRecord } from './cameraRecord'
|
|
7
|
+
import type { IRecord } from './testFunc/cameraRecord'
|
|
8
8
|
|
|
9
9
|
type TCesiumUtilsType = {
|
|
10
10
|
dict: typeof hooks.dict;
|
|
@@ -16,59 +16,65 @@ type TCesiumUtilsType = {
|
|
|
16
16
|
measure: ReturnType<typeof hooks.useMeasure>;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
let viewer: Cesium.Viewer;
|
|
20
|
+
|
|
19
21
|
const useCesium = () => {
|
|
20
|
-
|
|
22
|
+
|
|
23
|
+
let handler: Cesium.ScreenSpaceEventHandler;
|
|
24
|
+
|
|
25
|
+
const updateController = (viewer: Cesium.Viewer) => {
|
|
26
|
+
viewer.scene.screenSpaceCameraController.tiltEventTypes = [
|
|
27
|
+
Cesium.CameraEventType.LEFT_DRAG
|
|
28
|
+
]
|
|
29
|
+
|
|
30
|
+
viewer.scene.screenSpaceCameraController.zoomEventTypes = [
|
|
31
|
+
Cesium.CameraEventType.MIDDLE_DRAG,
|
|
32
|
+
Cesium.CameraEventType.WHEEL,
|
|
33
|
+
Cesium.CameraEventType.PINCH
|
|
34
|
+
]
|
|
35
|
+
|
|
36
|
+
viewer.scene.screenSpaceCameraController.rotateEventTypes = [
|
|
37
|
+
Cesium.CameraEventType.RIGHT_DRAG
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
const load = async (callback: (viewer: Cesium.Viewer, utils: TCesiumUtilsType) => void, ev: {
|
|
21
42
|
leftClickEvent: (viewer: Cesium.Viewer, e: Cesium.ScreenSpaceEventHandler.PositionedEvent) => void,
|
|
43
|
+
rightClickEvent: (viewer: Cesium.Viewer, e: Cesium.ScreenSpaceEventHandler.PositionedEvent) => void,
|
|
22
44
|
moveEvent: (viewer: Cesium.Viewer, e: Cesium.ScreenSpaceEventHandler.MotionEvent) => void
|
|
23
45
|
}) => {
|
|
24
46
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
// style: 'default'
|
|
57
|
-
// }
|
|
58
|
-
// }
|
|
59
|
-
|
|
60
|
-
// const wmtsimage = new Cesium.WebMapTileServiceImageryProvider({
|
|
61
|
-
// url: appConfig.WMTSMap.url,
|
|
62
|
-
// layer: appConfig.WMTSMap.layer,
|
|
63
|
-
// format: appConfig.WMTSMap.format,
|
|
64
|
-
// tileMatrixSetID: appConfig.WMTSMap.tileMatrixSetID,
|
|
65
|
-
// style: appConfig.WMTSMap.style,
|
|
66
|
-
// tilingScheme: new Cesium.GeographicTilingScheme(),
|
|
67
|
-
// maximumLevel: 19,
|
|
68
|
-
// tileMatrixLabels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20"],
|
|
69
|
-
// });
|
|
70
|
-
// viewer.imageryLayers.removeAll();
|
|
71
|
-
// viewer.imageryLayers.addImageryProvider(wmtsimage);
|
|
47
|
+
Cesium.Ion.defaultAccessToken = config.defaultAccessToken
|
|
48
|
+
|
|
49
|
+
viewer = new Cesium.Viewer(config.containerID, config.cesiumOptions);
|
|
50
|
+
(viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none"
|
|
51
|
+
viewer.scene.skyAtmosphere.show = true
|
|
52
|
+
|
|
53
|
+
viewer.scene.debugShowFramesPerSecond = config.debug
|
|
54
|
+
viewer.scene.globe.depthTestAgainstTerrain = config.depthTerrain
|
|
55
|
+
viewer.scene.globe.enableLighting = config.lighting
|
|
56
|
+
|
|
57
|
+
if (config.shadows) {
|
|
58
|
+
viewer.shadows = true
|
|
59
|
+
viewer.scene.globe.shadows = Cesium.ShadowMode.ENABLED
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
if (config.imagery.status === dict.EImageryStatus.ENABLEDOFFLINE) {
|
|
63
|
+
viewer.imageryLayers.get(0).show = false
|
|
64
|
+
const imageryProvider = new Cesium.WebMapTileServiceImageryProvider(config.imagery.config)
|
|
65
|
+
viewer.imageryLayers.addImageryProvider(imageryProvider)
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
if (config.terrain.status === dict.ETerrainStatus.ENABLEDLINE) {
|
|
69
|
+
viewer.terrainProvider = await Cesium.createWorldTerrainAsync({
|
|
70
|
+
requestVertexNormals: true,
|
|
71
|
+
requestWaterMask: true
|
|
72
|
+
})
|
|
73
|
+
} else if (config.terrain.status === dict.ETerrainStatus.ENABLEDOFFLINE) {
|
|
74
|
+
viewer.imageryLayers.get(0).show = false
|
|
75
|
+
const terrainProvider = Cesium.CesiumTerrainProvider.fromUrl(config.terrain.config.url)
|
|
76
|
+
viewer.terrainProvider = await terrainProvider
|
|
77
|
+
}
|
|
72
78
|
|
|
73
79
|
const customCollection = hooks.useCustomCollection(viewer)
|
|
74
80
|
const drawPolygon = hooks.useDrawPolygon(viewer, {
|
|
@@ -79,6 +85,10 @@ const useCesium = () => {
|
|
|
79
85
|
const weather = hooks.useWeather(viewer)
|
|
80
86
|
const measure = hooks.useMeasure(viewer)
|
|
81
87
|
|
|
88
|
+
if (config.controllerStyle === dict.EControllerStyle.THREE) {
|
|
89
|
+
updateController(viewer)
|
|
90
|
+
}
|
|
91
|
+
|
|
82
92
|
callback(viewer, {
|
|
83
93
|
dict: hooks.dict,
|
|
84
94
|
customCollection,
|
|
@@ -88,31 +98,48 @@ const useCesium = () => {
|
|
|
88
98
|
measure
|
|
89
99
|
})
|
|
90
100
|
|
|
91
|
-
|
|
101
|
+
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
|
|
92
102
|
|
|
93
103
|
handler.setInputAction(((event) => {
|
|
94
104
|
ev.leftClickEvent(viewer, event)
|
|
95
105
|
}) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
|
96
106
|
|
|
107
|
+
handler.setInputAction(((event) => {
|
|
108
|
+
ev.rightClickEvent(viewer, event)
|
|
109
|
+
}) as Cesium.ScreenSpaceEventHandler.PositionedEventCallback, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
|
110
|
+
|
|
97
111
|
handler.setInputAction(((event) => {
|
|
98
112
|
ev.moveEvent(viewer, event)
|
|
99
113
|
}) as Cesium.ScreenSpaceEventHandler.MotionEventCallback, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
|
100
114
|
}
|
|
101
115
|
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
Cesium.CameraEventType.LEFT_DRAG
|
|
105
|
-
]
|
|
116
|
+
const dispose = (viewer: Cesium.Viewer) => {
|
|
117
|
+
handler && handler.destroy()
|
|
106
118
|
|
|
107
|
-
viewer.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
119
|
+
if (viewer && !viewer.isDestroyed()) {
|
|
120
|
+
viewer.entities.removeAll();
|
|
121
|
+
viewer.dataSources.removeAll();
|
|
122
|
+
viewer.imageryLayers.removeAll();
|
|
123
|
+
viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
|
|
124
|
+
viewer.screenSpaceEventHandler?.destroy();
|
|
125
|
+
viewer.destroy();
|
|
126
|
+
}
|
|
127
|
+
}
|
|
112
128
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
129
|
+
const getPosition = (viewer: Cesium.Viewer, e: Cesium.ScreenSpaceEventHandler.PositionedEvent) => {
|
|
130
|
+
const ray = viewer.camera.getPickRay(e.position);
|
|
131
|
+
const cartesian = viewer.scene.globe.pick(ray, viewer.scene);
|
|
132
|
+
const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
|
|
133
|
+
const lng = Cesium.Math.toDegrees(cartographic.longitude);
|
|
134
|
+
const lat = Cesium.Math.toDegrees(cartographic.latitude);
|
|
135
|
+
const height = cartographic.height
|
|
136
|
+
|
|
137
|
+
return {
|
|
138
|
+
cartesian,
|
|
139
|
+
lng,
|
|
140
|
+
lat,
|
|
141
|
+
height
|
|
142
|
+
}
|
|
116
143
|
}
|
|
117
144
|
|
|
118
145
|
const getCamera = (viewer: Cesium.Viewer) => {
|
|
@@ -132,11 +159,11 @@ const useCesium = () => {
|
|
|
132
159
|
|
|
133
160
|
const setCamera = (viewer: Cesium.Viewer) => {
|
|
134
161
|
viewer.camera.flyTo({
|
|
135
|
-
destination: new Cesium.Cartesian3(-
|
|
162
|
+
destination: new Cesium.Cartesian3(-2861904.995492709, 7226032.775714475, 1792790.547405678),
|
|
136
163
|
orientation: {
|
|
137
|
-
heading: 0.
|
|
138
|
-
pitch: -1.
|
|
139
|
-
roll: 6.
|
|
164
|
+
heading: 0.3720644640946844,
|
|
165
|
+
pitch: -1.2461928516756395,
|
|
166
|
+
roll: 6.279678267113614
|
|
140
167
|
}
|
|
141
168
|
})
|
|
142
169
|
}
|
|
@@ -165,20 +192,86 @@ const useCesium = () => {
|
|
|
165
192
|
viewer.flyTo(tileset)
|
|
166
193
|
}
|
|
167
194
|
|
|
195
|
+
const getViewRectangle = (viewer: Cesium.Viewer) => {
|
|
196
|
+
const rectangle = viewer.camera.computeViewRectangle()
|
|
197
|
+
|
|
198
|
+
const northwest = Cesium.Rectangle.northwest(rectangle)
|
|
199
|
+
const northwestLon = Cesium.Math.toDegrees(northwest.longitude)
|
|
200
|
+
const northwestLat = Cesium.Math.toDegrees(northwest.latitude)
|
|
201
|
+
|
|
202
|
+
const southeast = Cesium.Rectangle.southeast(rectangle)
|
|
203
|
+
const southeastLon = Cesium.Math.toDegrees(southeast.longitude)
|
|
204
|
+
const southeastLat = Cesium.Math.toDegrees(southeast.latitude)
|
|
205
|
+
|
|
206
|
+
return {
|
|
207
|
+
northwest: {
|
|
208
|
+
lon: northwestLon,
|
|
209
|
+
lat: northwestLat
|
|
210
|
+
},
|
|
211
|
+
southeast: {
|
|
212
|
+
lon: southeastLon,
|
|
213
|
+
lat: southeastLat
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
const getRoom = (viewer: Cesium.Viewer) => {
|
|
219
|
+
const h = viewer.camera.positionCartographic.height
|
|
220
|
+
if (h <= 100) {
|
|
221
|
+
return 19
|
|
222
|
+
} else if (h < 300) {
|
|
223
|
+
return 18
|
|
224
|
+
} else if (h < 660) {
|
|
225
|
+
return 17
|
|
226
|
+
} else if (h < 1300) {
|
|
227
|
+
return 16
|
|
228
|
+
} else if (h < 2600) {
|
|
229
|
+
return 15
|
|
230
|
+
} else if (h < 6400) {
|
|
231
|
+
return 14
|
|
232
|
+
} else if (h < 13200) {
|
|
233
|
+
return 13
|
|
234
|
+
} else if (h < 26000) {
|
|
235
|
+
return 12
|
|
236
|
+
} else if (h < 67985) {
|
|
237
|
+
return 11
|
|
238
|
+
} else if (h < 139780) {
|
|
239
|
+
return 10
|
|
240
|
+
} else if (h < 250600) {
|
|
241
|
+
return 9
|
|
242
|
+
} else if (h < 380000) {
|
|
243
|
+
return 8
|
|
244
|
+
} else if (h < 640000) {
|
|
245
|
+
return 7
|
|
246
|
+
} else if (h < 1280000) {
|
|
247
|
+
return 6
|
|
248
|
+
} else if (h < 2600000) {
|
|
249
|
+
return 5
|
|
250
|
+
} else if (h < 610000) {
|
|
251
|
+
return 4
|
|
252
|
+
} else if (h < 11900000) {
|
|
253
|
+
return 3
|
|
254
|
+
} else {
|
|
255
|
+
return 2
|
|
256
|
+
}
|
|
257
|
+
}
|
|
258
|
+
|
|
168
259
|
return {
|
|
169
|
-
|
|
170
|
-
|
|
260
|
+
load,
|
|
261
|
+
dispose,
|
|
171
262
|
getCamera,
|
|
172
263
|
setCamera,
|
|
173
|
-
loadTiles
|
|
264
|
+
loadTiles,
|
|
265
|
+
getPosition,
|
|
266
|
+
getViewRectangle,
|
|
267
|
+
getRoom
|
|
174
268
|
}
|
|
175
269
|
}
|
|
176
270
|
|
|
177
271
|
export {
|
|
178
|
-
EActionTtype,
|
|
179
|
-
|
|
180
272
|
useCesium,
|
|
181
|
-
|
|
273
|
+
|
|
274
|
+
viewer
|
|
182
275
|
}
|
|
183
276
|
|
|
184
277
|
export type {
|
package/cesium/js/measure.js
CHANGED
|
@@ -68,14 +68,13 @@ class MeasureDistance {
|
|
|
68
68
|
label: {
|
|
69
69
|
text: spaceDistance(this.positions) + "米",
|
|
70
70
|
scale: 0.5,
|
|
71
|
-
font: 'normal
|
|
72
|
-
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
|
|
73
|
-
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 0.4),
|
|
74
|
-
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
71
|
+
font: 'normal 28px MicroSoft YaHei',
|
|
75
72
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
76
73
|
pixelOffset: new Cesium.Cartesian2(0, -30),
|
|
77
74
|
outlineWidth: 9,
|
|
78
|
-
outlineColor: Cesium.Color.WHITE
|
|
75
|
+
outlineColor: Cesium.Color.WHITE,
|
|
76
|
+
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
|
77
|
+
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
79
78
|
},
|
|
80
79
|
point: {
|
|
81
80
|
color: Cesium.Color.FUCHSIA,
|
|
@@ -93,7 +92,9 @@ class MeasureDistance {
|
|
|
93
92
|
billboard: {
|
|
94
93
|
scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4),
|
|
95
94
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
|
|
96
|
-
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
|
95
|
+
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
96
|
+
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
|
97
|
+
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
97
98
|
},
|
|
98
99
|
point: {
|
|
99
100
|
color: Cesium.Color.FUCHSIA,
|
|
@@ -128,7 +129,9 @@ class MeasureDistance {
|
|
|
128
129
|
image: "../../static/images/end.png",
|
|
129
130
|
scaleByDistance: new Cesium.NearFarScalar(300, 1, 1200, 0.4),
|
|
130
131
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000),
|
|
131
|
-
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
|
|
132
|
+
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
133
|
+
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
|
134
|
+
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
132
135
|
},
|
|
133
136
|
point: {
|
|
134
137
|
color: Cesium.Color.FUCHSIA,
|
|
@@ -299,14 +302,13 @@ class MeasureHeight {
|
|
|
299
302
|
label: {
|
|
300
303
|
text: "",
|
|
301
304
|
scale: 0.5,
|
|
302
|
-
font: 'normal
|
|
303
|
-
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
|
|
304
|
-
scaleByDistance: new Cesium.NearFarScalar(500, 1, 1500, 0.4),
|
|
305
|
-
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
305
|
+
font: 'normal 28px MicroSoft YaHei',
|
|
306
306
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
307
307
|
pixelOffset: new Cesium.Cartesian2(0, -30),
|
|
308
308
|
outlineWidth: 9,
|
|
309
|
-
outlineColor: Cesium.Color.WHITE
|
|
309
|
+
outlineColor: Cesium.Color.WHITE,
|
|
310
|
+
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
|
311
|
+
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
310
312
|
}
|
|
311
313
|
})
|
|
312
314
|
}
|
|
@@ -544,13 +546,12 @@ class MeasureArea {
|
|
|
544
546
|
}, false),
|
|
545
547
|
scale: 0.5,
|
|
546
548
|
font: 'normal 28px MicroSoft YaHei',
|
|
547
|
-
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 5000),
|
|
548
|
-
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 3000, 0.4),
|
|
549
|
-
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
|
|
550
549
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
|
551
550
|
pixelOffset: new Cesium.Cartesian2(0, -30),
|
|
552
551
|
outlineWidth: 9,
|
|
553
|
-
outlineColor: Cesium.Color.WHITE
|
|
552
|
+
outlineColor: Cesium.Color.WHITE,
|
|
553
|
+
// heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
|
554
|
+
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
554
555
|
}
|
|
555
556
|
});
|
|
556
557
|
}
|
|
@@ -611,9 +612,10 @@ class MeasureArea {
|
|
|
611
612
|
|
|
612
613
|
handleMoveEvent(position) {
|
|
613
614
|
if (this.positions.length < 1) return;
|
|
614
|
-
|
|
615
615
|
this.height = this.unifiedHeight(this.positions, this.height);
|
|
616
616
|
this.tempPositions = this.positions.concat(position);
|
|
617
|
+
console.log(this.tempPositions.length,!this.mesureResultEntity);
|
|
618
|
+
|
|
617
619
|
if (this.tempPositions.length >= 3 && !this.mesureResultEntity) {
|
|
618
620
|
this.createResultLabel();
|
|
619
621
|
}
|
package/cesium/js/measure1.ts
CHANGED
|
@@ -1,17 +1,31 @@
|
|
|
1
1
|
import * as Cesium from 'cesium'
|
|
2
2
|
|
|
3
3
|
const useMeasureTools = (viewer: Cesium.Viewer) => {
|
|
4
|
-
let handler = new Cesium.ScreenSpaceEventHandler((viewer.scene as any)._imageryLayerCollection)
|
|
5
|
-
|
|
4
|
+
let handler = new Cesium.ScreenSpaceEventHandler((viewer.scene as any)._imageryLayerCollection)
|
|
5
|
+
let positions = []
|
|
6
6
|
let positionsCartographic = []
|
|
7
7
|
let positions_Inter = []
|
|
8
8
|
let poly = null
|
|
9
9
|
let distance = null
|
|
10
10
|
let cartesian = null
|
|
11
|
-
|
|
11
|
+
let DistanceArray = []
|
|
12
12
|
let profileItem = []
|
|
13
13
|
|
|
14
|
+
const reset = () => {
|
|
15
|
+
handler = new Cesium.ScreenSpaceEventHandler((viewer.scene as any)._imageryLayerCollection)
|
|
16
|
+
positions = []
|
|
17
|
+
positionsCartographic = []
|
|
18
|
+
positions_Inter = []
|
|
19
|
+
poly = null
|
|
20
|
+
distance = null
|
|
21
|
+
cartesian = null
|
|
22
|
+
DistanceArray = []
|
|
23
|
+
profileItem = []
|
|
24
|
+
}
|
|
25
|
+
|
|
14
26
|
const measureDistance = () => {
|
|
27
|
+
reset()
|
|
28
|
+
|
|
15
29
|
handler.setInputAction(((movement) => {
|
|
16
30
|
cartesian = viewer.scene.pickPosition(movement.endPosition);
|
|
17
31
|
if (positions.length >= 2) {
|
|
@@ -2,7 +2,7 @@ import { v4 as uuid } from 'uuid'
|
|
|
2
2
|
import * as Cesium from 'cesium'
|
|
3
3
|
|
|
4
4
|
interface ICameraOptions {
|
|
5
|
-
destination: Cesium.Cartesian3
|
|
5
|
+
destination: Cesium.Cartesian3;
|
|
6
6
|
orientation: {
|
|
7
7
|
heading: number;
|
|
8
8
|
pitch: number;
|
|
@@ -27,7 +27,7 @@ enum EActionTtype {
|
|
|
27
27
|
const useCameraRecord = () => {
|
|
28
28
|
let viewer: Cesium.Viewer | null = null
|
|
29
29
|
let records: IRecord[] = []
|
|
30
|
-
let timer:
|
|
30
|
+
let timer: number | null = null
|
|
31
31
|
let cameraSpeed = 2
|
|
32
32
|
|
|
33
33
|
const setViewer = (cesiumViewer: Cesium.Viewer) => {
|
|
@@ -130,7 +130,7 @@ const useCameraRecord = () => {
|
|
|
130
130
|
})
|
|
131
131
|
}
|
|
132
132
|
idleTime = 0
|
|
133
|
-
clearInterval(timer as
|
|
133
|
+
clearInterval(timer as number)
|
|
134
134
|
}
|
|
135
135
|
|
|
136
136
|
let playTime = 0;
|
|
@@ -10,7 +10,7 @@ const useDrawPolygon = (viewer: Cesium.Viewer, options: {
|
|
|
10
10
|
const moveHandler: Cesium.ScreenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
|
|
11
11
|
let pointPosData: Cesium.Cartesian3[][] = []
|
|
12
12
|
|
|
13
|
-
const start = () => {
|
|
13
|
+
const start = (cb: (geoJSONData: string) => void) => {
|
|
14
14
|
|
|
15
15
|
const points: Cesium.Cartesian3[] = []
|
|
16
16
|
|
|
@@ -57,10 +57,24 @@ const useDrawPolygon = (viewer: Cesium.Viewer, options: {
|
|
|
57
57
|
points.pop()
|
|
58
58
|
|
|
59
59
|
stop()
|
|
60
|
-
start()
|
|
60
|
+
// start()
|
|
61
61
|
|
|
62
62
|
pointPosData.push(points)
|
|
63
63
|
|
|
64
|
+
const coordinates = points.map(item => {
|
|
65
|
+
const cart = Cesium.Cartographic.fromCartesian(item)
|
|
66
|
+
const lon = Cesium.Math.toDegrees(cart.longitude);
|
|
67
|
+
const lat = Cesium.Math.toDegrees(cart.latitude);
|
|
68
|
+
|
|
69
|
+
return [lon, lat]
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
cb(JSON.stringify({
|
|
73
|
+
"type": "Polygon",
|
|
74
|
+
"coordinates": [
|
|
75
|
+
[...coordinates, coordinates[0]]
|
|
76
|
+
]
|
|
77
|
+
}))
|
|
64
78
|
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
|
|
65
79
|
}
|
|
66
80
|
|
|
@@ -42,7 +42,7 @@ const useMeasure = (viewer: Cesium.Viewer) => {
|
|
|
42
42
|
positions: [anglePoints[anglePoints.length - 2], anglePoints[anglePoints.length - 1]],
|
|
43
43
|
width: 2,
|
|
44
44
|
material: Cesium.Color.fromCssColorString("rgb(249, 157, 11)"),
|
|
45
|
-
clampToGround: true
|
|
45
|
+
clampToGround: true,
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
48
|
angleLines.push(lineEntity)
|
|
@@ -107,7 +107,8 @@ const useMeasure = (viewer: Cesium.Viewer) => {
|
|
|
107
107
|
fillColor: Cesium.Color.WHITE,
|
|
108
108
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
|
109
109
|
pixelOffset: new Cesium.Cartesian2(20, 0),
|
|
110
|
-
heightReference: Cesium.HeightReference.
|
|
110
|
+
heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
|
|
111
|
+
disableDepthTestDistance: Number.POSITIVE_INFINITY
|
|
111
112
|
}
|
|
112
113
|
});
|
|
113
114
|
angleLabels.push(angleLabel)
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import * as Cesium from 'cesium'
|
|
2
|
+
|
|
3
|
+
export enum EPlayStatus {
|
|
4
|
+
SPEED = 'speed',
|
|
5
|
+
TIME = 'time'
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export enum EControlAction {
|
|
9
|
+
PLAY = 'play',
|
|
10
|
+
PAUSE = 'pause'
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export interface IPathType {
|
|
14
|
+
modelParams: {
|
|
15
|
+
id: string;
|
|
16
|
+
name: string;
|
|
17
|
+
uri: string;
|
|
18
|
+
};
|
|
19
|
+
path: {
|
|
20
|
+
duration: number;
|
|
21
|
+
point: Cesium.Cartesian3;
|
|
22
|
+
speed: number;
|
|
23
|
+
}[];
|
|
24
|
+
playStatus: EPlayStatus;
|
|
25
|
+
totalDuration: number;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const usePath = () => {
|
|
29
|
+
|
|
30
|
+
const playAnimation = (viewer: Cesium.Viewer, path: IPathType[]) => {
|
|
31
|
+
const startTime = Cesium.JulianDate.fromDate(new Date())
|
|
32
|
+
|
|
33
|
+
path.forEach(item => {
|
|
34
|
+
const property = new Cesium.SampledPositionProperty();
|
|
35
|
+
item.totalDuration = 0
|
|
36
|
+
|
|
37
|
+
item.path.forEach((value, i) => {
|
|
38
|
+
if (i === 0) {
|
|
39
|
+
property.addSample(Cesium.JulianDate.addSeconds(startTime, 0, new Cesium.JulianDate()), value.point);
|
|
40
|
+
}
|
|
41
|
+
if (i > 0) {
|
|
42
|
+
const distance = Cesium.Cartesian3.distance(item.path[i - 1].point, value.point).toFixed();
|
|
43
|
+
if (item.playStatus === EPlayStatus.SPEED) {
|
|
44
|
+
const time = Number(distance) / value.speed
|
|
45
|
+
item.totalDuration = item.totalDuration + time
|
|
46
|
+
property.addSample(Cesium.JulianDate.addSeconds(startTime, item.totalDuration, new Cesium.JulianDate()), value.point);
|
|
47
|
+
} else if (item.playStatus === EPlayStatus.TIME) {
|
|
48
|
+
item.totalDuration = item.totalDuration + Number(value.duration)
|
|
49
|
+
property.addSample(Cesium.JulianDate.addSeconds(startTime, item.totalDuration, new Cesium.JulianDate()), value.point);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
if (i === item.path.length - 1) {
|
|
53
|
+
property.addSample(Cesium.JulianDate.fromDate(new Date(2099, 12, 31)), value.point);
|
|
54
|
+
}
|
|
55
|
+
})
|
|
56
|
+
|
|
57
|
+
if (item.path.length) {
|
|
58
|
+
viewer.entities.removeById(item.modelParams.id)
|
|
59
|
+
viewer.entities.add({
|
|
60
|
+
id: item.modelParams.id,
|
|
61
|
+
name: item.modelParams.name,
|
|
62
|
+
position: property,
|
|
63
|
+
orientation: new Cesium.VelocityOrientationProperty(property),
|
|
64
|
+
model: {
|
|
65
|
+
uri: item.modelParams.uri,
|
|
66
|
+
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
|
|
67
|
+
}
|
|
68
|
+
})
|
|
69
|
+
}
|
|
70
|
+
})
|
|
71
|
+
|
|
72
|
+
path.sort((pre, cur) => cur.totalDuration - pre.totalDuration)
|
|
73
|
+
|
|
74
|
+
viewer.clock.startTime = startTime.clone();
|
|
75
|
+
viewer.clock.stopTime = Cesium.JulianDate.addSeconds(startTime, path[0].totalDuration, new Cesium.JulianDate())
|
|
76
|
+
|
|
77
|
+
viewer.clock.currentTime = startTime.clone();
|
|
78
|
+
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK;
|
|
79
|
+
viewer.clock.shouldAnimate = true;
|
|
80
|
+
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const controlAction = (viewer: Cesium.Viewer, status: EControlAction) => {
|
|
84
|
+
viewer.clock.shouldAnimate = (status === EControlAction.PAUSE ? false : true)
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
const reset = () => {
|
|
88
|
+
//todo
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
return {
|
|
92
|
+
playAnimation,
|
|
93
|
+
controlAction,
|
|
94
|
+
reset
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export {
|
|
99
|
+
usePath
|
|
100
|
+
}
|