Aspect Analysis Example

This example demonstrates how to perform terrain aspect analysis using the DMap3D SDK, displaying terrain orientation with color gradients.

Preview

Display slope face orientations (east, west, south, north, etc.) on the terrain using different colors to help understand terrain trends.

Complete Code

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

function AspectAnalysis() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [isVisible, setIsVisible] = 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,
      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 aspect analysis tool
    const tool = new DMap3D.analysis.aspectAnalyse(viewer, {
      color: '#ff7300',
    })
    toolRef.current = tool

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

  const handleToggle = () => {
    const tool = toolRef.current
    if (!tool) return
    if (isVisible) {
      tool.hide()
    } else {
      tool.show()
    }
    setIsVisible(!isVisible)
  }

  const handleClear = () => {
    toolRef.current?.hide()
    setIsVisible(false)
  }

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

      <div className="control-panel">
        <h3>Aspect Analysis</h3>
        <p>Display terrain slope orientation with colors</p>

        <div className="buttons">
          <button onClick={handleToggle}>
            {isVisible ? 'Hide Aspect' : 'Show Aspect'}
          </button>
          <button onClick={handleClear}>Clear</button>
        </div>

        <div className="legend">
          <h4>Direction Guide</h4>
          <p className="legend-desc">Different colors represent different slope face orientations, useful for analyzing terrain trends and water flow directions.</p>
        </div>
      </div>
    </div>
  )
}

export default AspectAnalysis

Stylesheet

src/components/AspectAnalysis.css
.aspect-analysis { 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; }
.legend { border-top: 1px solid #e8e8e8; padding-top: 15px; }
.legend h4 { margin: 0 0 8px 0; font-size: 14px; color: #666; }
.legend-desc { font-size: 13px; color: #666; margin: 0; }

Key Code Explanation

1. Create Aspect Analysis Tool

const tool = new DMap3D.analysis.aspectAnalyse(viewer, {
  color: '#ff7300', // Base color
})

2. Show/Hide

tool.show()  // Show aspect analysis
tool.hide()  // Hide aspect analysis

3. Difference from Slope Analysis

Analysis Type	Description	Tool
Aspect Analysis	Slope face orientation (direction)	`aspectAnalyse`
Slope Analysis	Slope face steepness (degree)	`slopAnalyse`

Preview​

Complete Code​

Stylesheet​

Key Code Explanation​

1. Create Aspect Analysis Tool​

2. Show/Hide​

3. Difference from Slope Analysis​

Related API​