跳到主要内容

等高线分析示例

这个示例演示如何使用 DMap3D SDK 在地形上生成等高线。

效果预览​

在珠穆朗玛峰区域自动生成等高线，支持动态调整间距、线宽和颜色。

完整代码​

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

function ContourAnalysis() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [isVisible, setIsVisible] = useState(false)
  const [spacing, setSpacing] = useState(50)
  const [lineWidth, setLineWidth] = useState(2)
  const [color, setColor] = useState('#00ff00')

  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.9250, 27.9881, 30000),
      orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-60),
        roll: 0,
      },
    })

    // 创建等高线工具
    const tool = new DMap3D.analysis.contour(viewer)
    tool.setWidth(2)
    tool.setSpacing(50)
    tool.setColor('#00ff00')
    toolRef.current = tool

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

  const handleToggle = () => {
    const tool = toolRef.current
    if (!tool) return

    if (isVisible) {
      tool.hide()
    } else {
      tool.show()
    }
    setIsVisible(!isVisible)
  }

  const handleClear = () => {
    const tool = toolRef.current
    if (!tool) return
    tool.hide()
    setIsVisible(false)
  }

  const handleSpacingChange = (value: number) => {
    setSpacing(value)
    toolRef.current?.setSpacing(value)
  }

  const handleWidthChange = (value: number) => {
    setLineWidth(value)
    toolRef.current?.setWidth(value)
  }

  const handleColorChange = (value: string) => {
    setColor(value)
    toolRef.current?.setColor(value)
  }

  return (
    <div className="contour-analysis">
      <div ref={containerRef} className="cesium-container" />

      <div className="control-panel">
        <h3>等高线分析</h3>
        <p>在地形上显示等高线</p>

        <div className="buttons">
          <button onClick={handleToggle}>
            {isVisible ? '隐藏等高线' : '显示等高线'}
          </button>
          <button onClick={handleClear}>清除</button>
        </div>

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

          <div className="setting-item">
            <label>等高距: {spacing} 米</label>
            <input
              type="range"
              min="10"
              max="200"
              value={spacing}
              onChange={(e) => handleSpacingChange(Number(e.target.value))}
            />
          </div>

          <div className="setting-item">
            <label>线宽: {lineWidth} px</label>
            <input
              type="range"
              min="1"
              max="5"
              value={lineWidth}
              onChange={(e) => handleWidthChange(Number(e.target.value))}
            />
          </div>

          <div className="setting-item">
            <label>颜色:</label>
            <input
              type="color"
              value={color}
              onChange={(e) => handleColorChange(e.target.value)}
            />
          </div>
        </div>
      </div>
    </div>
  )
}

export default ContourAnalysis

样式文件​

src/components/ContourAnalysis.css
.contour-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;
}

.settings {
  border-top: 1px solid #e8e8e8;
  padding-top: 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%;
}

.setting-item input[type="color"] {
  width: 50px;
  height: 28px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
}

关键代码说明​

1. 创建等高线工具​

const tool = new DMap3D.analysis.contour(viewer)
tool.setWidth(2)       // 线宽（像素）
tool.setSpacing(50)    // 等高距（米）
tool.setColor('#00ff00') // 等高线颜色

2. 显示/隐藏等高线​

// 显示等高线
tool.show()

// 隐藏等高线
tool.hide()

3. 动态调整参数​

// 修改等高距（单位：米）
tool.setSpacing(100)

// 修改线宽（单位：像素）
tool.setWidth(3)

// 修改颜色
tool.setColor('#ff0000')

等高线工具支持实时修改参数，修改后立即生效。

4. 适用场景​

等高线分析需要有起伏的地形才能看到明显效果，推荐在以下区域测试：

区域经度纬度建议等高距
珠穆朗玛峰86.92527.98850-100 米
大峡谷-112.1136.1030-50 米
富士山138.72735.36150-100 米

扩展功能​

  1. 标注高程值 - 在等高线上标注高程数值
  2. 分层着色 - 按海拔分层使用不同颜色
  3. 主曲线/计曲线 - 区分主等高线和辅助等高线
  4. 导出为矢量 - 导出等高线为 GeoJSON 格式

相关 API​