cesium绘制矩形并返回矩形经纬度及面积

使用turf.js库计算面积

 

  // 绘制矩形
    function drawRectangle(whetherStart) {
        if (viewer) {
            // drawPoint(false)
            if (whetherStart) {
                let clickPoint = [];
                removeEntityByName('drawRectangle')
                return new Promise((resolve, reject) => {
                    // 鼠标左键绘制
                    viewer.screenSpaceEventHandler.setInputAction(function (movement) {
                        const earthPosition = viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);//当前世界坐标笛卡尔积
                        if (Cesium.defined(earthPosition)) {
                            // 判断现在是第几个点
                            if (clickPoint.length === 0) {//还没有点，添加第一个点
                                clickPoint.push(earthPosition)
                            } else {//绘制矩形
                                clickPoint.push(earthPosition)

                                // 绘制矩形
                                const rectangleHand = Cesium.Rectangle.fromCartesianArray(clickPoint)
                                viewer.entities.add({
                                    name: 'drawRectangle',
                                    rectangle: {
                                        coordinates: rectangleHand,
                                        material: Cesium.Color.fromCssColorString("rgba(25, 98, 134, 0.5)"),
                                    },
                                });
                                // 删除移动矩形
                                removeEntityByName('moveDrawRectangle')
                                const northwest = Cesium.Rectangle.northwest(rectangleHand);//西北角弧度坐标（左上）
                                const southwest = Cesium.Rectangle.southwest(rectangleHand);//西南角弧度坐标（左下）
                                const northeast = Cesium.Rectangle.northeast(rectangleHand);//东北角弧度坐标（右上）
                                const southeast = Cesium.Rectangle.southeast(rectangleHand);//东南角弧度坐标（右下）

                                // 转换为经纬度
                                const leftTop = [Cesium.Math.toDegrees(northwest.longitude), Cesium.Math.toDegrees(northwest.latitude)];//左上角经度
                                const leftBottom = [Cesium.Math.toDegrees(southwest.longitude), Cesium.Math.toDegrees(southwest.latitude)];//左下角经度
                                const rightTop = [Cesium.Math.toDegrees(northeast.longitude), Cesium.Math.toDegrees(northeast.latitude)];//右上角经度
                                const rightBottom = [Cesium.Math.toDegrees(southeast.longitude), Cesium.Math.toDegrees(southeast.latitude)];//右下角经度
                                var polygon = turf.polygon([[
                                    leftTop, rightTop, rightBottom, leftBottom, leftTop
                                ]]);
                                // 面积(m²)
                                var area = turf.area(polygon);
                                const data = {
                                    leftTop: leftTop,
                                    leftBottom: leftBottom,
                                    rightTop: rightTop,
                                    rightBottom: rightBottom,
                                    area: area,//面积(m²)
                                }
                                resolve(data)
                                clickPoint = [];//清空
                                viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);//停止监听移动事件
                                viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);//停止监听移动事件
                            }
                        }
                    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

                    viewer.screenSpaceEventHandler.setInputAction(function (movement) {
                        const newPosition = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);//当前世界坐标笛卡尔积
                        if (Cesium.defined(newPosition)) {
                            const movePoint = [...clickPoint, newPosition]
                            removeEntityByName('moveDrawRectangle')
                            const rectangleHand = {
                                coordinates: new Cesium.CallbackProperty(function () {
                                    const obj = Cesium.Rectangle.fromCartesianArray(movePoint);
                                    return obj;
                                }, false),
                                material: Cesium.Color.fromCssColorString("rgba(198, 27, 27, 0.48)"),
                            }
                            viewer.entities.add({
                                name: 'moveDrawRectangle',
                                rectangle: rectangleHand,
                            });
                        }
                    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
                })
            } else {
                removeEntityByName('drawRectangle')
                removeEntityByName('moveDrawRectangle')
                viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);//停止监听移动事件
                viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);//停止监听移动事件
            }
        }
    }

使用：

 const data = await drawRectangle(true)
 if (data) {
    console.log('矩形经纬度: ', data)
 }