cesium鼠标框选矩形放大

### 实现Cesium中鼠标框选矩形区域并放大 在Cesium环境中，为了实现通过鼠标绘制矩形来选择特定地理区域，并对该区域进行缩放查看的功能，可以利用`Cesium.ScreenSpaceEventHandler`监听鼠标的动作。当用户按下鼠标左键开始拖拽时记录起始位置，在松开鼠标按钮结束拖拽操作的同时计算出所覆盖的屏幕坐标范围，并将其转换成对应的地球表面经纬度边界，最后调整摄像机视角至该选定区域内。 下面是一段JavaScript代码片段展示了这一过程的具体实施方式： ```javascript // 初始化处理句柄 const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas); let start; let end; handler.setInputAction((movement) => { start = movement.position; }, Cesium.ScreenSpaceEventType.LEFT_DOWN); handler.setInputAction((movement) => { end = movement.endPosition; // 计算两个点之间的距离以判断是否形成有效矩形 if (!start || !end || Math.abs(start.x - end.x) < 5 || Math.abs(start.y - end.y) < 5) return; const west = Math.min(start.x, end.x); const south = Math.min(start.y, end.y); const east = Math.max(start.x, end.x); const north = Math.max(start.y, end.y); // 将屏幕上的像素坐标转为世界坐标（笛卡尔） let cartesianSouthWest = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(west, south), viewer.scene.globe.ellipsoid ); let cartesianNorthEast = viewer.camera.pickEllipsoid( new Cesium.Cartesian2(east, north), viewer.scene.globe.ellipsoid ); if (cartesianSouthWest && cartesianNorthEast) { // 转换为地理坐标（经度/纬度） var swCartographic = Cesium.Cartographic.fromCartesian(cartesianSouthWest)[^2]; var neCartographic = Cesium.Cartographic.fromCartesian(cartesianNorthEast); var selectedRectangle = Cesium.Rectangle.fromDegrees( Cesium.Math.toDegrees(swCartographic.longitude), Cesium.Math.toDegrees(swCartographic.latitude), Cesium.Math.toDegrees(neCartographic.longitude), Cesium.Math.toDegrees(neCartographic.latitude) ); // 设置相机视图到指定矩形区域 viewer.camera.flyTo({ destination: selectedRectangle, orientation: { heading: Cesium.Math.toRadians(0), // 正北方向 pitch: Cesium.Math.toRadians(-90), // 向下看 roll: 0.0 // 默认无滚动角度 } }); // 清除起点终点以便下次绘图 start = undefined; end = undefined; } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE | Cesium.ScreenSpaceEventType.LEFT_UP); ``` 这段脚本首先设置了对于画布上发生的三种类型的交互事件——点击(`LEFT_DOWN`)、移动(`MOUSE_MOVE`)以及释放(`LEFT_UP`)的响应逻辑。每当检测到一次完整的从按压到抬起的过程，则尝试构建一个由这两个端点定义的新矩形，并据此更新场景内的摄像头状态，从而达到聚焦于新划定区间的视觉效果[^3]。