跳到主要内容

天际线分析示例

这个示例演示如何使用 DMap3D SDK 进行天际线分析，提取当前视角的天际线轮廓。

效果预览​

在 3D 场景中分析当前视角下的天际线，以彩色线条标注建筑物或地形的天际线轮廓。

完整代码​

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

function SkylineAnalysis() {
  const containerRef = useRef<HTMLDivElement>(null)
  const viewerRef = useRef<Cesium.Viewer | null>(null)
  const toolRef = useRef<any>(null)
  const [isActive, setIsActive] = useState(false)
  const [color, setColor] = useState('#FF0000')

  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

    // 加载 3DTiles
    const loadTileset = async () => {
      const tileset = await Cesium.Cesium3DTileset.fromUrl(
        '/3DTiles/model/tileset.json'
      )
      viewer.scene.primitives.add(tileset)
      viewer.zoomTo(tileset)
    }
    loadTileset()

    // 创建天际线分析工具
    const tool = new DMap3D.analysis.skyline(viewer, {
      color: '#FF0000',
    })
    toolRef.current = tool

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

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

  const handleClear = () => {
    toolRef.current?.destroy()
    // 重新创建
    const viewer = viewerRef.current
    if (viewer) {
      toolRef.current = new DMap3D.analysis.skyline(viewer, { color })
    }
    setIsActive(false)
  }

  const handleColorChange = (newColor: string) => {
    setColor(newColor)
    if (isActive) {
      toolRef.current?.destroy()
      const viewer = viewerRef.current
      if (viewer) {
        const newTool = new DMap3D.analysis.skyline(viewer, { color: newColor })
        newTool.init()
        toolRef.current = newTool
      }
    }
  }

  return (
    <div className="skyline-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={handleClear}>清除</button>
        </div>

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

export default SkylineAnalysis

样式文件​

src/components/SkylineAnalysis.css
.skyline-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: 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; }

.settings { border-top: 1px solid #e8e8e8; padding-top: 15px; }
.setting-item { display: flex; align-items: center; gap: 10px; }
.setting-item label { font-size: 13px; color: #333; }
.setting-item input[type="color"] {
  width: 50px; height: 28px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer;
}

关键代码说明​

1. 创建天际线分析工具​

const tool = new DMap3D.analysis.skyline(viewer, {
  color: '#FF0000', // 天际线颜色
})

2. 启动分析​

tool.init() // 开始天际线分析

3. 获取 2D 天际线数据​

const result = await tool.getSkyline2D()
// result.pixelPoints: 像素坐标和颜色
// result.groundHeights: 对应地面高度

4. 修改颜色需重建​

tool.destroy()
tool = new DMap3D.analysis.skyline(viewer, { color: '#00FF00' })
tool.init()

扩展功能​

  1. 天际线对比 - 对比不同视角的天际线
  2. 遮挡分析 - 分析建筑对天际线的遮挡影响
  3. 截图导出 - 导出天际线分析截图
  4. 日照分析 - 结合天际线进行日照时长计算

相关 API​