跳到主要内容

高度测量示例

这个示例演示如何使用 DMap3D SDK 进行高度测量，获取点的绝对高度和两点间的相对高度差。

效果预览​

用户点击两个点，自动显示高度差、水平距离，并绘制竖直参考线。

完整代码​

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

interface HeightResult {
  absoluteHeight: number
  relativeHeight: number
  horizontalDistance: number
}

function HeightMeasurement() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [isActive, setIsActive] = useState(false)
  const [result, setResult] = useState<HeightResult | null>(null)

  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.setView({
      destination: Cesium.Cartesian3.fromDegrees(112.94, 28.23, 5000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-45),
        roll: 0,
      },
    })

    // 创建高度测量工具
    const tool = new DMap3D.measurement.height(viewer, {
      lineColor: '#00ff00',
      pointColor: '#ff0000',
      circularColor: '#ffff00',
      fontColor: '#ffffff',
      fontSize: 16,
    })
    toolRef.current = tool

    // 监听测量完成
    tool.onMeasureEnd((data: HeightResult) => {
      setIsActive(false)
      setResult(data)
    })

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

  const handleStart = () => {
    const tool = toolRef.current
    if (!tool) return
    tool.activate()
    setIsActive(true)
    setResult(null)
  }

  const handleClear = () => {
    const tool = toolRef.current
    if (!tool) return
    tool.clear()
    setResult(null)
    setIsActive(false)
  }

  return (
    <div className="height-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={handleClear}>清除</button>
        </div>

        {result && (
          <div className="result">
            <h4>测量结果</h4>
            <div className="result-item">
              <span className="label">绝对高度:</span>
              <span className="value">{result.absoluteHeight.toFixed(2)} 米</span>
            </div>
            <div className="result-item">
              <span className="label">相对高差:</span>
              <span className="value">{result.relativeHeight.toFixed(2)} 米</span>
            </div>
            <div className="result-item">
              <span className="label">水平距离:</span>
              <span className="value">{result.horizontalDistance.toFixed(2)} 米</span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default HeightMeasurement

样式文件​

src/components/HeightMeasurement.css
.height-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: 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;
}

.buttons button:disabled {
  background: #d9d9d9;
  cursor: not-allowed;
}

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

.result h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
}

.result-item {
  display: flex;
  justify-content: space-between;
  margin: 8px 0;
  font-size: 14px;
}

.result-item .label {
  color: #666;
}

.result-item .value {
  color: #333;
  font-weight: 500;
}

关键代码说明​

1. 创建高度测量工具​

const tool = new DMap3D.measurement.height(viewer, {
  lineColor: '#00ff00',    // 测量线颜色
  pointColor: '#ff0000',   // 测量点颜色
  circularColor: '#ffff00', // 辅助圆颜色
  fontColor: '#ffffff',    // 标签颜色
  fontSize: 16,            // 标签字号
})

2. 测量结果说明​

tool.onMeasureEnd((result) => {
  console.log('绝对高度:', result.absoluteHeight)    // 点的海拔高度（米）
  console.log('相对高差:', result.relativeHeight)    // 两点高度差（米）
  console.log('水平距离:', result.horizontalDistance) // 两点水平距离（米）
})
字段说明
absoluteHeight测量点的海拔高度（米）
relativeHeight两点之间的高度差（米）
horizontalDistance两点的水平投影距离（米）

3. 配合 3DTiles 使用​

高度测量在加载了 3D 模型的场景中效果更明显：

// 加载 3DTiles 模型
const tileset = await Cesium.Cesium3DTileset.fromUrl('/3DTiles/model/tileset.json')
viewer.scene.primitives.add(tileset)
viewer.zoomTo(tileset)

// 然后在模型表面进行高度测量
tool.activate()

扩展功能​

  1. 多点高度 - 同时测量多个点的海拔高度
  2. 高度剖面 - 沿路径生成高度剖面图
  3. 地形分析 - 结合地形数据进行坡度分析
  4. 数据导出 - 导出高度测量数据为 CSV

相关 API​