Skip to content

Commit cdf15f2

Browse files
zouyaojizouyaoji
committed
feat(components): ✨ added formatting functions to the vc-measurements component for measurement results.
1 parent bb2bdf0 commit cdf15f2

File tree

5 files changed

+43
-31
lines changed

5 files changed

+43
-31
lines changed

‎packages/composables/use-drawing/props.ts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/*
22
* @Author: zouyaoji@https://github.com/zouyaoji
33
* @Date: 2021-10-25 14:46:48
4-
* @LastEditTime: 2022-03-10 00:50:43
5-
* @LastEditors: zouyaoji
4+
* @LastEditTime: 2024-02-28 17:14:00
5+
* @LastEditors: zouyaoji 370681295@qq.com
66
* @Description:
7-
* @FilePath: \vue-cesium@next\packages\composables\use-drawing\props.ts
7+
* @FilePath: \vue-cesium\packages\composables\use-drawing\props.ts
88
*/
99

1010
import type { VcPointProps } from '@vue-cesium/components/primitive-collections'
1111
import { enableMouseEvent, show } from '@vue-cesium/utils/cesium-props'
12-
import type { VcDrawTipOpts, VcEditorOpts, VcDrawingPreRenderDatas } from '@vue-cesium/utils/drawing-types'
12+
import type { VcDrawTipOpts, VcEditorOpts, VcDrawingPreRenderDatas, VcMeasurementFormatter } from '@vue-cesium/utils/drawing-types'
1313
import type { VcActionTooltipProps } from '@vue-cesium/utils/types'
1414
import type { PropType } from 'vue'
1515
import { clearActionDefault } from './defaultOpts'
@@ -23,7 +23,10 @@ export const useDrawingActionProps = {
2323
editorOpts: Object as PropType<VcEditorOpts>,
2424
mode: Number,
2525
preRenderDatas: Array as PropType<VcDrawingPreRenderDatas>,
26-
disableDepthTest: Boolean
26+
disableDepthTest: Boolean,
27+
distanceFormatter: Function as PropType<VcMeasurementFormatter>,
28+
angleFormatter: Function as PropType<VcMeasurementFormatter>,
29+
areaFormatter: Function as PropType<VcMeasurementFormatter>
2730
}
2831

2932
export const useDrawingFabProps = {

‎packages/composables/use-drawing/use-drawing-point.ts

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: zouyaoji@https://github.com/zouyaoji
33
* @Date: 2021-10-19 11:34:26
4-
* @LastEditTime: 2023-05-23 10:32:30
4+
* @LastEditTime: 2024-02-28 17:14:41
55
* @LastEditors: zouyaoji 370681295@qq.com
66
* @Description:
77
* @FilePath: \vue-cesium\packages\composables\use-drawing\use-drawing-point.ts
@@ -468,31 +468,29 @@ export default function (props, ctx, cmpName: string) {
468468
return ''
469469
}
470470

471+
const angleFormatter = props.angleFormatter || MeasureUnits.angleToString
472+
const distanceFormatter = props.distanceFormatter || MeasureUnits.distanceToString
473+
471474
return (
472-
`${t('vc.measurement.point.lng')}${MeasureUnits.angleToString(
475+
`${t('vc.measurement.point.lng')}${angleFormatter(
473476
positionCartographic.longitude,
474477
props.measureUnits?.angleUnits,
475478
props.locale,
476479
props.decimals?.lng
477480
)}\n` +
478-
`${t('vc.measurement.point.lat')}${MeasureUnits.angleToString(
481+
`${t('vc.measurement.point.lat')}${angleFormatter(
479482
positionCartographic.latitude,
480483
props.measureUnits?.angleUnits,
481484
props.locale,
482485
props.decimals?.lat
483486
)}\n` +
484-
`${t('vc.measurement.point.height')}${MeasureUnits.distanceToString(
487+
`${t('vc.measurement.point.height')}${distanceFormatter(
485488
point.height,
486489
props.measureUnits?.distanceUnits,
487490
props.locale,
488491
props.decimals?.height
489492
)}\n` +
490-
`${t('vc.measurement.point.slope')}${MeasureUnits.angleToString(
491-
point.slope,
492-
props.measureUnits?.slopeUnits,
493-
props.locale,
494-
props.decimals?.slope
495-
)}`
493+
`${t('vc.measurement.point.slope')}${angleFormatter(point.slope, props.measureUnits?.slopeUnits, props.locale, props.decimals?.slope)}`
496494
)
497495
}
498496

‎packages/composables/use-drawing/use-drawing-polyline.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,10 @@ export default function (props, ctx, cmpName: string) {
9595
const { Cartesian3, createGuid, defined, Math: CesiumMath } = Cesium
9696
const polylines: Array<VcPolylineDrawing> = []
9797
const { viewer } = $services
98+
const angleFormatter = props.angleFormatter || MeasureUnits.angleToString
99+
const distanceFormatter = props.distanceFormatter || MeasureUnits.distanceToString
100+
const areaFormatter = props.areaFormatter || MeasureUnits.areaToString
101+
98102
renderDatas.value.forEach((polyline, index) => {
99103
const labels = reactive<Array<VcLabelProps>>([])
100104
const distances: number[] = []
@@ -158,9 +162,10 @@ export default function (props, ctx, cmpName: string) {
158162
distances.push(s)
159163
distance = distance + s
160164
const polylineLabelsOpts = Object.assign({}, props.labelsOpts, polyline.labelsOpts)
165+
161166
if (s > 0 && positions.length > 2 && props.showDistanceLabel) {
162167
labels.push({
163-
text: MeasureUnits.distanceToString(s, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
168+
text: distanceFormatter(s, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
164169
position: Cartesian3.midpoint(positions[i], positions[i + 1], {} as any),
165170
id: createGuid(),
166171
...polylineLabelsOpts
@@ -179,7 +184,7 @@ export default function (props, ctx, cmpName: string) {
179184
}
180185
angles.push(angle)
181186
labels.push({
182-
text: MeasureUnits.angleToString(angle, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
187+
text: angleFormatter(angle, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
183188
position: point1,
184189
id: createGuid(),
185190
...polylineLabelsOpts
@@ -206,14 +211,14 @@ export default function (props, ctx, cmpName: string) {
206211
if (props.showLabel && positions.length) {
207212
if (cmpName.includes('Area')) {
208213
labels.push({
209-
text: MeasureUnits.areaToString(area, props.measureUnits?.areaUnits, props.locale, props.decimals?.area),
214+
text: areaFormatter(area, props.measureUnits?.areaUnits, props.locale, props.decimals?.area),
210215
position: positions[positions.length - 1],
211216
id: createGuid(),
212217
...polylineLabelOpts
213218
})
214219
} else {
215220
labels.push({
216-
text: MeasureUnits.distanceToString(distance, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
221+
text: distanceFormatter(distance, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
217222
position: positions[positions.length - 1],
218223
id: createGuid(),
219224
...polylineLabelOpts

‎packages/composables/use-drawing/use-drawing-segment.ts

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: zouyaoji@https://github.com/zouyaoji
33
* @Date: 2021-10-22 14:09:42
4-
* @LastEditTime: 2023-05-23 10:31:50
4+
* @LastEditTime: 2024-02-28 17:21:40
55
* @LastEditors: zouyaoji 370681295@qq.com
66
* @Description:
77
* @FilePath: \vue-cesium\packages\composables\use-drawing\use-drawing-segment.ts
@@ -103,6 +103,10 @@ export default function (props, ctx, cmpName: string) {
103103
const { Cartesian3, Cartographic, Rectangle, createGuid, defined, Math: CesiumMath, Ray } = Cesium
104104
const { viewer } = $services
105105

106+
const angleFormatter = props.angleFormatter || MeasureUnits.angleToString
107+
const distanceFormatter = props.distanceFormatter || MeasureUnits.distanceToString
108+
const areaFormatter = props.areaFormatter || MeasureUnits.areaToString
109+
106110
renderDatas.value.forEach(polylineSegment => {
107111
const startPosition = polylineSegment.positions[0]
108112
const endPosition = polylineSegment.positions[1]
@@ -235,7 +239,7 @@ export default function (props, ctx, cmpName: string) {
235239
labels.push({
236240
position: labelPosition,
237241
id: createGuid(),
238-
text: MeasureUnits.distanceToString(distance, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
242+
text: distanceFormatter(distance, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
239243
...labelOpts
240244
})
241245
}
@@ -254,7 +258,7 @@ export default function (props, ctx, cmpName: string) {
254258
distances.push(s)
255259
if (s > 0 && positions.length > 2 && props.showDistanceLabel) {
256260
labels.push({
257-
text: MeasureUnits.distanceToString(s, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
261+
text: distanceFormatter(s, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
258262
position: Cartesian3.midpoint(positions[i], positions[i + 1], {} as any),
259263
id: createGuid(),
260264
...labelsOpts
@@ -273,7 +277,7 @@ export default function (props, ctx, cmpName: string) {
273277
}
274278
angles.push(angle)
275279
labels.push({
276-
text: MeasureUnits.angleToString(angle, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
280+
text: angleFormatter(angle, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
277281
position: point1,
278282
id: createGuid(),
279283
...labelsOpts
@@ -285,7 +289,7 @@ export default function (props, ctx, cmpName: string) {
285289
const area = calculateAreaByPostions(positions)
286290
props.showLabel &&
287291
labels.push({
288-
text: MeasureUnits.areaToString(area, props.measureUnits?.areaUnits, props.locale, props.decimals?.area),
292+
text: areaFormatter(area, props.measureUnits?.areaUnits, props.locale, props.decimals?.area),
289293
position: polylineSegment.positions[0],
290294
id: createGuid(),
291295
...labelOpts
@@ -306,28 +310,28 @@ export default function (props, ctx, cmpName: string) {
306310
labels.push({
307311
position: polyline.xLabelPosition,
308312
id: createGuid(),
309-
text: MeasureUnits.distanceToString(polyline.xDistance || 0, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
313+
text: distanceFormatter(polyline.xDistance || 0, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
310314
...props.xLabelOpts
311315
})
312316

313317
labels.push({
314318
position: polyline.yLabelPosition,
315319
id: createGuid(),
316-
text: MeasureUnits.distanceToString(polyline.yDistance || 0, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
320+
text: distanceFormatter(polyline.yDistance || 0, props.measureUnits?.distanceUnits, props.locale, props.decimals?.distance),
317321
...props.yLabelOpts
318322
})
319323

320324
labels.push({
321325
position: polyline.xAnglePosition,
322326
id: createGuid(),
323-
text: MeasureUnits.angleToString(polyline.xAngle || 0, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
327+
text: angleFormatter(polyline.xAngle || 0, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
324328
...props.xAngleLabelOpts
325329
})
326330

327331
labels.push({
328332
position: polyline.yAnglePosition,
329333
id: createGuid(),
330-
text: MeasureUnits.angleToString(polyline.yAngle || 0, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
334+
text: angleFormatter(polyline.yAngle || 0, props.measureUnits?.angleUnits, props.locale, props.decimals?.angle),
331335
...props.yAngleLabelOpts
332336
})
333337
}

‎packages/utils/drawing-types.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/*
22
* @Author: zouyaoji@https://github.com/zouyaoji
33
* @Date: 2021-10-13 10:48:26
4-
* @LastEditTime: 2022-07-07 13:54:08
5-
* @LastEditors: zouyaoji
4+
* @LastEditTime: 2024-02-28 17:17:37
5+
* @LastEditors: zouyaoji 370681295@qq.com
66
* @Description:
7-
* @FilePath: \vue-cesium@next\packages\utils\drawing-types.ts
7+
* @FilePath: \vue-cesium\packages\utils\drawing-types.ts
88
*/
99

1010
import {
@@ -358,3 +358,5 @@ export type VcViewshedOpts = {
358358
lineColor?: VcColor
359359
faceColor?: VcColor
360360
}
361+
362+
export type VcMeasurementFormatter = (value: number, defaultUnits: string, defaultLocale?, defaultDecimals?) => string

0 commit comments

Comments
 (0)