Cesium 丐版高度量算

本文使用geoserver图层点位信息，并未单独添加高程，获取高度的方式不太一样。

function calculateAltitudeIntercept() {

    viewer = earthViewer.basicMap3d.viewer
    
    let positions = []
    let positionLine = []
    let height= []

    var handlerDisAltitudeIntercept = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    handlerDisAltitudeIntercept.setInputAction(async (e) => {

        let position = viewer.scene.pickPosition(e.position);
        positions.push(position)

        var cartographicPos = Cesium.Cartographic.fromCartesian(position);
        var lonDegree = Cesium.Math.toDegrees(cartographicPos.longitude);
        var latDegree = Cesium.Math.toDegrees(cartographicPos.latitude);
        positionLine.push({lonDegree,latDegree})

        let cartesian = viewer.camera.pickEllipsoid( e.position, viewer.scene.globe.ellipsoid );
        if(cartesian == undefined){
        return;
        }else {
                var pickRay= viewer.camera.getPickRay(e.position);
                var featuresPromise =
                await viewer.imageryLayers.pickImageryLayerFeatures(
                pickRay,
                viewer.scene)
            if (featuresPromise?.length){
                let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                let lon = Cesium.Math.toDegrees(cartographic.longitude);
                
                let lat= Cesium.Math.toDegrees(cartographic.latitude);
                var data = featuresPromise[0].data; //点击位置信息
                height.push(data.properties) // 高度
                console.log([lon,lat],data.properties, e);
            }
        }

        if (positions.length == 1) {
            addPointHight(positions[0])
        } else if(positions.length == 2) {
            addPointHight(positions[1], Math.abs(height[1].GRAY_INDEX - height[0].GRAY_INDEX))
            addLineHight(positionLine[0],positionLine[1])
            positions = []
            positionLine = []
            height= []
        }

        
        function addPointHight(params,text = false) {
            viewer.entities.add(new Cesium.Entity({
                position: Cesium.Cartesian3.clone(params),
                point: {
                    pixelSize: 10,
                    color: Cesium.Color.RED,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY
                },
            }));

            if (text) {
                viewer.entities.add(new Cesium.Entity({
                    position : Cesium.Cartesian3.clone(params),
                    label : {
                        text: text.toString()+'米',
                        font: "18px Microsoft YaHei",
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                        verticalOrigin: Cesium.VerticalOrigin.BASELINE,
                        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                        fillColor: Cesium.Color.WHITE,
                        outlineColor: Cesium.Color.BLACK,
                        outlineWidth: 1.0,
                        pixelOffset: new Cesium.Cartesian2(8.0, -18),
                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
                    }
                }))
            }
        }

        function addLineHight(start,end) {
            const point1 = Cesium.Cartesian3.fromDegrees(start.lonDegree,start.latDegree)
            const point2 = Cesium.Cartesian3.fromDegrees(end.lonDegree,end.latDegree)
            viewer.entities.add(new Cesium.Entity({
                name: 'height',
                polyline: {
                    positions: [point1, point2],
                    clampToGround: true, // 禁用深度测试，使点始终显示在地球表面上
                    width: 3,
                    material: Cesium.Color.fromBytes(255,43,0)
                }
            }))
        }

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

}

当用户通过鼠标点击屏幕上的第一点时，程序会捕获这个点击事件并在该位置绘制一个点。这个点是用户进行地形测量或路径规划的起始点。

随后，当用户再次点击屏幕上的第二点时，程序同样会捕获这个点击事件并在新位置绘制第二个点。此时，程序会计算这两个点之间的高度差，这通常是通过分析地形数据或使用某种高度模型（如数字高程模型DEM）来实现的。计算出的高度差信息对于了解地形起伏、规划路线或进行其他地理测量非常有用。

在计算出高度差之后，程序会在屏幕上展示一个标签（label），这个标签清晰地显示出两个点之间的高度差异。为了让用户更直观地理解这一信息，标签的设计通常会进行美化处理，比如使用醒目的字体、颜色或图标，以及可能包含一些附加的说明文字，以提高可读性和视觉效果。

整体而言，这个过程逻辑清晰，用户体验友好。用户通过简单的鼠标点击操作就能获取到关键的地形信息，而程序则通过精确计算和美观的展示方式，帮助用户更好地理解和利用这些数据。