Skip to main content

Angle Measurement Example

This example demonstrates how to perform three-point angle measurement using the DMap3D SDK.

Preview​

The user clicks three points in sequence (start point, vertex, end point), and the system automatically calculates and displays the angle at the vertex, along with a sector area visualization.

Complete Code​

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

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

  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,
      terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
    })
    viewerRef.current = viewer

    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 5000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-45),
        roll: 0,
      },
    })

    // Create angle measurement tool
    const tool = new DMap3D.measurement.angle(viewer)
    tool.updateConfig({
      pointColor: '#ff0000',
      pointSize: 8,
      lineColor: '#ffff00',
      lineWidth: 2,
      fontColor: '#ffffff',
      fontSize: 16,
      sectorColor: 'rgba(255, 255, 0, 0.3)',
      sectorLineColor: '#ffff00',
    })
    toolRef.current = tool

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

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

  const handleStop = () => {
    const tool = toolRef.current
    if (!tool) return
    tool.end()
    setIsActive(false)
  }

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

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

      <div className="control-panel">
        <h3>Angle Measurement</h3>
        <p>Click three points in sequence: start point, vertex, end point</p>

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

        <div className="tip">
          <h4>Instructions</h4>
          <ol>
            <li>Click the first point (starting edge endpoint)</li>
            <li>Click the second point (angle vertex)</li>
            <li>Click the third point (ending edge endpoint)</li>
            <li>The angle value and sector area are displayed automatically</li>
          </ol>
        </div>
      </div>
    </div>
  )
}

export default AngleMeasurement

Stylesheet​

src/components/AngleMeasurement.css
.angle-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: 8px; margin-bottom: 15px; }
.buttons button {
  flex: 1; padding: 8px 12px; 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; }
.tip { border-top: 1px solid #e8e8e8; padding-top: 15px; }
.tip h4 { margin: 0 0 8px 0; font-size: 14px; color: #666; }
.tip ol { padding-left: 20px; margin: 0; }
.tip li { font-size: 13px; margin: 4px 0; color: #666; }

Key Code Explanation​

1. Create Angle Measurement Tool​

const tool = new DMap3D.measurement.angle(viewer)
tool.updateConfig({
  pointColor: '#ff0000',      // Measurement point color
  sectorColor: 'rgba(255, 255, 0, 0.3)', // Sector fill color
  sectorLineColor: '#ffff00', // Sector edge color
})

2. Measurement Controls​

tool.start()   // Start measurement
tool.end()     // End measurement
tool.clear()   // Clear results
tool.destroy() // Destroy tool

3. Update Configuration​

tool.updateConfig({
  pointColor: '#ff0000',
  pointSize: 8,
  lineColor: '#ffff00',
  lineWidth: 2,
  fontColor: '#ffffff',
  fontSize: 16,
})

Extended Features​

  1. Angle Unit Switching - Support degrees, radians, and gradians
  2. Multi-Angle Measurement - Measure multiple angles consecutively
  3. Angle Bisector - Automatically draw the angle bisector
  4. Data Export - Export angle measurement results