跳到主要内容

距离测量

DMap3D 提供三种距离测量工具：空间距离、水平距离和贴地距离。

引入​

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

空间距离测量​

DMap3D.measurement.spaceDistance 用于测量三维空间中多点之间的直线距离。

基本用法​

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

// 创建空间距离测量工具
const spaceDistance = new DMap3D.measurement.spaceDistance(viewer)

// 监听测量完成事件
spaceDistance.onMeasureEnd((totalDistance) => {
  console.log('总空间距离:', totalDistance.toFixed(2), '米')
})

// 激活测量（左键添加点，右键结束）
spaceDistance.activate()

构造函数​

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

参数:

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

Options:

interface MeasurementOptions {
  colors?: {
    line?: string       // 测量线颜色，默认 '#00FF00'
    point?: string      // 测量点颜色，默认 '#FF0000'
    font?: string       // 标注文字颜色，默认 '#FFFFFF'
    fontOutline?: string // 文字描边颜色，默认 '#000000'
  }
  fontSize?: number     // 字体大小，默认 14
}

方法​

方法说明
activate()激活测量（左键添加点，右键结束）
deactivate()停用测量，保留已绘制结果
clear()清除所有测量结果
destroy()销毁工具并释放资源
onMeasureEnd(callback)注册测量完成回调，参数为总距离（米）
getTotalDistance()获取当前测量的总距离（米）

水平距离测量​

DMap3D.measurement.horizontalDistance 用于测量两点之间忽略高度差的水平投影距离。

基本用法​

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

// 创建水平距离测量工具
const horizontalDistance = new DMap3D.measurement.horizontalDistance(viewer)

// 监听测量完成事件
horizontalDistance.onMeasureEnd((distance) => {
  console.log('水平距离:', distance.toFixed(2), '米')
})

// 激活测量（左键点击两次完成）
horizontalDistance.activate()

构造函数​

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

参数:

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

Options:

interface HorizontalDistanceOptions {
  colors?: {
    line?: string           // 连接线颜色，默认 '#00FF00'
    horizontalLine?: string // 水平辅助线颜色，默认 '#00FF00'
    verticalLine?: string   // 垂直辅助线颜色，默认 '#FF0000'
    point?: string          // 测量点颜色，默认 '#FF0000'
    font?: string           // 标注文字颜色，默认 '#FFFFFF'
    fontOutline?: string    // 文字描边颜色，默认 '#000000'
  }
  fontSize?: number         // 字体大小，默认 14
}

方法​

方法说明
activate()激活测量（左键点击两次完成）
deactivate()停用测量，保留已绘制结果
clear()清除所有测量结果
destroy()销毁工具并释放资源
onMeasureEnd(callback)注册测量完成回调，参数为水平距离（米）
getHorizontalDistance()获取当前测量的水平距离（米）

贴地距离测量​

DMap3D.measurement.surfaceDistance 用于测量贴合地形表面的真实路径距离。

基本用法​

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

// 创建贴地距离测量工具
const surfaceDistance = new DMap3D.measurement.surfaceDistance(viewer)

// 监听测量完成事件
surfaceDistance.onMeasureEnd((totalDistance) => {
  console.log('总贴地距离:', totalDistance.toFixed(2), '米')
})

// 激活测量（左键添加点，右键结束）
surfaceDistance.activate()

构造函数​

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

参数:

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

Options:

interface SurfaceDistanceOptions {
  colors?: {
    line?: string       // 测量线颜色，默认 '#FBFB00'
    point?: string      // 测量点颜色，默认 '#0008FF'
    font?: string       // 标注文字颜色，默认 '#FFFFFF'
    fontOutline?: string // 文字描边颜色，默认 '#000000'
  }
  fontSize?: number      // 字体大小，默认 14
  includeModels?: boolean // 是否计算模型高度，默认 false
}

方法​

方法说明
activate()激活测量（左键添加点，右键结束）
deactivate()停用测量，保留已绘制结果
clear()清除所有测量结果
destroy()销毁工具并释放资源
onMeasureEnd(callback)注册测量完成回调，参数为总贴地距离（米）
getTotalDistance()获取当前测量的总贴地距离（米）

三种距离对比​

类型说明适用场景
空间距离两点间直线距离（三维）航空距离、视线距离
水平距离忽略高度差的投影距离规划用地、平面测量
贴地距离沿地形表面的实际路径道路规划、徒步距离

完整示例​

// 创建三种距离测量工具
const spaceDistance = new DMap3D.measurement.spaceDistance(viewer, {
  colors: { line: '#00FFFF', point: '#FFFF00' }
})

const horizontalDistance = new DMap3D.measurement.horizontalDistance(viewer, {
  colors: { line: '#FF00FF', horizontalLine: '#FF00FF' }
})

const surfaceDistance = new DMap3D.measurement.surfaceDistance(viewer, {
  includeModels: true
})

// 监听测量完成事件
spaceDistance.onMeasureEnd((d) => console.log('空间距离:', d.toFixed(2), '米'))
horizontalDistance.onMeasureEnd((d) => console.log('水平距离:', d.toFixed(2), '米'))
surfaceDistance.onMeasureEnd((d) => console.log('贴地距离:', d.toFixed(2), '米'))

// 激活其中一个
spaceDistance.activate()

// 清除时
spaceDistance.clear()

// 销毁时
spaceDistance.destroy()
horizontalDistance.destroy()
surfaceDistance.destroy()

相关链接​