Skip to main content

Elevation Extremum Analysis Example

This example demonstrates how to perform elevation extremum analysis using the DMap3D SDK, finding the highest and lowest points within an area.

Preview​

After the user draws the analysis area, the system automatically searches for the highest and lowest elevation points within the area and marks them.

Complete Code​

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

interface AnalysisResult {
  minHeight: number
  maxHeight: number
  baseHeight: number
  baseArea: number
}

function ElevationExtremumAnalysis() {
  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<AnalysisResult | 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

    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(86.925, 27.988, 30000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-60),
        roll: 0,
      },
    })

    // Create elevation extremum analysis tool
    const tool = new DMap3D.analysis.elevationExtremum(viewer, {
      showTriangle: true,
      showRangeBox: true,
      showBasePlane: true,
      showResultLabel: true,
    })
    toolRef.current = tool

    tool.onAnalysisEnd((data: AnalysisResult) => {
      setIsActive(false)
      setResult(data)
    })

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

  const handleStart = () => {
    toolRef.current?.activate()
    setIsActive(true)
    setResult(null)
  }

  const handleClear = () => {
    toolRef.current?.deactivate()
    toolRef.current?.clear()
    setIsActive(false)
    setResult(null)
  }

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

      <div className="control-panel">
        <h3>Elevation Extremum Analysis</h3>
        <p>Draw an area to find the highest/lowest points</p>

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

        {result && (
          <div className="result">
            <h4>Analysis Result</h4>
            <div className="result-item">
              <span>Highest Point:</span>
              <span>{result.maxHeight.toFixed(2)} m</span>
            </div>
            <div className="result-item">
              <span>Lowest Point:</span>
              <span>{result.minHeight.toFixed(2)} m</span>
            </div>
            <div className="result-item">
              <span>Height Difference:</span>
              <span>{(result.maxHeight - result.minHeight).toFixed(2)} m</span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default ElevationExtremumAnalysis

Stylesheet​

src/components/ElevationExtremumAnalysis.css
.elevation-extremum { 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; }

Key Code Explanation​

1. Create Elevation Extremum Analysis Tool​

const tool = new DMap3D.analysis.elevationExtremum(viewer, {
  showTriangle: true,     // Show triangulated mesh
  showRangeBox: true,     // Show range box
  showBasePlane: true,    // Show base plane
  showResultLabel: true,  // Show result labels
})

2. Listen for Analysis Results​

tool.onAnalysisEnd((result) => {
  console.log('Highest:', result.maxHeight, 'm')
  console.log('Lowest:', result.minHeight, 'm')
  console.log('Base area:', result.baseArea, 'sq m')
})