Skip to main content

Slope Analysis Example

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

Preview​

Display slope magnitude on the terrain using different colors, with darker colors for steep areas and lighter colors for gentle areas.

Complete Code​

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

function SlopeAnalysis() {
  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 slope analysis tool
    const tool = new DMap3D.analysis.slopAnalyse(viewer, {
      color: '#0015ff',
    })
    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="slope-analysis-page">
      <div ref={containerRef} className="cesium-container" />

      <div className="control-panel">
        <h3>Slope Analysis</h3>
        <p>Display terrain steepness with colors</p>

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

        <div className="legend">
          <h4>Slope Guide</h4>
          <table>
            <thead>
              <tr><th>Slope Range</th><th>Terrain Type</th></tr>
            </thead>
            <tbody>
              <tr><td>0 deg - 5 deg</td><td>Flat terrain</td></tr>
              <tr><td>5 deg - 15 deg</td><td>Gentle slope</td></tr>
              <tr><td>15 deg - 25 deg</td><td>Moderate slope</td></tr>
              <tr><td>25 deg - 45 deg</td><td>Steep slope</td></tr>
              <tr><td>&gt; 45 deg</td><td>Very steep / Cliff</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

export default SlopeAnalysis

Stylesheet​

src/components/SlopeAnalysis.css
.slope-analysis-page { 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 table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legend th, .legend td { padding: 6px 8px; border: 1px solid #e8e8e8; text-align: left; }
.legend th { background: #fafafa; color: #666; }

Key Code Explanation​

1. Create Slope Analysis Tool​

const tool = new DMap3D.analysis.slopAnalyse(viewer, {
  color: '#0015ff', // Base color
})

2. Show/Hide​

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

Slope analysis is implemented through Shader coloring and does not require interactive drawing of areas. It takes effect on the global terrain directly.