跳到主要内容

填挖方分析示例

这个示例演示如何使用 DMap3D SDK 进行填挖方体积计算。

效果预览​

用户绘制分析区域，自动计算需要填方和挖方的体积，并可视化显示结果。

完整代码​

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

interface CutFillResult {
  cutVolume: number
  fillVolume: number
  baseHeight: number
  minHeight: number
  maxHeight: number
  baseArea: number
}

function CutFillAnalysis() {
  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<CutFillResult | 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.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(86.925, 27.988, 30000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-60),
        roll: 0,
      },
    })

    // 创建填挖方分析工具
    const tool = new DMap3D.analysis.cutFill(viewer, {
      showTriangle: true,
      showRangeBox: true,
      showBasePlane: true,
      showResultLabel: true,
    })
    toolRef.current = tool

    tool.onAnalysisEnd((data: CutFillResult) => {
      setIsActive(false)
      setResult(data)
    })

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

  const handleStart = () => {
    toolRef.current?.activate()
    setIsActive(true)
    setResult(null)
  }

  const handleClear = () => {
    toolRef.current?.deactivate()
    toolRef.current?.clear()
    setIsActive(false)
    setResult(null)
  }

  return (
    <div className="cut-fill-analysis">
      <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>挖方体积:</span>
              <span>{result.cutVolume.toFixed(2)} m³</span>
            </div>
            <div className="result-item">
              <span>填方体积:</span>
              <span>{result.fillVolume.toFixed(2)} m³</span>
            </div>
            <div className="result-item">
              <span>基准高度:</span>
              <span>{result.baseHeight.toFixed(2)} 米</span>
            </div>
            <div className="result-item">
              <span>最高点:</span>
              <span>{result.maxHeight.toFixed(2)} 米</span>
            </div>
            <div className="result-item">
              <span>最低点:</span>
              <span>{result.minHeight.toFixed(2)} 米</span>
            </div>
            <div className="result-item">
              <span>基准面积:</span>
              <span>{result.baseArea.toFixed(2)} m²</span>
            </div>
          </div>
        )}
      </div>
    </div>
  )
}

export default CutFillAnalysis

样式文件​

src/components/CutFillAnalysis.css
.cut-fill-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; }
.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; }

关键代码说明​

1. 创建填挖方分析工具​

const tool = new DMap3D.analysis.cutFill(viewer, {
  showTriangle: true,     // 显示三角网
  showRangeBox: true,     // 显示范围框
  showBasePlane: true,    // 显示基准面
  showResultLabel: true,  // 显示结果标签
})

2. 分析结果​

tool.onAnalysisEnd((result) => {
  console.log('挖方:', result.cutVolume, 'm³')
  console.log('填方:', result.fillVolume, 'm³')
  console.log('基准高度:', result.baseHeight, '米')
})
字段说明
cutVolume需要挖掉的体积（m³）
fillVolume需要填入的体积（m³）
baseHeight基准面高度（米）
baseArea基准面积（m²）

相关 API​