Skip to main content

Slope Measurement

DMap3D.measurement.slope is used to measure the slope (pitch angle) between two points in 3D space.

Import​

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

Basic Usage​

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

// Create slope measurement tool
const slopeTool = new DMap3D.measurement.slope(viewer)

// Start measurement (left-click two points: start and end)
slopeTool.start()
// Slope value displayed in real-time, format: Slope: XX° (XX%)

Constructor​

new DMap3D.measurement.slope(viewer)​

Create a slope measurement tool instance. Inherits from MeasureBase base class.

Parameters:

  • viewer - Cesium.Viewer instance

Methods​

start()​

Start slope measurement. The user left-clicks two points (start and end points), and the slope value is displayed in real-time at the midpoint of the line segment.

slopeTool.start()

end()​

End measurement, keeping the drawn results.

slopeTool.end()

clear()​

Clear all measurement results.

slopeTool.clear()

destroy()​

Destroy the tool and release resources.

slopeTool.destroy()

updateConfig(config)​

Dynamically update style configuration.

slopeTool.updateConfig({
  pointColor: '#FF0000',  // Measurement point color
  pointSize: 10,          // Measurement point size (pixels)
  lineColor: '#00FF00',   // Measurement line color (arrow material)
  lineWidth: 3,           // Measurement line width (arrow auto-scaled 3x)
  fontColor: '#FFFF00',   // Slope label text color
  fontSize: 16            // Font size (pixels)
})

Configuration Options​

PropertyTypeDefaultDescription
pointColorstring'#ffc403'Measurement point color
pointSizenumber8Measurement point size (pixels)
lineColorstring'#12e184'Measurement line color (arrow material)
lineWidthnumber2Measurement line width (pixels)
fontColorstring'#ffc403'Slope label text color
fontSizenumber14Font size (pixels)

Slope Calculation​

Slope is calculated based on the ENU (East-North-Up) local coordinate system:

  • Angle: The angle between the vector and the horizontal plane (pitch angle), in degrees
  • Percentage: tan(pitch angle) * 100, representing the height change percentage per 100 meters of horizontal travel

Complete Example​

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

// Create slope measurement tool
const slopeTool = new DMap3D.measurement.slope(viewer)

// Custom styles
slopeTool.updateConfig({
  pointColor: '#FF0000',
  lineColor: '#00FFFF',
  fontColor: '#FFFF00',
  fontSize: 16
})

// Start measurement
slopeTool.start()
// Left-click two points, slope is calculated and displayed automatically
// Display format: Slope: 15.30° (27.3%)

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

// Destroy
slopeTool.destroy()