跳到主要内容

面积测量示例

这个示例演示如何使用 DMap3D SDK 进行面积测量。

效果预览​

用户可以在地图上点击绘制多边形，双击完成绘制并显示面积。

完整代码​

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

interface MeasurementResult {
  area: number
  perimeter: number
}

function AreaMeasurement() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [result, setResult] = useState<MeasurementResult | null>(null)
  const [isMeasuring, setIsMeasuring] = useState(false)

  useEffect(() => {
    if (!containerRef.current) return

    // 创建 Viewer
    const viewer = new Cesium.Viewer(containerRef.current, {
      terrain: Cesium.Terrain.fromWorldTerrain(),
      timeline: false,
      animation: false,
      baseLayerPicker: false,
    })
    viewerRef.current = viewer

    // 飞到北京
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(116.3912757, 39.906217, 10000),
    })

    // 创建测量工具
    const tool = new DMap3D.measurement.area(viewer, {
      fillColor: Cesium.Color.BLUE.withAlpha(0.3),
      outlineColor: Cesium.Color.BLUE,
      outlineWidth: 3,
      showLabel: true,
      clampToGround: true,
    })
    toolRef.current = tool

    // 监听测量开始
    tool.on('measureStart', () => {
      setIsMeasuring(true)
      setResult(null)
    })

    // 监听测量更新
    tool.on('measureUpdate', (data: MeasurementResult) => {
      setResult(data)
    })

    // 监听测量完成
    tool.on('measureComplete', (data: MeasurementResult) => {
      setIsMeasuring(false)
      setResult(data)
    })

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

  const handleStart = () => {
    toolRef.current?.start()
  }

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

  return (
    <div className="area-measurement">
      <div ref={containerRef} className="cesium-container" />
      
      {/* 控制面板 */}
      <div className="control-panel">
        <h3>面积测量</h3>
        <p>点击地图绘制多边形，双击完成测量</p>
        
        <div className="buttons">
          <button onClick={handleStart} disabled={isMeasuring}>
            {isMeasuring ? '测量中...' : '开始测量'}
          </button>
          <button onClick={handleClear}>清除</button>
        </div>

        {/* 显示结果 */}
        {result && (
          <div className="result">
            <h4>测量结果</h4>
            <p>面积: {result.area.toFixed(2)} 平方米</p>
            <p>面积: {(result.area / 10000).toFixed(4)} 公顷</p>
            <p>周长: {result.perimeter.toFixed(2)} 米</p>
          </div>
        )}
      </div>
    </div>
  )
}

export default AreaMeasurement

样式文件​

src/components/AreaMeasurement.css
.area-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 p {
  margin: 5px 0;
  font-size: 14px;
  color: #333;
}

关键代码说明​

1. 创建 Viewer​

const viewer = new Cesium.Viewer(containerRef.current, {
  terrain: Cesium.Terrain.fromWorldTerrain(), // 使用世界地形
  timeline: false,  // 隐藏时间轴
  animation: false, // 隐藏动画控件
  baseLayerPicker: false, // 隐藏底图选择器
})

2. 创建测量工具​

const tool = new DMap3D.measurement.area(viewer, {
  fillColor: Cesium.Color.BLUE.withAlpha(0.3), // 半透明蓝色填充
  outlineColor: Cesium.Color.BLUE,              // 蓝色边框
  outlineWidth: 3,                               // 边框宽度
  showLabel: true,                               // 显示标签
  clampToGround: true,                           // 贴地
})

3. 监听事件​

// 测量开始
tool.on('measureStart', () => {
  setIsMeasuring(true)
})

// 测量更新（实时显示）
tool.on('measureUpdate', (data) => {
  setResult(data)
})

// 测量完成
tool.on('measureComplete', (data) => {
  setIsMeasuring(false)
  setResult(data)
})

扩展功能​

你可以基于此示例添加以下功能：

  1. 单位切换 - 支持平方米、公顷、平方公里等单位
  2. 导出数据 - 导出测量结果为 JSON 或 CSV
  3. 历史记录 - 保存多次测量结果
  4. 样式自定义 - 让用户自定义颜色和样式

相关 API​