跳到主要内容

缓冲区分析示例

这个示例演示如何使用 DMap3D SDK 进行缓冲区分析，支持点、线、面三种几何类型。

效果预览​

用户绘制几何图形后自动生成指定距离的缓冲区，支持动态调整缓冲距离和几何类型。

完整代码​

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

function BufferAnalysis() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [isActive, setIsActive] = useState(false)
  const [bufferDistance, setBufferDistance] = useState(50)
  const [geometryType, setGeometryType] = useState<string>('polygon')

  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,
      terrainProvider: new Cesium.EllipsoidTerrainProvider({}),
    })
    viewerRef.current = viewer

    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 5000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-45),
        roll: 0,
      },
    })

    // 创建缓冲区分析工具
    const tool = new DMap3D.analysis.bufferAnalysis(viewer, {
      bufferDistance: 50,
      geometryType: 'polygon',
      originalColor: '#FFFF00',
      bufferColor: '#FF0000',
      originalAlpha: 0.6,
      bufferAlpha: 0.3,
    })
    toolRef.current = tool

    tool.onAnalysisEnd(() => {
      setIsActive(false)
    })

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

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

  const handleStop = () => {
    toolRef.current?.deactivate()
    setIsActive(false)
  }

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

  const handleDistanceChange = (value: number) => {
    setBufferDistance(value)
    toolRef.current?.setBufferDistance(value)
  }

  const handleTypeChange = (type: string) => {
    setGeometryType(type)
    toolRef.current?.setGeometryType(type)
  }

  return (
    <div className="buffer-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={handleStop} disabled={!isActive}>停止</button>
          <button onClick={handleClear}>清除</button>
        </div>

        <div className="settings">
          <h4>参数设置</h4>

          <div className="setting-item">
            <label>几何类型:</label>
            <div className="type-buttons">
              {['point', 'polyline', 'polygon'].map((type) => (
                <button key={type}
                  className={geometryType === type ? 'active' : ''}
                  onClick={() => handleTypeChange(type)}>
                  {type === 'point' ? '点' : type === 'polyline' ? '线' : '面'}
                </button>
              ))}
            </div>
          </div>

          <div className="setting-item">
            <label>缓冲距离: {bufferDistance} 米</label>
            <input type="range" min="10" max="500" value={bufferDistance}
              onChange={(e) => handleDistanceChange(Number(e.target.value))} />
          </div>
        </div>

        <div className="legend">
          <div className="legend-item">
            <span className="color-box" style={{background: '#FFFF00'}}></span>
            <span>原始图形</span>
          </div>
          <div className="legend-item">
            <span className="color-box" style={{background: '#FF0000', opacity: 0.5}}></span>
            <span>缓冲区域</span>
          </div>
        </div>
      </div>
    </div>
  )
}

export default BufferAnalysis

样式文件​

src/components/BufferAnalysis.css
.buffer-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: 8px; margin-bottom: 15px; }
.buttons button {
  flex: 1; padding: 8px 12px; 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; }

.settings { border-top: 1px solid #e8e8e8; padding-top: 15px; margin-bottom: 15px; }
.settings h4 { margin: 0 0 12px 0; font-size: 14px; color: #666; }
.setting-item { margin-bottom: 12px; }
.setting-item label { display: block; font-size: 13px; color: #333; margin-bottom: 4px; }
.setting-item input[type="range"] { width: 100%; }

.type-buttons { display: flex; gap: 6px; margin-top: 4px; }
.type-buttons button {
  flex: 1; padding: 6px; border: 1px solid #d9d9d9; border-radius: 4px;
  background: white; cursor: pointer; font-size: 13px;
}
.type-buttons button.active { background: #1890ff; color: white; border-color: #1890ff; }

.legend-item { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 14px; }
.color-box { width: 20px; height: 12px; border-radius: 2px; }

关键代码说明​

1. 创建缓冲区分析工具​

const tool = new DMap3D.analysis.bufferAnalysis(viewer, {
  bufferDistance: 50,       // 缓冲距离（米）
  geometryType: 'polygon',  // 几何类型
  originalColor: '#FFFF00', // 原始图形颜色
  bufferColor: '#FF0000',   // 缓冲区颜色
})

2. 支持的几何类型​

类型说明操作
point点缓冲点击一个点
polyline线缓冲左键添加点，右键完成
polygon面缓冲左键添加点，右键完成

3. 获取分析结果​

const result = tool.getBufferResult()
// result.bufferDistance: 缓冲距离
// result.bufferArea: 缓冲区面积
// result.originalArea: 原始面积（面类型时）

扩展功能​

  1. 多级缓冲 - 生成不同距离的多级缓冲区
  2. 合并缓冲 - 多个图形缓冲区合并
  3. 面积统计 - 缓冲区面积占比统计
  4. 影响范围 - 分析缓冲区内的要素

相关 API​