cesium 局部区域的等高线如何实现

Question

cesium 局部区域的等高线如何实现？基于cesium 自带的ElevationContour材质实现，目前想到的解决办法为修改着色器限制material的作用区域，但是不会具体实施方法，有没有人能提供相似参考博文

Answer 1

要实现 Cesium 中局部区域的等高线，可以使用 Cesium 自带的 ElevationContour 材质，并结合修改着色器的方法来限制其作用区域。下面是一个简单的实现思路和代码示例。

1、实现思路
Cesium 中的 ElevationContour 材质可以用于绘制等高线，它的作用是根据高度值将地形网格进行分层，并使用不同的颜色来表示不同的高度层。为了实现局部区域的等高线，我们可以通过修改着色器的方式来限制 ElevationContour 材质的作用范围，只对局部区域进行渲染。

具体来说，我们可以在 ElevationContour 材质的着色器中添加一个额外的输入变量，用于传入局部区域的坐标范围。然后在着色器中判断当前像素是否在局部区域内，如果在，则进行等高线绘制，否则不进行绘制。

2、代码示例
下面是一个简单的代码示例，用于实现 Cesium 中局部区域的等高线。这里假设已经有一个高程数据集，并且已经使用 Cesium.CesiumTerrainProvider 将其加载到了场景中。代码中使用了 ElevationContour 材质和修改后的着色器来实现局部区域的等高线。

// 定义局部区域的范围
var rect = new Cesium.Rectangle.fromDegrees(west, south, east, north);

// 创建等高线材质
var contourMaterial = new Cesium.ElevationContourMaterialProperty({
    color: Cesium.Color.RED,
    lineThickness: 4,
    spacing: 50,
    // 自定义着色器
    shaderSource: {
        vertexShader: `
            attribute vec3 position3DHigh;
            attribute vec3 position3DLow;
            attribute vec4 color;
            attribute vec3 normal;

            uniform mat4 modelViewProjection;

            varying vec4 v_color;

            void main() {
                vec4 position = czm_computePosition();
                v_color = color;
                gl_Position = modelViewProjection * position;
            }
        `,
        fragmentShader: `
            varying vec4 v_color;

            // 添加额外的输入变量，用于传入局部区域的坐标范围
            uniform vec4 u_rect;

            void main() {
                // 判断当前像素是否在局部区域内
                vec2 st = gl_FragCoord.xy / czm_viewport.zw;
                vec2 coord = mix(czm_viewportOrthographic.xy, czm_viewportOrthographic.zw, st);
                vec3 position = czm_inverseModelViewProjection * vec4(coord, 1.0);
                if (position.x >= u_rect.x && position.x <= u_rect.y &&
                    position.y >= u_rect.z && position.y <= u_rect.w) {
                    gl_FragColor = v_color;
                } else {
                    discard;
                }
            }
        `
    }
});

// 创建等高线 Primitive
var contourPrimitive = new Cesium.Primitive({
    geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.RectangleGeometry({
            rectangle: Cesium.Rectangle.MAX_VALUE,
            ellipsoid: Cesium.Ellipsoid.WGS84,
            height: 0
        }),
        attributes: {
            color: Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.RED)
        }
    }),
    appearance: new Cesium.ElevationContourAppearance({
        material: contourMaterial
    })
});

// 在场景中添加等高线 Primitive
viewer.scene.primitives.add(contourPrimitive);

//以上代码示例中，通过创建 `ElevationContourMaterialProperty`