Cesium 丐版方位量算

 

function calculateAzimuthDegreeMeasure(){

    let positions = []
    let positionList = []

    var handlerDisAzimuthDegreeMeasure = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handlerDisAzimuthDegreeMeasure.setInputAction(function (movement) {

        let position = viewer.scene.pickPosition(movement.position);
        positionList.push(position)

        var cartographicPos = Cesium.Cartographic.fromCartesian(position);
        let latitude = Cesium.Math.toDegrees(cartographicPos.latitude);
        let longitude = Cesium.Math.toDegrees(cartographicPos.longitude);
        var lonDegree = Cesium.Math.toDegrees(cartographicPos.longitude);
        var latDegree = Cesium.Math.toDegrees(cartographicPos.latitude);
        

        positions.push({lonDegree,latDegree})

        if (positions.length == 1) {
            const end = {
                lonDegree,
                latDegree:positions[0].latDegree+20
            }
            addLine(positions[0],end)
        } else {
            addLine(positions[0],{lonDegree,latDegree})
            
            addLabel({longitude,latitude},getAngleFromNorth(positionList[0], position))
            console.log(getAngleFromNorth(positionList[0], position));
        }
        
       

    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    function addLine(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: 'outer',
            polyline: {
                positions: [point1, point2],
                clampToGround: true, // 禁用深度测试，使点始终显示在地球表面上
                width: 3,
                material: Cesium.Color.fromBytes(255,43,0)
            }
        }))
    }

    function getAngleFromNorth(startPoint, endPoint) {
        var headingPitchRoll = new Cesium.HeadingPitchRoll();
        var startCartographic = Cesium.Cartographic.fromCartesian(startPoint);
        var endCartographic = Cesium.Cartographic.fromCartesian(endPoint);
        var startLongitude = Cesium.Math.toDegrees(startCartographic.longitude);
        var startLatitude = Cesium.Math.toDegrees(startCartographic.latitude);
        var endLongitude = Cesium.Math.toDegrees(endCartographic.longitude);
        var endLatitude = Cesium.Math.toDegrees(endCartographic.latitude);

        
        var angle = Math.atan2(endLongitude - startLongitude, endLatitude - startLatitude);
        angle = Cesium.Math.toDegrees(angle);
        angle = (angle + 360) % 360; // 将角度转换为0-360度的范围
        return angle;
    }

    function addLabel(start, text) {
        console.log(start,'start',text);
        viewer.entities.add(new Cesium.Entity({
            position : Cesium.Cartesian3.fromDegrees(start.longitude, start.latitude),
            label : {
                text : text.toFixed(5) + "°",
                show : true ,
                font: '18px sans-serif',
                fillColor: Cesium.Color.GOLD,
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                showBackground: true, //指定标签后面背景的可见性
                backgroundColor: new Cesium.Color(0.165, 0.165, 0.165, 0.8), // 背景颜色
                backgroundPadding: new Cesium.Cartesian2(6, 6),
                outlineWidth: 2,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset: new Cesium.Cartesian2(20, -20),
                clampToGround: true,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            }
        }))
    }
    
}

当用户在地图上点击第一个点时，程序会立即绘制一条指北线，这条线以该点为起点，并精确指向正北方向。这样的设计可以帮助用户明确方向，为接下来的操作提供明确的参照。

随后，当用户点击第二个点时，程序会连接这两个点，形成一条线段。这条线段不仅表示了用户选择的路径或测量的距离，同时也为后续的角度计算提供了基础。

接着，程序会调用getAngleFromNorth函数，以第一个点的位置为基准，计算第二个点相对于正北方向的角度。这个函数利用地理坐标和三角函数来精确计算角度，确保结果的准确性。

最后，为了增强用户的理解和体验，程序会在第二个点的旁边添加一个标签（label）。这个标签会清晰地展示出计算出的角度值，帮助用户直观地了解两个点之间的方向关系。

整体而言，这个逻辑流程既实用又易于理解。通过简单的鼠标点击操作，用户就能快速获取到方向信息，而程序则通过精确的计算和美观的展示方式，为用户提供了更好的使用体验。感谢各位前辈的指导和支持，我会继续努力优化和完善这一功能。