Cesium应用（六）：三维地形中坡度分析的实现过程

坡度分析

在三维GIS开发中，坡度分析 是最基础、使用频率最高的地形分析功能，广泛应用于国土勘测、道路规划、滑坡灾害监测、场地选址等场景。本文基于Cesium实现了一套基础的交互式多边形坡度分析方案。支持手动点击绘制多边形、右键确认分析、区域平滑渐变着色、一键重置等功能。后续可根据自身项目需求修改优化。

核心功能拆解

交互式绘制：左键点击绘制多边形分析区域，右键确认执行坡度分析（前文已实现）。
坡度分析：根据所选区域经纬度，利用turf拿到网格数据，进而计算出网格的坡度，最后分级批量渲染。

交互式绘制

前文已着重介绍，入口。代码如下：

js 复制代码

const { mouseMovePostion, leftClickPosition, rightClickPosition } = storeToRefs(cesiumEventStore);
const bbox = []
let polygon = null;
const loading = ref(false)
const watchPosition = (source, methodName) => {
    watch(source, (pos) => {
        if (!polygon) return
        if (methodName === 'leftClickPosition' && pos) {
            bbox.push(pos.longitude, pos.latitude)
        }
        if (methodName === 'clearDrawing') {
            if (bbox.length < 2) {
                console.log('请先点击至少一个点！');
                return;
            }
            loading.value = true
            slopeAnalysis(bbox, viewer.value)
            loading.value = false
        }
        polygon[methodName](pos ? { ...pos } : undefined)

    },
        { deep: true }
    )
}
watchPosition(leftClickPosition, 'leftClickPosition')
watchPosition(rightClickPosition, 'clearDrawing')
watchPosition(mouseMovePostion, 'mouseMovePosition')

坡度分析

在区域坡度分析体系中，最小分析单元是单个网格面，最终的坡度值而是依据网格顶点的「经纬度、海拔高度」，还原出该网格平面的空间方程，算出网格平面与水平面的夹角，即为当前地块的真实坡度。整体流程分为两步：先对多边形区域做三角网格剖分，再批量采样地形高程、逐面计算坡度并分级，最终配合着色器实现平滑渐变渲染。

js 复制代码

const SLOPE_LEVELS = [
    { key: 'flat', max: 5 },         // 0-5°
    { key: 'slightlyGentle', max: 10 },     // 5-10°
    { key: 'gentle', max: 15 },      // 10-15°
    { key: 'moderate', max: 20 },      // 15-20°
    { key: 'steep', max: 25 },       // 20-25°
    { key: 'verySteep', max: 30 },  // 25-30°
    { key: 'extremeSteep', max: 35 },   // 30-35°
    { key: 'dangerouslySteep', max: 90 }// > 35
];
    const triangles = generateTrianglesFromBbox(bbox)
    const result = await dataProcesse(triangles, viewer)
    for (const level of SLOPE_LEVELS) {
        const list = result[level.key]
        if (!list || list.length === 0) continue

        // 批量合并所有三角形几何
        const geometries = list.map(item => {
            const positions = cesium.Cartesian3.fromDegreesArray(item.coordinates)
            return createGeometry(positions)
        })

        // 创建一个批量 Primitive
        const primitive = new cesium.GroundPrimitive({
            geometryInstances: geometries,
            appearance: createAppearance(level.max)
        })
        viewer.scene.primitives.add(primitive)
    }

总结

功能伊始尝试参考全局气压数据的渲染思路，采用直接加载GeoJSON网格、依靠多边形平均高程映射颜色 的方案，跳过复杂的坡度运算直接实现可视化。但实现后发现该方案存在无法规避的两大缺陷：第一，该方式仅依据高度绝对值配色，没有参与坡面夹角运算，不具备真实坡度数学逻辑，高地平地、低地陡坡会出现配色混淆，完全不符合地形坡度分析标准；第二，网格数据量较大时，传统贴地渲染方式性能开销极高，极易出现页面卡顿、浏览器崩溃的问题，无法适配实际项目的大范围分析场景。

针对上述两个问题，在算法层面 ，摒弃纯高程配色逻辑，采用三角面空间夹角算法 ，通过三角形三点空间坐标求解坡面与水平面的真实夹角，从数学逻辑上保证坡度计算的准确性。在渲染层面 ，放弃传统矢量图层渲染，改用Cesium底层GroundPrimitive渲染，轻量化批量绘制三角面片，大幅降低大数据量场景的渲染压力，解决浏览器崩溃问题。

最终通过「Turf网格剖分 + 逐三角面精准坡度计算 + 坡度分级 + 自定义着色器渐变渲染 + Primitive高性能批量绘制」的完整方案，成功实现了局部多边形区域的精准坡度分析。

Cesium应用（六）：三维地形中坡度分析的实现过程

坡度分析

核心功能拆解

交互式绘制

坡度分析

总结

实现效果