跳到主要内容

坡度测量示例

这个示例演示如何使用 DMap3D SDK 进行两点坡度测量，同时显示度数和百分比。

效果预览​

用户点击两个点，自动计算两点之间的坡度，以度数和百分比两种方式显示。

完整代码​

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

function SlopeMeasurement() {
  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,
      terrain: Cesium.Terrain.fromWorldTerrain(),
    })
    viewerRef.current = viewer

    // 飞到有地形起伏的区域
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(86.925, 27.988, 15000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-45),
        roll: 0,
      },
    })

    // 创建坡度测量工具
    const tool = new DMap3D.measurement.slope(viewer)
    tool.updateConfig({
      pointColor: '#ff0000',
      lineColor: '#00ff00',
      fontColor: '#ffffff',
      fontSize: 16,
    })
    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="slope-measurement">
      <div ref={containerRef} className="cesium-container" />

      <div className="control-panel">
        <h3>坡度测量</h3>
        <p>点击两个不同高度的点测量坡度</p>

        <div className="buttons">
          <button onClick={handleStart} disabled={isActive}>
            {isActive ? '测量中...' : '开始测量'}
          </button>
          <button onClick={handleStop} disabled={!isActive}>停止</button>
          <button onClick={handleClear}>清除</button>
        </div>

        <div className="info">
          <h4>坡度表示方法</h4>
          <table>
            <thead>
              <tr><th>表示法</th><th>说明</th></tr>
            </thead>
            <tbody>
              <tr><td>度数（°）</td><td>与水平面的夹角</td></tr>
              <tr><td>百分比（%）</td><td>垂直距离/水平距离 × 100</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}

export default SlopeMeasurement

样式文件​

src/components/SlopeMeasurement.css
.slope-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; }

.info { border-top: 1px solid #e8e8e8; padding-top: 15px; }
.info h4 { margin: 0 0 8px 0; font-size: 14px; color: #666; }
.info table { width: 100%; border-collapse: collapse; font-size: 13px; }
.info th, .info td { padding: 6px 8px; border: 1px solid #e8e8e8; text-align: left; }
.info th { background: #fafafa; color: #666; }

关键代码说明​

1. 创建坡度测量工具​

const tool = new DMap3D.measurement.slope(viewer)

坡度测量基于 ENU（东-北-上）坐标系计算，结果同时显示度数和百分比。

2. 坡度计算原理​

测量两点之间的坡度：

  • 度数: arctan(高差 / 水平距离)
  • 百分比: (高差 / 水平距离) × 100%

例如 45° 对应 100%，30° 约对应 57.7%。

3. 适用场景​

建议在有地形起伏的区域使用，推荐加载全球地形：

const viewer = new Cesium.Viewer(container, {
  terrain: Cesium.Terrain.fromWorldTerrain(),
})

扩展功能​

  1. 坡度分级 - 按坡度等级着色显示
  2. 路径坡度 - 沿路径计算连续坡度变化
  3. 最大坡度 - 搜索区域内最大坡度点
  4. 坡度统计 - 区域坡度分布统计

相关 API​