Azimuth Measurement Example

This example demonstrates how to perform two-point azimuth measurement using the DMap3D SDK.

Preview

The user clicks two points, and the system automatically calculates the azimuth from the first point to the second point (measured clockwise from true north, 0 deg-360 deg), displaying a north direction indicator arrow.

Complete Code

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

function AzimuthMeasurement() {
  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 azimuth measurement tool
    const tool = new DMap3D.measurement.azimuth(viewer)
    tool.updateConfig({
      pointColor: '#ff0000',
      lineColor: '#00ffff',
      fontColor: '#ffffff',
      fontSize: 16,
      arrowColor: '#ff0000',
      arrowLength: 50,
    })
    toolRef.current = tool

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

  const handleStart = () => {
    toolRef.current?.start()
    setIsActive(true)
  }

  const handleStop = () => {
    toolRef.current?.end()
    setIsActive(false)
  }

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

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

      <div className="control-panel">
        <h3>Azimuth Measurement</h3>
        <p>Click two points to measure azimuth</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="compass">
          <h4>Azimuth Reference</h4>
          <ul>
            <li><strong>0 deg / 360 deg</strong> - North</li>
            <li><strong>90 deg</strong> - East</li>
            <li><strong>180 deg</strong> - South</li>
            <li><strong>270 deg</strong> - West</li>
          </ul>
        </div>
      </div>
    </div>
  )
}

export default AzimuthMeasurement

Stylesheet

src/components/AzimuthMeasurement.css
.azimuth-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; }

.compass { border-top: 1px solid #e8e8e8; padding-top: 15px; }
.compass h4 { margin: 0 0 8px 0; font-size: 14px; color: #666; }
.compass ul { list-style: none; padding: 0; margin: 0; }
.compass li { font-size: 13px; margin: 4px 0; color: #666; }

Key Code Explanation

1. Create Azimuth Measurement Tool

const tool = new DMap3D.measurement.azimuth(viewer)
tool.updateConfig({
  arrowColor: '#ff0000',  // North indicator arrow color
  arrowLength: 50,         // Arrow length
})

2. Azimuth Description

Azimuth is measured clockwise from true north:

Azimuth	Direction
0 deg	North
45 deg	Northeast
90 deg	East
135 deg	Southeast
180 deg	South
225 deg	Southwest
270 deg	West
315 deg	Northwest

Extended Features

Magnetic Declination Correction - Account for the deviation between true north and magnetic north
Back Azimuth - Display both forward and back azimuths simultaneously
Navigation Line - Draw azimuth navigation auxiliary lines
Coordinate Azimuth - Batch calculate azimuths for coordinate sequences

Preview​

Complete Code​

Stylesheet​

Key Code Explanation​

1. Create Azimuth Measurement Tool​

2. Azimuth Description​

Extended Features​

Related API​