Contour Analysis Example

This example demonstrates how to generate contour lines on terrain using the DMap3D SDK.

Preview

Automatically generate contour lines in the Mount Everest area, with support for dynamic adjustment of interval, line width, and color.

Complete Code

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

function ContourAnalysis() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [isVisible, setIsVisible] = useState(false)
  const [spacing, setSpacing] = useState(50)
  const [lineWidth, setLineWidth] = useState(2)
  const [color, setColor] = useState('#00ff00')

  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

    // Fly to Mount Everest area
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(86.9250, 27.9881, 30000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-60),
        roll: 0,
      },
    })

    // Create contour tool
    const tool = new DMap3D.analysis.contour(viewer)
    tool.setWidth(2)
    tool.setSpacing(50)
    tool.setColor('#00ff00')
    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 = () => {
    const tool = toolRef.current
    if (!tool) return
    tool.hide()
    setIsVisible(false)
  }

  const handleSpacingChange = (value: number) => {
    setSpacing(value)
    toolRef.current?.setSpacing(value)
  }

  const handleWidthChange = (value: number) => {
    setLineWidth(value)
    toolRef.current?.setWidth(value)
  }

  const handleColorChange = (value: string) => {
    setColor(value)
    toolRef.current?.setColor(value)
  }

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

      <div className="control-panel">
        <h3>Contour Analysis</h3>
        <p>Display contour lines on terrain</p>

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

        <div className="settings">
          <h4>Parameter Settings</h4>

          <div className="setting-item">
            <label>Contour Interval: {spacing} m</label>
            <input
              type="range"
              min="10"
              max="200"
              value={spacing}
              onChange={(e) => handleSpacingChange(Number(e.target.value))}
            />
          </div>

          <div className="setting-item">
            <label>Line Width: {lineWidth} px</label>
            <input
              type="range"
              min="1"
              max="5"
              value={lineWidth}
              onChange={(e) => handleWidthChange(Number(e.target.value))}
            />
          </div>

          <div className="setting-item">
            <label>Color:</label>
            <input
              type="color"
              value={color}
              onChange={(e) => handleColorChange(e.target.value)}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default ContourAnalysis

Stylesheet

src/components/ContourAnalysis.css
.contour-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: 260px;
}

.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;
}

.settings {
  border-top: 1px solid #e8e8e8;
  padding-top: 15px;
}

.settings h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
}

.setting-item {
  margin-bottom: 12px;
}

.setting-item label {
  display: block;
  font-size: 13px;
  color: #333;
  margin-bottom: 4px;
}

.setting-item input[type="range"] {
  width: 100%;
}

.setting-item input[type="color"] {
  width: 50px;
  height: 28px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
}

Key Code Explanation

1. Create Contour Tool

const tool = new DMap3D.analysis.contour(viewer)
tool.setWidth(2)       // Line width (pixels)
tool.setSpacing(50)    // Contour interval (meters)
tool.setColor('#00ff00') // Contour line color

2. Show/Hide Contour Lines

// Show contour lines
tool.show()

// Hide contour lines
tool.hide()

3. Dynamically Adjust Parameters

// Change contour interval (unit: meters)
tool.setSpacing(100)

// Change line width (unit: pixels)
tool.setWidth(3)

// Change color
tool.setColor('#ff0000')

The contour tool supports real-time parameter modification, taking effect immediately after changes.

4. Applicable Scenarios

Contour analysis requires undulating terrain to show noticeable results. Recommended test areas:

Area	Longitude	Latitude	Recommended Interval
Mount Everest	86.925	27.988	50-100 m
Grand Canyon	-112.11	36.10	30-50 m
Mount Fuji	138.727	35.361	50-100 m

Extended Features

Label Elevation Values - Label elevation values on contour lines
Layered Coloring - Use different colors by elevation layers
Index/Intermediate Contours - Distinguish between index and intermediate contour lines
Export as Vector - Export contour lines in GeoJSON format

Preview​

Complete Code​

Stylesheet​

Key Code Explanation​

1. Create Contour Tool​

2. Show/Hide Contour Lines​

3. Dynamically Adjust Parameters​

4. Applicable Scenarios​

Extended Features​

Related API​