跳到主要内容

面积测量

DMap3D.measurement.area 用于测量多边形区域的面积。

引入​

import DMap3D from 'dmap3d'
import * as Cesium from 'cesium'

基本用法​

const viewer = new Cesium.Viewer('cesiumContainer')

// 创建面积测量工具
const areaTool = new DMap3D.measurement.area(viewer)

// 监听测量完成事件
areaTool.on('measureComplete', (result) => {
  console.log('面积:', result.area, '平方米')
  console.log('周长:', result.perimeter, '米')
})

// 开始测量
areaTool.start()

构造函数​

new DMap3D.measurement.area(viewer, options?)​

创建面积测量工具实例。

参数:

  • viewer - Cesium.Viewer 实例
  • options? - 可选配置项

Options:

interface AreaMeasurementOptions {
  // 填充颜色
  fillColor?: Cesium.Color
  
  // 边界颜色
  outlineColor?: Cesium.Color
  
  // 边界宽度
  outlineWidth?: number
  
  // 是否显示标签
  showLabel?: boolean
  
  // 标签字体
  labelFont?: string
  
  // 标签颜色
  labelColor?: Cesium.Color
  
  // 是否贴地
  clampToGround?: boolean
}

示例:

const areaTool = new DMap3D.measurement.area(viewer, {
  fillColor: Cesium.Color.RED.withAlpha(0.3),
  outlineColor: Cesium.Color.RED,
  outlineWidth: 2,
  showLabel: true,
  clampToGround: true,
})

方法​

start()​

开始测量。用户可以在地图上点击添加顶点，双击完成测量。

areaTool.start()

stop()​

停止测量，但保留已绘制的图形。

areaTool.stop()

clear()​

清除所有测量结果。

areaTool.clear()

destroy()​

销毁工具实例并清理资源。

areaTool.destroy()

事件​

measureStart​

开始测量时触发。

areaTool.on('measureStart', () => {
  console.log('开始测量')
})

measureUpdate​

测量过程中更新时触发。

areaTool.on('measureUpdate', (result) => {
  console.log('当前面积:', result.area)
})

measureComplete​

测量完成时触发。

areaTool.on('measureComplete', (result) => {
  console.log('测量完成')
  console.log('面积:', result.area, '平方米')
  console.log('周长:', result.perimeter, '米')
  console.log('顶点数:', result.positions.length)
})

Result 对象:

interface AreaMeasurementResult {
  // 面积（平方米）
  area: number
  
  // 周长（米）
  perimeter: number
  
  // 顶点坐标数组
  positions: Cesium.Cartesian3[]
  
  // 地理坐标数组
  coordinates: Array<{
    longitude: number
    latitude: number
    height: number
  }>
}

完整示例​

import { useEffect, useRef } from 'react'
import * as Cesium from 'cesium'
import DMap3D from 'dmap3d'

function AreaMeasurement() {
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)

  useEffect(() => {
    // 创建 Viewer
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    })
    viewerRef.current = viewer

    // 创建测量工具
    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('measureComplete', (result) => {
      alert(`测量完成!\n面积: ${result.area.toFixed(2)} 平方米\n周长: ${result.perimeter.toFixed(2)} 米`)
    })

    // 开始测量
    tool.start()

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

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

  return (
    <div>
      <div id="cesiumContainer" style={{ width: '100%', height: '100vh' }} />
      <button onClick={handleClear} style={{ position: 'absolute', top: 10, left: 10 }}>
        清除并重新测量
      </button>
    </div>
  )
}

export default AreaMeasurement

相关链接​