Height Measurement Example

This example demonstrates how to perform height measurement using the DMap3D SDK, obtaining the absolute height of a point and the relative height difference between two points.

Preview

The user clicks two points, and the system automatically displays the height difference, horizontal distance, and draws vertical reference lines.

Complete Code

src/components/HeightMeasurement.tsx
import { useEffect, useRef, useState } from 'react'
import * as Cesium from 'cesium'
import DMap3D from 'dmap3d'
import './HeightMeasurement.css'

interface HeightResult {
  absoluteHeight: number
  relativeHeight: number
  horizontalDistance: number
}

function HeightMeasurement() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [isActive, setIsActive] = useState(false)
  const [result, setResult] = useState<HeightResult | null>(null)

  useEffect(() => {
    if (!containerRef.current) return

    Cesium.Ion.defaultAccessToken = 'your-cesium-ion-token'

    const viewer = new Cesium.Viewer(containerRef.current, {
      animation: false,
      fullscreenButton: false,
      geocoder: false,
      homeButton: false,
      sceneModePicker: false,
      selectionIndicator: false,
      timeline: false,
      navigationHelpButton: false,
      infoBox: false,
      baseLayerPicker: false,
      terrain: Cesium.Terrain.fromWorldTerrain(),
    })
    viewerRef.current = viewer

    // Set initial view
    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(112.94, 28.23, 5000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-45),
        roll: 0,
      },
    })

    // Create height measurement tool
    const tool = new DMap3D.measurement.height(viewer, {
      lineColor: '#00ff00',
      pointColor: '#ff0000',
      circularColor: '#ffff00',
      fontColor: '#ffffff',
      fontSize: 16,
    })
    toolRef.current = tool

    // Listen for measurement completion
    tool.onMeasureEnd((data: HeightResult) => {
      setIsActive(false)
      setResult(data)
    })

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

  const handleStart = () => {
    const tool = toolRef.current
    if (!tool) return
    tool.activate()
    setIsActive(true)
    setResult(null)
  }

  const handleClear = () => {
    const tool = toolRef.current
    if (!tool) return
    tool.clear()
    setResult(null)
    setIsActive(false)
  }

  return (
    <div className="height-measurement">
      <div ref={containerRef} className="cesium-container" />

      <div className="control-panel">
        <h3>Height Measurement</h3>
        <p>Click two points to measure the height difference</p>

        <div className="buttons">
          <button onClick={handleStart} disabled={isActive}>
            {isActive ? 'Measuring...' : 'Start Measurement'}
          </button>
          <button onClick={handleClear}>Clear</button>
        </div>

        {result && (
          <div className="result">
            <h4>Measurement Result</h4>
            <div className="result-item">
              <span className="label">Absolute Height:</span>
              <span className="value">{result.absoluteHeight.toFixed(2)} m</span>
            </div>
            <div className="result-item">
              <span className="label">Relative Height Diff:</span>
              <span className="value">{result.relativeHeight.toFixed(2)} m</span>
            </div>
            <div className="result-item">
              <span className="label">Horizontal Distance:</span>
              <span className="value">{result.horizontalDistance.toFixed(2)} m</span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default HeightMeasurement

Stylesheet

src/components/HeightMeasurement.css
.height-measurement {
  position: relative;
  width: 100%;
  height: 100vh;
}

.cesium-container {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-width: 250px;
}

.control-panel h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
}

.control-panel p {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 14px;
}

.buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.buttons button {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #1890ff;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

.buttons button:hover {
  background: #40a9ff;
}

.buttons button:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}

.result {
  border-top: 1px solid #e8e8e8;
  padding-top: 15px;
}

.result h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 14px;
}

.result-item .label {
  color: #666;
}

.result-item .value {
  color: #333;
  font-weight: 500;
}

Key Code Explanation

1. Create Height Measurement Tool

const tool = new DMap3D.measurement.height(viewer, {
  lineColor: '#00ff00',    // Measurement line color
  pointColor: '#ff0000',   // Measurement point color
  circularColor: '#ffff00', // Auxiliary circle color
  fontColor: '#ffffff',    // Label color
  fontSize: 16,            // Label font size
})

2. Measurement Result Description

tool.onMeasureEnd((result) => {
  console.log('Absolute height:', result.absoluteHeight)    // Point elevation (meters)
  console.log('Relative height diff:', result.relativeHeight)    // Height difference between two points (meters)
  console.log('Horizontal distance:', result.horizontalDistance) // Horizontal distance between two points (meters)
})

Field	Description
`absoluteHeight`	Elevation of the measurement point (meters)
`relativeHeight`	Height difference between two points (meters)
`horizontalDistance`	Horizontal projected distance between two points (meters)

3. Usage with 3DTiles

Height measurement is more effective in scenes with loaded 3D models:

// Load 3DTiles model
const tileset = await Cesium.Cesium3DTileset.fromUrl('/3DTiles/model/tileset.json')
viewer.scene.primitives.add(tileset)
viewer.zoomTo(tileset)

// Then perform height measurement on the model surface
tool.activate()

Extended Features

Multi-Point Height - Measure elevation of multiple points simultaneously
Height Profile - Generate height profile along a path
Terrain Analysis - Combine with terrain data for slope analysis
Data Export - Export height measurement data as CSV

Preview​

Complete Code​

Stylesheet​

Key Code Explanation​

1. Create Height Measurement Tool​

2. Measurement Result Description​

3. Usage with 3DTiles​

Extended Features​

Related API​