效果

三角量测

面积量测

线段距离

还有一个圆形面量测

实现

量测是地图工具中比较基础的功能,实现也比较容易。
三角量测稍微需要研究一点,这里提供思路:
1.动态创建三条线段

2.通过直线两端的点计算水平线的另一端坐标

3.动态计算距离并表示

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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
/**
* 三角测量
*/
class MeasureTriangles extends Draw {
constructor(measureInfo, style) {
super(measureInfo)
this._tempLineEntity = new Cesium.Entity()
this._tempLineEntity2 = new Cesium.Entity()
this._positions = []
this._tempPoints = []
this._tempPoints2 = []
this._style = {
...DEF_STYLE,
...style
}
}

_mouseClickHandler(movement) {
//let position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.position, Cesium.Ellipsoid.WGS84)
let position = this._viewer.scene.pickPosition(movement.position);
if(!position)return false
if (this._positions.length == 0) {
this._positions.push(position.clone())
this._positions.push(position.clone())
this._tempPoints.push(position.clone())
this._tempPoints.push(position.clone())
}
}

_mouseMoveHandler(movement) {
this._viewer.tooltip.setContent('单击选择点位,双击结束')
//let position = this._viewer.delegate.scene.camera.pickEllipsoid(movement.endPosition, Cesium.Ellipsoid.WGS84)
let position = this._viewer.scene.pickPosition(movement.endPosition);
this._viewer.tooltip.setPosition(position)
if (position && this._positions.length > 0) {
//直线
this._positions.pop()
this._positions.push(position.clone());
let horizontalPosition = this._computesHorizontalLine(this._positions)
//高度
this._tempPoints.pop()
this._tempPoints.push(horizontalPosition.clone())
//水平线
this._tempPoints2.pop(),this._tempPoints2.pop()
this._tempPoints2.push(position.clone())
this._tempPoints2.push(horizontalPosition.clone())

}
}
_getHeading(startPosition, endPosition){
if(!startPosition && !endPosition )return 0
if(Cesium.Cartesian3.equals(startPosition, endPosition))return 0
let cartographic = Cesium.Cartographic.fromCartesian(startPosition);
let cartographic2 = Cesium.Cartographic.fromCartesian(endPosition);
return (cartographic2.height - cartographic.height).toFixed(2)
}
_computesHorizontalLine(positions){
let cartographic = Cesium.Cartographic.fromCartesian(positions[0]);
let cartographic2 = Cesium.Cartographic.fromCartesian(positions[1]);
return Cesium.Cartesian3.fromDegrees(
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude),
cartographic2.height
)
}
_mouseDbClickHandler(movement) {
this._unbindEnvet()
this._measureEvent.raiseEvent({ type: 'triangles', points: [this._positions,this._tempPoints,this._tempPoints2]})
}

_prepareDelegate() {
//直线
this._delegate.polyline = {
positions: new Cesium.CallbackProperty(time => {
return this._positions
}, false),
...this._style
}
this._delegate.position = new Cesium.CallbackProperty(time => {
return this._positions[0]
}, false),
this._delegate.point = {
pixelSize: 5,
outlineColor: Cesium.Color.BLUE,
outlineWidth: 5
}
this._delegate.label = {
text: new Cesium.CallbackProperty(time => {
return '直线:' + CV.Math.getDistance(CV.T.transformCartesianArrayToWSG84Array(this._positions)) + '米'
}, false),
show: true,
showBackground: true,
font: '14px monospace',
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(50, -100) //left top
}
//高度
this._tempLineEntity.polyline = {
positions: new Cesium.CallbackProperty(time => {
return this._tempPoints
}, false),
...this._style
}
this._tempLineEntity.position = new Cesium.CallbackProperty(time => {
return this._tempPoints2[1]
}, false),
this._tempLineEntity.point = {
pixelSize: 5,
outlineColor: Cesium.Color.BLUE,
outlineWidth: 5
}
this._tempLineEntity.label = {
text: new Cesium.CallbackProperty(time => {
return '高度:' + this._getHeading(this._tempPoints[0],this._tempPoints[1]) + '米'
}, false),
show: true,
showBackground: true,
font: '14px monospace',
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(-20, 100) //left top
}
//水平
this._tempLineEntity2.polyline = {
positions: new Cesium.CallbackProperty(time => {
return this._tempPoints2
}, false),
...this._style
}
this._tempLineEntity2.position = new Cesium.CallbackProperty(time => {
return this._positions[1]
}, false),
this._tempLineEntity2.point = {
pixelSize: 5,
outlineColor: Cesium.Color.BLUE,
outlineWidth: 5
}
this._tempLineEntity2.label = {
text: new Cesium.CallbackProperty(time => {
return '水平距离:' + CV.Math.getDistance(CV.T.transformCartesianArrayToWSG84Array(this._tempPoints2)) + '米'
}, false),
show: true,
showBackground: true,
font: '14px monospace',
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(-150, -20) //left top
}
this._layer.entities.add(this._tempLineEntity2)
this._layer.entities.add(this._tempLineEntity)
this._layer.entities.add(this._delegate)
}
}

export default MeasureTriangles