Skip to main content

Angle Measurement

DMap3D.measurement.angle is used to measure the angle between three points in 3D space.

Import​

import DMap3D from 'dmap3d'
import * as Cesium from 'cesium'

Basic Usage​

const viewer = new Cesium.Viewer('cesiumContainer')

// Create angle measurement tool
const angleTool = new DMap3D.measurement.angle(viewer)

// Start measurement (left-click three points: start, vertex, end)
angleTool.start()

Constructor​

new DMap3D.measurement.angle(viewer)​

Create an angle measurement tool instance. Inherits from MeasureBase base class.

Parameters:

  • viewer - Cesium.Viewer instance

Methods​

start()​

Start angle measurement. The user clicks three points in sequence: start point, vertex (angle vertex), and end point. The angle value is displayed in real-time at the vertex position.

angleTool.start()

end()​

End measurement, keeping the drawn results.

angleTool.end()

clear()​

Clear all measurement results.

angleTool.clear()

destroy()​

Destroy the tool and release resources.

angleTool.destroy()

updateConfig(config)​

Dynamically update style configuration. Existing measurement results will immediately apply the new styles.

angleTool.updateConfig({
  pointColor: '#FF0000',    // Measurement point color
  pointSize: 10,            // Measurement point size (pixels)
  lineColor: '#00FF00',     // Measurement line color
  lineWidth: 3,             // Measurement line width (pixels)
  fontColor: '#FFFF00',     // Angle label text color
  fontSize: 16,             // Font size (pixels)
  sectorColor: 'rgba(255, 0, 0, 0.5)',  // Sector fill color
  sectorLineColor: '#FF0000'             // Sector border line color
})

Configuration Options​

PropertyTypeDefaultDescription
pointColorstring'#ffc403'Measurement point color
pointSizenumber8Measurement point size (pixels)
lineColorstring'#12e184'Measurement line color
lineWidthnumber2Measurement line width (pixels)
fontColorstring'#ffc403'Angle label text color
fontSizenumber14Font size (pixels)
sectorColorstring'rgba(255, 196, 3, 0.3)'Sector fill color
sectorLineColorstring'#ffc403'Sector border line color

Complete Example​

const viewer = new Cesium.Viewer('cesiumContainer')

// Create angle measurement tool
const angleTool = new DMap3D.measurement.angle(viewer)

// Custom styles
angleTool.updateConfig({
  pointColor: '#FF0000',
  lineColor: '#00FF00',
  fontColor: '#FFFF00',
  fontSize: 16,
  sectorColor: 'rgba(0, 255, 0, 0.3)'
})

// Start measurement
angleTool.start()
// Left-click three points to measure, angle is displayed automatically
// Right-click to end measurement

// Clear and remeasure
angleTool.clear()
angleTool.start()

// Destroy
angleTool.destroy()