1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
import React, { useState, useEffect , useRef} from 'react';
const pdCesium = require('@wisdom-cesium/cesium')
const Cesium = require('cesium/Cesium')
export default () => {
let el = useRef(null);
let buttonEl = useRef(null);
let pdViewer, viewer, extent, orientation, position;
useEffect(() => {
pdViewer = new pdCesium.PdRender({
el: el.current,
});
viewer = pdViewer.viewer;
pdViewer.viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(114.31, 30.52, 15000.0), //武汉
});
}, []);
function buttonClick(e) {
position = getCenterPosition();
extent = getCurrentExtent();
orientation = getOrientation();
console.log('当前视图范围', extent);
console.log('相机俯仰角', orientation);
console.log('相机位置', position);
}
function getOrientation() {
const { heading, pitch, roll } = viewer.camera;
const headingDegrees = Cesium.Math.toDegrees(heading);
const pitchDegrees = Cesium.Math.toDegrees(pitch);
const rollDegrees = Cesium.Math.toDegrees(roll);
return {
heading: headingDegrees,
pitch: pitchDegrees,
roll: rollDegrees,
};
}
/* 获取camera高度 */
function getHeight() {
if (viewer) {
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;
var height = ellipsoid.cartesianToCartographic(viewer.camera.position)
.height;
return height;
}
}
/* 获取camera中心点坐标 */
function getCenterPosition() {
var result = viewer.camera.pickEllipsoid(
new Cesium.Cartesian2(
viewer.canvas.clientWidth / 2,
viewer.canvas.clientHeight / 2,
),
);
var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
var lon = (curPosition.longitude * 180) / Math.PI;
var lat = (curPosition.latitude * 180) / Math.PI;
var height = getHeight();
return {
lon: lon,
lat: lat,
height: height,
};
}
function getCurrentExtent() {
// 范围对象
var extent = {};
// 得到当前三维场景
var scene = viewer.scene;
// 得到当前三维场景的椭球体
var ellipsoid = scene.globe.ellipsoid;
var canvas = scene.canvas;
// canvas左上角
var car3_lt = viewer.camera.pickEllipsoid(
new Cesium.Cartesian2(0, 0),
ellipsoid,
);
// canvas右下角
var car3_rb = viewer.camera.pickEllipsoid(
new Cesium.Cartesian2(canvas.width, canvas.height),
ellipsoid,
);
// 当canvas左上角和右下角全部在椭球体上
if (car3_lt && car3_rb) {
var carto_lt = ellipsoid.cartesianToCartographic(car3_lt);
var carto_rb = ellipsoid.cartesianToCartographic(car3_rb);
extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude);
extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude);
extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude);
extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude);
}
// 当canvas左上角不在但右下角在椭球体上
else if (!car3_lt && car3_rb) {
var car3_lt2 = null;
var yIndex = 0;
do {
// 这里每次10像素递加，一是10像素相差不大，二是为了提高程序运行效率
yIndex <= canvas.height ? (yIndex += 10) : canvas.height;
car3_lt2 = viewer.camera.pickEllipsoid(
new Cesium.Cartesian2(0, yIndex),
ellipsoid,
);
} while (!car3_lt2);
var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2);
var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb);
extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude);
extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude);
extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude);
extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude);
}
// 获取高度
extent.height = Math.ceil(viewer.camera.positionCartographic.height);
return [extent.xmin, extent.ymin, extent.xmax, extent.ymax];
}
return (
<div>
<div ref={el} style={{ width: '100%', height: '150px' }} />
<button ref={buttonEl} onClick={buttonClick}>
获取视角
</button>
</div>
);
};