Skip to main content

Area Measurement

DMap3D.measurement.area is used to measure the area of polygon regions.

Import​

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

Basic Usage​

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

// Create area measurement tool
const areaTool = new DMap3D.measurement.area(viewer)

// Listen for measurement complete event
areaTool.on('measureComplete', (result) => {
  console.log('Area:', result.area, 'square meters')
  console.log('Perimeter:', result.perimeter, 'meters')
})

// Start measurement
areaTool.start()

Constructor​

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

Create an area measurement tool instance.

Parameters:

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

Options:

interface AreaMeasurementOptions {
  // Fill color
  fillColor?: Cesium.Color

  // Outline color
  outlineColor?: Cesium.Color

  // Outline width
  outlineWidth?: number

  // Whether to show labels
  showLabel?: boolean

  // Label font
  labelFont?: string

  // Label color
  labelColor?: Cesium.Color

  // Whether to clamp to ground
  clampToGround?: boolean
}

Example:

const areaTool = new DMap3D.measurement.area(viewer, {
  fillColor: Cesium.Color.RED.withAlpha(0.3),
  outlineColor: Cesium.Color.RED,
  outlineWidth: 2,
  showLabel: true,
  clampToGround: true,
})

Methods​

start()​

Start measurement. Users can click on the map to add vertices, and double-click to complete the measurement.

areaTool.start()

stop()​

Stop measurement, but keep the drawn shapes.

areaTool.stop()

clear()​

Clear all measurement results.

areaTool.clear()

destroy()​

Destroy the tool instance and clean up resources.

areaTool.destroy()

Events​

measureStart​

Triggered when measurement starts.

areaTool.on('measureStart', () => {
  console.log('Measurement started')
})

measureUpdate​

Triggered when measurement updates during the process.

areaTool.on('measureUpdate', (result) => {
  console.log('Current area:', result.area)
})

measureComplete​

Triggered when measurement is completed.

areaTool.on('measureComplete', (result) => {
  console.log('Measurement completed')
  console.log('Area:', result.area, 'square meters')
  console.log('Perimeter:', result.perimeter, 'meters')
  console.log('Vertex count:', result.positions.length)
})

Result Object:

interface AreaMeasurementResult {
  // Area (square meters)
  area: number

  // Perimeter (meters)
  perimeter: number

  // Vertex coordinate array
  positions: Cesium.Cartesian3[]

  // Geographic coordinate array
  coordinates: Array<{
    longitude: number
    latitude: number
    height: number
  }>
}

Complete Example​

import { useEffect, useRef } from 'react'
import * as Cesium from 'cesium'
import DMap3D from 'dmap3d'

function AreaMeasurement() {
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)

  useEffect(() => {
    // Create Viewer
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    })
    viewerRef.current = viewer

    // Create measurement tool
    const tool = new DMap3D.measurement.area(viewer, {
      fillColor: Cesium.Color.BLUE.withAlpha(0.3),
      outlineColor: Cesium.Color.BLUE,
      outlineWidth: 3,
      showLabel: true,
      clampToGround: true,
    })
    toolRef.current = tool

    // Listen for events
    tool.on('measureComplete', (result) => {
      alert(`Measurement completed!\nArea: ${result.area.toFixed(2)} sq meters\nPerimeter: ${result.perimeter.toFixed(2)} meters`)
    })

    // Start measurement
    tool.start()

    return () => {
      tool.destroy()
      viewer.destroy()
    }
  }, [])

  const handleClear = () => {
    toolRef.current?.clear()
    toolRef.current?.start()
  }

  return (
    <div>
      <div id="cesiumContainer" style={{ width: '100%', height: '100vh' }} />
      <button onClick={handleClear} style={{ position: 'absolute', top: 10, left: 10 }}>
        Clear and Remeasure
      </button>
    </div>
  )
}

export default AreaMeasurement