Skip to main content

Height Measurement

DMap3D.measurement.height is used to measure the vertical height difference 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 height measurement tool
const heightTool = new DMap3D.measurement.height(viewer)

// Listen for measurement complete event
heightTool.onMeasureEnd((result) => {
  console.log('Absolute height:', result.absoluteHeight.toFixed(2), 'meters')
  console.log('Relative height:', result.relativeHeight.toFixed(2), 'meters')
  console.log('Horizontal distance:', result.horizontalDistance.toFixed(2), 'meters')
})

// Activate measurement (left-click twice to complete)
heightTool.activate()

Constructor​

new DMap3D.measurement.height(viewer, options?)​

Create a height measurement tool instance.

Parameters:

  • viewer - Cesium.Viewer instance
  • options? - Optional configuration

Options:

interface HeightOptions {
  colors?: {
    line?: string     // Vertical line color, default '#FBFB00'
    point?: string    // Measurement point color, default '#0008FF'
    circular?: string // Height marker circle color, default '#33fc05'
  }
  fontSize?: number   // Font size, default 14
}

Example:

const heightTool = new DMap3D.measurement.height(viewer, {
  colors: {
    line: '#00FFFF',
    point: '#FF00FF',
    circular: '#FFFF00'
  },
  fontSize: 16
})

Methods​

activate()​

Activate height measurement. The user left-clicks the first point (start point) in the scene, then clicks the second point (end point) to complete the measurement.

heightTool.activate()

deactivate()​

Deactivate measurement, but keep the drawn measurement results.

heightTool.deactivate()

clear()​

Clear all measurement results (points, vertical lines, height marker circles, and labels).

heightTool.clear()

destroy()​

Destroy the tool instance and clean up resources.

heightTool.destroy()

onMeasureEnd(callback)​

Register a measurement complete callback function.

heightTool.onMeasureEnd((result) => {
  console.log('Absolute height:', result.absoluteHeight, 'meters')
  console.log('Relative height:', result.relativeHeight, 'meters')
  console.log('Horizontal distance:', result.horizontalDistance, 'meters')
})

getResult()​

Get the current measurement result. Returns null if measurement is not complete.

const result = heightTool.getResult()
if (result) {
  console.log('Relative height:', result.relativeHeight.toFixed(2), 'meters')
}

Measurement Result​

HeightResult Object:

interface HeightResult {
  // Absolute height of the end point (meters)
  absoluteHeight: number

  // Relative height difference between two points (meters, end height - start height)
  relativeHeight: number

  // Horizontal distance between two points (meters)
  horizontalDistance: number
}

Complete Example​

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

// Create height measurement tool
const heightTool = new DMap3D.measurement.height(viewer, {
  colors: {
    line: '#00FFFF',
    point: '#FFFF00',
    circular: '#00FF00'
  },
  fontSize: 16
})

// Listen for measurement complete event
heightTool.onMeasureEnd((result) => {
  const { absoluteHeight, relativeHeight, horizontalDistance } = result
  console.log(`Absolute height: ${absoluteHeight.toFixed(2)} meters`)
  console.log(`Relative height difference: ${relativeHeight.toFixed(2)} meters`)
  console.log(`Horizontal distance: ${horizontalDistance.toFixed(2)} meters`)
})

// Activate measurement
heightTool.activate()